CODEWITHSUNDEEP
javascriptcanvaspaperjs
gregn3
gregn3

Reputation: 1774

Paper.js use multiple moveTo commands on a path

I'm trying to do:

blue X

Using this code:

var p = new Path();
p.strokeColor = 'blue'
p.strokeWidth = 4

var size = 10
var o = new Point(100, 100)

p.moveTo (o.add ([-size, -size]))
p.lineTo (o.add ([size, size]))
p.moveTo (o.add ([size, -size]))
p.lineTo (o.add ([-size, size]))

But instead I get:

blue broken X

Apparently the second moveTo() is ignored. How could I make it work? I couldn't find anything in the documentation.

Upvotes: 3

Views: 404

Answers (2)

sasensi
sasensi

Reputation: 4650

The solution in your case is to use CompoundPath instead of Path as you are intending to work on a group of paths.
There is a clue about that in the path.moveTo documentation:

On a normal empty Path, the point is simply added as the path’s first segment. If called on a CompoundPath, a new Path is created as a child and the point is added as its first segment.

Here is a sketch adapted from your initial code, demonstrating the solution.

var p = new CompoundPath();
p.strokeColor = 'blue';
p.strokeWidth = 4;

var size = 10;
var o = new Point(100, 100);

p.moveTo(o.add([-size, -size]));
p.lineTo(o.add([size, size]));
p.moveTo(o.add([size, -size]));
p.lineTo(o.add([-size, size]));

Upvotes: 2

gregn3
gregn3

Reputation: 1774

I ended up doing:

var s = 10 // size

var o = new Point(100, 100)

var p1 = new Path.Line (o.add ([-s, -s]), o.add ([s, s]))
var p2 = new Path.Line (o.add ([s, -s]), o.add ([-s, s]))
p2.strokeColor = p1.strokeColor = 'blue'
p2.strokeWidth = p1.strokeWidth = 4

Which is inelegant, but works. I have tried p1.unite (p2) but that also doesn't work.

Upvotes: 1

Related Questions