opentype.js
opentype.js copied to clipboard
Setting path fill, stroke, and strokeWidth properties not working as expected
Expected Behavior
When creating a new Glyph, I expected the path's fill
, stroke
, and strokeWidth
properties to be passed on to the Glyph.path
property.
Current Behavior
After setting fill
, stroke
, and strokeWidth
on a path and then adding it to a new glyph, logging glyph.getPath().path
returns a path with default fill
, stroke
, and strokeWidth
properties.
Steps to Reproduce
const bPath = new Path();
bPath.moveTo(0, 300);
bPath.lineTo(300, 600);
bPath.lineTo(600, 300);
bPath.fill = null;
bPath.stroke = 'red';
bPath.strokeWidth = 50;
const bGlyph = new Glyph({
name: 'B',
unicode: 65,
advanceWidth: 650,
path: bPath
});
console.log(bPath, bGlyph.getPath());
console.log
returns:
Object { commands: (3) […], fill: null, stroke: "red", strokeWidth: 50 }
Object { commands: (3) […], fill: "black", stroke: null, strokeWidth: 1 }
Environment
- Version used: latest
- Font used: n/a
- Browser Name and version: FF 99
- Operating System and version (desktop or mobile): macOS
- Link to your project: n/a
I have this same problem. Did you end up finding a solution for it? When I console.log(bGlyph) without .getPath() it does have the right settings in the path but they somehow get lost somewhere?
While a glyph is based on a path, it doesn't make sense for me to have different styles for each glyph. getPath()
doesn't simply return the Glyph's path
property, but builds a new path that you can position, in a specific font size, and even using the hinting information from a different font. So I wouldn't expect the Glyph to retain the styling information.
You can still get the path's styling from glyph.path
directly. And once #623 is implemented via #626, you'll be able to provide the styles back to the new Path using the options:
const bPath = bGlyph.path;
const bStyles = {
fill: bPath.fill,
stroke: bPath.stroke,
strokeWidth: bPath.strokeWidth
};
const options = {
style: bStyles
};
bGlyph.getPath(0, 0, 72, options);
What we could do to make this a bit more straight-forward is implement a new option like options.retainStyles
that will copy the base path's styles before applying any overrides via options.style
. But that would have to wait for #626.
Ok, we actually need to copy the properties in order to support #459