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

Question

我有一个使用 paper.js 设置的简单画布，当用户单击并拖动鼠标时，它会创建一条路径。然后我想沿着这条路径拉伸 SVG 以创建画笔效果。（与 Adob​​e Illustrator 的画笔上的“拉伸以适应笔划长度”属性相同）有谁知道我如何实现这一点？我想在画布中重新创建 adobe illustrator 中的画笔效果示例：

我已将画笔作为 svg 导入，但 path.importSVG(brush) 没有做任何事情。我是 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);
}

标签： canvaspaperjs

Answer 1

您可以在每次鼠标拖动时将 SVG 导入新路径（我建议每隔n 个事件添加 SVG，和/或使用低不透明度），在您的onMouseDrag函数中，但为了获得更好的性能，您可以使用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);
}