Путь вычитания Paperjs к форме не работает должным образом

С Paperjs я пытаюсь вычесть путь из круга, но это не работает должным образом. Вот мой код:

// Create circle
var c1 = new Path.Circle(new Point(100, 70), 50);
c1.fillColor = 'red';

// Create path
var eraser = new paper.Path({strokeColor: 'black', strokeWidth: 20, strokeCap: 'round'});
eraser.add(new paper.Point(20, 20)); 
eraser.add(new paper.Point(100, 80)); 
eraser.add(new paper.Point(150, 150)); 
eraser.fillColor = 'white';
eraser.opacity = 0.6;

// Subtract
result = c1.subtract(eraser);
result.selected = true;
result.opacity = 0.8;
result.fillColor = 'pink';

Кажется, что путь виден как многоугольник, а не линии при вычитании:

введите здесь описание изображения

Вот jsFiddle: https://jsfiddle.net/Imabot/785ergpy/35/


subtraction paperjs
person Fifi    schedule 26.11.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Да, это потому, что Paper.js выполняет логическую операцию с контурами, заполняющими геометрию, игнорируя обводку.
Это становится более очевидным, если вы удалите обводку из своего примера (см. это sketch).

Что вам нужно сделать, если вы хотите вычесть обводку, так это сначала превратить ее в путь.
К сожалению, в Paper.js пока нет этой функции, даже если она запланирована на долгое время и существует как экспериментальная версия (см. эту ошибку).
Итак, у вас есть либо использовать эту экспериментальную функцию, либо использовать программное обеспечение для векторного рисования, такое как Adobe Illustrator, и экспортировать путь обводки, например, как SVG, прежде чем использовать его с Paper.js.

person sasensi    schedule 26.11.2020