search

photopea / Typr.js

Typr.js - process fonts in Javascript
MIT License
914 stars 73 forks source link

Upside down results on conversion to a SVG path using `glyphToPath` #21

Closed vinaydotblog closed 6 years ago

vinaydotblog commented 6 years ago

I'm trying to generate a SVG path for a given font, which i'm able to do successfully but the generated path is an upside down text with a huge unit size.

Here is a working fiddle. http://jsfiddle.net/k67t8mre/18/

Can you suggest a way to fix the orientation and control the size of unit ?

photopea commented 6 years ago

Hi, the default Typr paths are in "font coordinates". The Y axis goes upwards (in SVG or Canvas, it goes downwards). Also, all coordinates are integers (no decimal points), which also can be considered a nice property.

After you call path = Typr.U.glyphsToPath(font, glyphs); , there is an array path.crds of numbers. They are ordered as [X,Y,X,Y ....]. So just loop through and put Y = -Y; and X /= 1000; Y /=1000;

You can also transform the SVG path by giving the element a CSS transform in SVG. transform="scale(0.001, -0.001)" .

Check out Typr.U.stringToContext at the main site to see, how we scale the path.

vinaydotblog commented 6 years ago

Thanks @photopea! This is perfect.