Paper.js использует несколько команд moveTo на пути

Я пытаюсь сделать:

синий X

Используя этот код:

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

Но вместо этого я получаю:

синий сломанный X

По-видимому, второй moveTo() игнорируется. Как я мог заставить его работать? Я ничего не нашел в документации.


javascript canvas paperjs
person gregn3    schedule 08.09.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Решение в вашем случае состоит в том, чтобы использовать CompoundPath вместо Path, поскольку вы собираетесь работать с группой путей.
Об этом есть подсказка в path.moveTo документация:

На обычном пустом пути точка просто добавляется в качестве первого сегмента пути. При вызове CompoundPath новый путь создается как дочерний, а точка добавляется в качестве его первого сегмента.

Here is a 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]));
person sasensi    schedule 09.09.2019
comment
Спасибо, это работает, и это лучшее решение в этом случае. Они явно не упоминают, что пути не могут иметь пробелов, по-видимому, но составные пути могут. - person gregn3; 09.09.2019

arrow_upward
1
arrow_downward

В итоге я сделал:

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), но это тоже не работает.

person gregn3    schedule 08.09.2019