如何使用带有paper.js的SVG创建画笔？

Question

我有一个用paper.js设置的简单画布，当用户单击并拖动鼠标时会创建一个路径。然后，我想沿此路径拉伸SVG以创建笔刷效果。 （以与Adobe Illustrator画笔上的“ stretch to fit stroke length”属性相同的方式）有人知道我将如何实现这一目标吗？我要在画布中重新创建的Adobe illustrator中的画笔效果示例：

我已将画笔作为svg导入，但path.importSVG（brush）却无济于事。我是paper.js的新手，不确定从哪里开始。

Sketch of where I am so far。

// 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);
}

Answer 1

您可以在每次鼠标拖动时将SVG导入新路径（我建议每 n 个事件添加SVG，并且/或者使用低不透明度），将其导入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);
}