Как создать кисть, используя SVG с paper.js? - PullRequest
Новая
       54

Как создать кисть, используя SVG с paper.js?

0 голосов
/ 11 сентября 2018

У меня есть простой холст, настроенный с paper.js, который создает путь, когда пользователь щелкает и перетаскивает мышь. Я хотел бы затем растянуть SVG вдоль этого пути, чтобы создать эффект кисти. (Точно так же, как в Adobe Illustrator свойство « растягивается, чтобы соответствовать длине обводки » на их кистях) Кто-нибудь знает, как мне этого добиться? Пример эффекта кисти в Adobe Illustrator, который я хочу воссоздать на холсте:

enter image description here

Я импортировал кисть как SVG, но path.importSVG (кисть) ничего не делает. Я новичок в paper.js и не знаю, с чего начать.

Эскиз того, где я до сих пор . 

// Brush
var brush = '<svg[...]</svg>'
// Symbol
var symbol =  new Symbol(project.importSVG(brush, {
  expandShapes: true
}));

// The minimum distance the mouse has to drag before firing the next onMouseDrag event
tool.minDistance = 5;

var path;

/* Click */
function onMouseDown(event) {
  // Create a new path and select it
  path = new Path();
  path.strokeColor = '#ffffff';
  path.selected = true;

  // Add a segment to the path where you clicked
  path.add(event.point);
}

/* Drag */
function onMouseDrag(event) {
  // Every drag event, add a segment to the path at the position of the mouse
  path.add(event.point);
}

/* Up */
function onMouseUp(event) {
  var placed = symbol.place(event.point);
  placed.scale(0.5);
}

1 Ответ

0 голосов
/ 12 сентября 2018

Вы можете просто импортировать SVG по новому пути при каждом перетаскивании мыши (я бы посоветовал добавлять SVG каждые n событий и / или использовать низкую непрозрачность) в вашей функции onMouseDrag, нодля лучшей производительности вы можете использовать [Symbols](http://paperjs.org/tutorials/project-items/working-with-symbols/). 

var path = new Path();
// [...]
path.importSVG(brush);

// Create a symbol from the path:
var symbol = new Symbol(path);
const N_EVENTS_TO_SKIP = 10;
var n = 0;
/* Drag */
function onMouseDrag(event) {
    // skip some events
    n++;
    if(n < N_EVENTS_TO_SKIP) {
       return;
    }
    n = 0;

    // place the symbol
    var placed = symbol.place(event.point);
}
...