Paper.js 在一个路径上使用多个 moveTo 命令

Question

我正在尝试做：

使用此代码：

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]))

但我得到的是：

显然第二个 moveTo() 被忽略了。我怎样才能让它发挥作用？我在 documentation.

中找不到任何内容

Answer 1

我最后做了：

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

这不优雅，但有效。我试过 p1.unite (p2) 但还是不行。

Answer 2

您的解决方案是使用 CompoundPath 而不是 Path，因为您打算在一组路径上工作。
在 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.

这是根据您的初始代码改编的sketch，演示了解决方案。

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]));

Paper.js 在一个路径上使用多个 moveTo 命令

Paper.js use multiple moveTo commands on a path

javascript

canvas

paperjs