diff --git a/README.md b/README.md index fd020e69..c2348b39 100644 --- a/README.md +++ b/README.md @@ -194,10 +194,11 @@ Create a Path that represents the given text. * `fontSize`: Size of the text in pixels (default: `72`). Options is an optional object containing: -* `kerning`: if true takes kerning information into account (default: `true`) +* `kerning`: if `true`, takes kerning information into account (default: `true`) * `features`: an object with [OpenType feature tags](https://docs.microsoft.com/en-us/typography/opentype/spec/featuretags) as keys, and a boolean value to enable each feature. Currently only ligature features `"liga"` and `"rlig"` are supported (default: `true`). * `hinting`: if true uses TrueType font hinting if available (default: `false`). +* `style`: An object of possible styling properties (fill, stroke, strokeWidth) applied to the resulting Path _**Note:** there is also `Font.getPaths()` with the same arguments, which returns a list of Paths._ @@ -213,6 +214,7 @@ Options is an optional object containing: * `features`: an object with [OpenType feature tags](https://docs.microsoft.com/en-us/typography/opentype/spec/featuretags) as keys, and a boolean value to enable each feature. Currently only ligature features `"liga"` and `"rlig"` are supported (default: `true`). * `hinting`: if true uses TrueType font hinting if available (default: `false`). +* `style`: An object of possible styling properties (fill, stroke, strokeWidth) applied to the resulting Path #### `Font.drawPoints(ctx, text, x, y, fontSize, options)` Draw the points of all glyphs in the text. On-curve points will be drawn in blue, off-curve points will be drawn in red. The arguments are the same as `Font.draw()`. diff --git a/src/font.js b/src/font.js index a4ca07f3..69eca6fc 100644 --- a/src/font.js +++ b/src/font.js @@ -366,6 +366,10 @@ Font.prototype.getPath = function(text, x, y, fontSize, options) { const glyphPath = glyph.getPath(gX, gY, gFontSize, options, this); fullPath.extend(glyphPath); }); + + if ( options.style !== undefined ) { + fullPath.applyStyles(options.style); + } return fullPath; }; diff --git a/src/glyph.js b/src/glyph.js index f87e0400..ee33a5b8 100644 --- a/src/glyph.js +++ b/src/glyph.js @@ -187,6 +187,10 @@ Glyph.prototype.getPath = function(x, y, fontSize, options, font) { } } + if ( options.style !== undefined ) { + p.applyStyles(options.style); + } + return p; }; diff --git a/src/path.js b/src/path.js index 47442b7b..7a7f36aa 100644 --- a/src/path.js +++ b/src/path.js @@ -658,4 +658,22 @@ Path.prototype.toDOMElement = function(options, pathData) { return newPath; }; +/** + * Apply styles to the path + * @param {object} [styles] - Styles object {fill,stroke,strokeWidth} + * @return {Path} + */ +Path.prototype.applyStyles = function(styles) { + if ( styles !== undefined ) { + const pathStyles = ['fill','stroke','strokeWidth']; + for(let s = 0; s < pathStyles.length; s++) { + const styleProp = pathStyles[s]; + if ( styles[styleProp] !== undefined ) { + this[styleProp] = styles[styleProp]; + } + } + } + return this; +}; + export default Path; diff --git a/test/font.js b/test/font.js index b114d5a3..9eaf82c7 100644 --- a/test/font.js +++ b/test/font.js @@ -92,6 +92,22 @@ describe('font.js', function() { }); }); + + describe('style handling', function() { + let font; + + before(function() { + font = loadSync('./test/fonts/Roboto-Black.ttf'); + }); + + it('should apply style options to the path', function() { + const options = { + style: { fill: '#ffaa00' } + }; + const path = font.getPath('X', 0, 0, 72, options); + assert.equal(path.fill, '#ffaa00'); + }); + }); describe('hasChar', function() { it('returns correct results for non-CMAP fonts', function() { diff --git a/test/glyph.js b/test/glyph.js index 6bce6493..132a4e9f 100644 --- a/test/glyph.js +++ b/test/glyph.js @@ -133,6 +133,24 @@ describe('glyph.js', function() { }); }); }); + + describe('style handling', function() { + let font; + let glyph; + + before(function() { + font = loadSync('./test/fonts/Roboto-Black.ttf'); + glyph = font.charToGlyph('A'); + }); + + it('should apply style options to the path', function() { + const options = { + style: { fill: '#ffaa00' } + }; + const path = glyph.getPath(0, 0, 72, options, font); + assert.equal(path.fill, '#ffaa00'); + }); + }); }); describe('glyph.js on low memory mode', function() { diff --git a/test/path.js b/test/path.js index 1046bd94..d10660bf 100644 --- a/test/path.js +++ b/test/path.js @@ -153,6 +153,20 @@ describe('path.js', function() { emptyPath.fill = 'black'; assert.equal(emptyPath.toDOMElement().getAttribute('fill'), undefined); }); + + it('should apply styles via applyStyles()', function() { + const styles = { + fill: '#ffaa00', + stroke: '#6600aa', + strokeWidth: 5 + }; + emptyPath.applyStyles(styles); + assert.deepEqual({ + fill: emptyPath.fill, + stroke: emptyPath.stroke, + strokeWidth: emptyPath.strokeWidth + }, styles); + }); after(() => { delete global.document;