在 paper.js 中创建 stamp/symbol 笔刷

Question

我正在尝试从导入的 .svg 创建一个符号，然后在每次 onmousemove 时将其克隆到 canvas。下面的代码克隆符号一次 - 但随后会引发错误。

我是 javascript 和 paper.js 的新手，非常感谢任何帮助！

function onMouseMove(event) {
  
  var symbol =  new Symbol(project.importSVG("../img/brush.svg"));
      
  var clone = symbol.clone({
        center: event.middlePoint
      });
}

Answer 1

您绝对应该在事件处理函数之外创建符号，否则每次鼠标移动事件都会读取 svg，并且每次都会创建一个新符号。而且不需要克隆，只需放置符号即可。以下代码片段有效（使用示例 svg），但它不会从文件中读取 svg。

var symbol =  new Symbol(project.importSVG('<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/></svg>'));

function onMouseMove(event) {      
  symbol.place(event.middlePoint);  
}

Here is the Sketch for testing

在 paper.js 中创建 stamp/symbol 笔刷

Creating a stamp/symbol brush in paper.js

canvas

paperjs