opentype.js icon indicating copy to clipboard operation
opentype.js copied to clipboard

Setting path fill, stroke, and strokeWidth properties not working as expected

Open teddybradford opened this issue 2 years ago • 3 comments

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

teddybradford avatar Apr 14 '22 14:04 teddybradford

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?

guuseh avatar May 25 '23 08:05 guuseh

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.

Connum avatar Oct 20 '23 16:10 Connum

Ok, we actually need to copy the properties in order to support #459

Connum avatar Nov 26 '23 17:11 Connum