Question

With the raphael.js library, paths are described using the SVG path syntax, (e.g. M98.36,214.208l2.186-1.093V210.2l-3.378,0.117l1.174,4.137L98.36,214.208z, which provides a very compact way to create a shape (especially if your shape is drawn with an external application such as Illustrator).

I'm interested in using the paper.js library (not SVG-based), but a first look at the documentation seems to show that paths are built step by step through object methods. This is a very different approach ("path building" vs "path description", one could say), not very suitable to my needs.

So: is there a way to use SVG Paths in paper.js? Or a similar "path description" solution?

Reference:

Was it helpful?

Solution

You can use SVG path syntax as described in the Paper.js reference for pathData

var pathData = 'M98.36,214.208l2.186-1.093V210.2l-3.378,0.117l1.174,4.137L98.36,214.208z';
var path = new Path(pathData);

path.strokeColor = 'black';

// Scale the copy by 1000%, so we see something
path.scale(10);

And here as an example as a Paper.js Sketch

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top