Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/glyph/Path.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,11 @@ export default class Path {
* @return {string}
*/
toFunction() {
let cmds = this.commands.map(c => ` ctx.${c.command}(${c.args.join(', ')});`);
return new Function('ctx', cmds.join('\n'));
return ctx => {
this.commands.forEach(c => {
return ctx[c.command].apply(ctx, c.args)
})
};
}

/**
Expand Down
38 changes: 36 additions & 2 deletions test/glyphs.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,28 @@ describe('glyphs', function() {
return assert.equal(glyph.constructor.name, 'TTFGlyph');
});

it('should get a path for the glyph', function() {
it('should get a path for the glyph as SVG', function() {
let glyph = font.getGlyph(39);
return assert.equal(glyph.path.toSVG(), 'M1368 745Q1368 383 1171.5 191.5Q975 0 606 0L201 0L201 1462L649 1462Q990 1462 1179 1273Q1368 1084 1368 745ZM1188 739Q1188 1025 1044.5 1170Q901 1315 618 1315L371 1315L371 147L578 147Q882 147 1035 296.5Q1188 446 1188 739Z');
});

it('should get a path for the glyph as function', function() {
let glyph = font.getGlyph(39);
let results = [];
let ctx = {
moveTo: (...args) => results.push('moveTo(' + args.join(', ') + ');'),
lineTo: (...args) => results.push('lineTo(' + args.join(', ') + ');'),
quadraticCurveTo: (...args) => results.push('quadraticCurveTo(' + args.join(', ') + ');'),
bezierCurveTo: (...args) => results.push('bezierCurveTo(' + args.join(', ') + ');'),
closePath: (...args) => results.push('closePath(' + args.join(', ') + ');')
};

let fn = glyph.path.toFunction();
fn(ctx);

return assert.equal(results.join('\n'), 'moveTo(1368, 745);\nquadraticCurveTo(1368, 383, 1171.5, 191.5);\nquadraticCurveTo(975, 0, 606, 0);\nlineTo(201, 0);\nlineTo(201, 1462);\nlineTo(649, 1462);\nquadraticCurveTo(990, 1462, 1179, 1273);\nquadraticCurveTo(1368, 1084, 1368, 745);\nclosePath();\nmoveTo(1188, 739);\nquadraticCurveTo(1188, 1025, 1044.5, 1170);\nquadraticCurveTo(901, 1315, 618, 1315);\nlineTo(371, 1315);\nlineTo(371, 147);\nlineTo(578, 147);\nquadraticCurveTo(882, 147, 1035, 296.5);\nquadraticCurveTo(1188, 446, 1188, 739);\nclosePath();');
});

it('should get a composite glyph', function() {
let glyph = font.getGlyph(171); // é
return assert.equal(glyph.path.toSVG(), 'M639 -20Q396 -20 255.5 128Q115 276 115 539Q115 804 245.5 960Q376 1116 596 1116Q802 1116 922 980.5Q1042 845 1042 623L1042 518L287 518Q292 325 384.5 225Q477 125 645 125Q822 125 995 199L995 51Q907 13 828.5 -3.5Q750 -20 639 -20ZM594 977Q462 977 383.5 891Q305 805 291 653L864 653Q864 810 794 893.5Q724 977 594 977ZM471 1266Q519 1328 574.5 1416Q630 1504 662 1569L864 1569L864 1548Q820 1483 733 1388Q646 1293 582 1241L471 1241Z');
Expand Down Expand Up @@ -71,11 +88,28 @@ describe('glyphs', function() {
return assert.equal(glyph.constructor.name, 'CFFGlyph');
});

it('should get a path for the glyph', function() {
it('should get a path for the glyph as SVG', function() {
let glyph = font.getGlyph(5);
return assert.equal(glyph.path.toSVG(), 'M90 0L258 0C456 0 564 122 564 331C564 539 456 656 254 656L90 656ZM173 68L173 588L248 588C401 588 478 496 478 331C478 165 401 68 248 68Z');
});

it('should get a path for the glyph as function', function() {
let glyph = font.getGlyph(5);
let results = [];
let ctx = {
moveTo: (...args) => results.push('moveTo(' + args.join(', ') + ');'),
lineTo: (...args) => results.push('lineTo(' + args.join(', ') + ');'),
quadraticCurveTo: (...args) => results.push('quadraticCurveTo(' + args.join(', ') + ');'),
bezierCurveTo: (...args) => results.push('bezierCurveTo(' + args.join(', ') + ');'),
closePath: (...args) => results.push('closePath(' + args.join(', ') + ');')
};

let fn = glyph.path.toFunction();
fn(ctx);

return assert.equal(results.join('\n'), 'moveTo(90, 0);\nlineTo(258, 0);\nbezierCurveTo(456, 0, 564, 122, 564, 331);\nbezierCurveTo(564, 539, 456, 656, 254, 656);\nlineTo(90, 656);\nclosePath();\nmoveTo(173, 68);\nlineTo(173, 588);\nlineTo(248, 588);\nbezierCurveTo(401, 588, 478, 496, 478, 331);\nbezierCurveTo(478, 165, 401, 68, 248, 68);\nclosePath();');
});

it('should get the glyph cbox', function() {
let glyph = font.getGlyph(5);
return assert.deepEqual(glyph.cbox, new BBox(90, 0, 564, 656));
Expand Down