jeudi 25 décembre 2014

Text object to Path: how to remove a single path from a double path produced when you use print method in Raphael js using cambam fonts?


When I use the print method on Raphael js to convert text to path it produces a double path(an outline) of each character. I have searched on line and noticed that there are some fonts like: camBam fonts that seem to be true type fonts but they actually are tricking the font creators to see them as outline of a characters while they are putting 2 same lines on top of each other. I was wondering If there is any way to programmatically (using js) split those lines(paths) on top of each other and remove one of them?


Here is the svg code to an svg file that contains paths that are on top of each other and are the same for letter s (for example) :


Update : Sorry, here I've updated the right svg code:



<svg height="100%" version="1.1" width="100%" xmlns="http://ift.tt/nvqhV5" viewBox="0, 0, 600,600"><desc>Created with Snap</desc><defs></defs><path d="M79.5111111111111,59.87405972222222C79.89444444444443,66.13517083333333,70.94999999999999,63.32405972222222,65.45555555555555,63.96294861111111C70.94999999999999,63.451837499999996,79.89444444444443,66.00739305555555,79.5111111111111,59.87405972222222C79,52.84628194444444,66.09444444444443,56.67961527777778,65.58333333333333,49.77961527777778C65.19999999999999,44.15739305555556,73.24999999999999,46.457393055555556,78.48888888888888,45.94628194444444C73.24999999999999,46.329615277777776,65.19999999999999,44.15739305555556,65.58333333333333,49.77961527777778C66.09444444444443,56.67961527777778,79,52.84628194444444,79.5111111111111,59.87405972222222C79.5111111111111,59.87405972222222,79.5111111111111,59.87405972222222,79.5111111111111,59.87405972222222" fill="#ff0000" stroke="#0000ff"></path><rect x="0" y="30" width="330" height="51" fill="none" stroke="#000000"></rect></svg>


Update2: And here is paths produced from both fonts


And if you manipulated it manually in inkscape or illustrator you can see that the letter s has 2 lines on top of each other that makes up that letter:


How can I remove one of the 2 lines(paths) using js? And if I have a whole text that has been converted to paths similar to the s character, how can I apply that removal function to all the text to make it single paths texts?


Update3:


I have the following code that tries to split the s path in half:



var sTotalpx = textpaths.getTotalLength();
var sSinglepath = Snap.path.getSubpath(textpaths, (sTotalpx/2), sTotalpx);
console.log(sSinglepath.toString());


And the path result is half of s but doubled line(path). Any workaround ideas please?!





Aucun commentaire:

Enregistrer un commentaire