You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The new API seems to flip/convert coordinates twice resulting in a "flipped" rendering when using SVG related methods such as font.getPath()
Expected Behavior
Obviously, the internal font coordinates using a traditional cartesian system (y-axis going from bottom to top - starting at the baseline) has to be converted for SVG conversion (top-to-bottom y-axis).
Current Behavior
The necessary conversion is applied twice
calling font.getPath()
and path.toPathData() – still using the flipY=true parameter as default
Possible Solution
Probably ditch the flipY parameter in path.toPathData() or invert a specified parameter so the (sensible) default parameter would be reversed
flipY = flipY === true ? false : true
... I know kind of nuts
Otherwise the default font.getPath() coordinate calculation may accept the flipY parameter instead.
(async () => {
let fonturl =
"https://cdn.jsdelivr.net/gh/opentypejs/opentype.js@master/docs/fonts/FiraSansMedium.woff";
let buffer = await (await fetch(fonturl)).arrayBuffer();
// parse
let font = opentype.parse(buffer);
console.log(font);
//render
let text = "a";
let fontSize = 72;
let x = 0;
let y = fontSize;
// 1. get SVG compatible path data
let path = font.getPath(text, x, y, fontSize);
let d0 = path.commands
.map((com) => {
return Object.values(com).join(" ");
})
.join(" ");
console.log(d0);
path2.setAttribute("d", d0);
// 2. stringify path data
let d = path.toPathData();
console.log(d);
path3.setAttribute("d", d);
// 3. create svg element
let pathEl = path.toDOMElement();
svg.append(pathEl);
})();
The new API seems to flip/convert coordinates twice resulting in a "flipped" rendering when using SVG related methods such as
font.getPath()
Expected Behavior
Obviously, the internal font coordinates using a traditional cartesian system (y-axis going from bottom to top - starting at the baseline) has to be converted for SVG conversion (top-to-bottom y-axis).
Current Behavior
The necessary conversion is applied twice
font.getPath()
path.toPathData()
– still using theflipY=true
parameter as defaultPossible Solution
Probably ditch the flipY parameter in
path.toPathData()
or invert a specified parameter so the (sensible) default parameter would be reversed... I know kind of nuts
Otherwise the default
font.getPath()
coordinate calculation may accept theflipY
parameter instead.Steps to Reproduce (for bugs)
Codepen Example based on v 2.0.0
The same example using V1.3.4
Context
From my perspective a minor issue. But oviously the new version should produce the same result
Your Environment
The text was updated successfully, but these errors were encountered: