Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
teddybradford opened this issue Apr 14, 2022 · 3 comments

Comments

@teddybradford
Copy link

teddybradford commented Apr 14, 2022

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
@guuseh
Copy link

guuseh commented May 25, 2023

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?

@Connum
Copy link
Contributor

Connum commented Oct 20, 2023

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
Copy link
Contributor

Connum commented Nov 26, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants