Convert text to path

3,359 views
Skip to first unread message

kostasvgt

unread,
Mar 23, 2016, 6:47:01 AM3/23/16
to Paper.js
Hi, I am looking for a way to convert a simple text to paths so as user can edit each letter as a path and move segments / intersect them etc.
Is there a way to do this or do this by using a third part converter ?

Thanks in advance.

Jürg Lehni

unread,
Mar 23, 2016, 10:14:50 AM3/23/16
to pap...@googlegroups.com
You can use opentype.js for this purpose:


There is no example code for use with paper.js yet, but we should create one!

--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

kostasvgt

unread,
Mar 23, 2016, 10:46:56 AM3/23/16
to Paper.js
Actually, yes I would like to just convert text into path that would be loaded from parse js in order to move each segment aw they need, just like illustrator does.
What I have just found is http://www.pluminjs.com/ that combines paperjs and opentypejs but I don't understand how it can pass to me the path that paperjs can handle.

kostasvgt

unread,
Mar 23, 2016, 11:45:25 AM3/23/16
to Paper.js
I think I have found how to get the paths using just opentype.js

var path = font.getPath('Hello, World!', 0, 150, 72);
// If you just want to draw the text you can also use font.draw(ctx, text, x, y, fontSize).
//path.draw(ctx);
var svg = path.toSVG(2);
console.log(svg);

The 'svg' contains the path object which can be passed into paperjs.

Looks promising.

kostasvgt

unread,
Mar 24, 2016, 9:11:39 PM3/24/16
to Paper.js
Hi again, I found it dificcult to pass the path from opentype to paperjs in order to further create the vectors. Could you please show me a way to do this?
Thanks.


Τη Τετάρτη, 23 Μαρτίου 2016 - 12:47:01 μ.μ. UTC+2, ο χρήστης kostasvgt έγραψε:

kostasvgt

unread,
Mar 25, 2016, 4:51:10 AM3/25/16
to Paper.js
Here is the html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Paperjs - OpenTypejs</title>
</head>
<body>
    <canvas id="canvas" width="800" height="500" style="border:1px solid #ccc"></canvas>
   
    <script src="~/Scripts/paper-full.js"></script>
    <script src="~/Scripts/opentype.js"></script>

    <script src="~/Scripts/app/presenter.js"></script>
    <script type="text/paperscript" src="~/Scripts/app/mypaperscript.js" canvas="canvas"></script>

    <input type="button" onclick="globals.someFunction();" value="Draw"/>
</body>
</html>

Here the presenter.js:
var S = "";
window.globals = {
    someInput: "",
    someOutput: "",
    someFunction: function () {
        opentype.load('/fonts/Aerosol.ttf', function (err, font) {
            if (err) {
                alert('Font could not be loaded: ' + err);
            } else {
                var ctx = document.getElementById('canvas').getContext('2d');

                // Construct a Path object containing the letter shapes of the given text.
                // The other parameters are x, y and fontSize.
                // Note that y is the position of the baseline.

                var path = font.getPath(globals.someInput, 0, 50, 72);
                // If you just want to draw the text you can also use font.draw(ctx, text, x, y, fontSize).

                globals.someOutput = path.toSVG(2);
                console.log(globals.someOutput);
                //path.draw(ctx);
                // console.log(svg);
            }
        });
    }
};

And finally here is the mypaperscript.js:

globals.someInput = 'Hellow world';
globals.someFunction();
alert(globals.someOutput);

The final alert shows no content on the screen.

What I am doing wrong?


Τη Τετάρτη, 23 Μαρτίου 2016 - 12:47:01 μ.μ. UTC+2, ο χρήστης kostasvgt έγραψε:
Reply all
Reply to author
Forward
0 new messages