Блог

С помощью 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 /

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

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