像工具性能一样在Paperjs中进行喷涂

Question

我正在尝试在PaperJ中编码像工具一样的喷雾工具，因为图纸必须是可将SVG导出的。

代码正在起作用，但性能很快就会变得不良。是否有一种方法可以模仿SVG的可导出喷雾，例如工具，在PaperJ或其他库中的性能提高？

？

<script type="text/paperscript" canvas="canvas">
var path;
var gradient = {
    stops: [
        ['rgba(0,0,0,1)', 0],
        ['rgba(0,0,0,0.5)', 0.5],
        ['rgba(0,0,0,0)', 1]
    ],
    radial: true
};
tool.minDistance = 5;
tool.maxDistance = 5;
function onMouseDown(event) {
}
function onMouseDrag(event) {
    path = new Path.Circle({
        center: event.point,
        radius: 10
    });
    path.fillColor = {
        gradient: gradient,
        origin: path.position,
        destination: path.bounds.rightCenter
    };
}
function onMouseUp(event) {
}
document.getElementById('button').addEventListener('click', function() {
    var svg = project.exportSVG({ asString: true });
    console.log('data:image/svg+xml;base64,' + btoa(svg));
});
</script>

Update1：由于建议而固定梯度VAR范围，但问题仍然存在。

更新2：正确使用工具。

Answer 1

对于SVG，我更喜欢http://snapsvg.io/
对于使用Paper的导出SVG。

由于所有项目的形状相同，因此您应该在Paper.js中使用符号。这大大降低了开销，因为内部的路径将用于所有显示的项目。

这是尝试尝试

的草图

这是您使用符号的代码：

<script type="text/paperscript" canvas="canvas">
var gradient = {
    stops: [
        ['rgba(0,0,0,1)', 0],
        ['rgba(0,0,0,0.5)', 0.5],
        ['rgba(0,0,0,0)', 1]
    ],
    radial: true
};
tool.minDistance = 5;
tool.maxDistance = 5;
var blurredCircle = new Path.Circle({
    center: [0, 0],
    radius: 10,
    insert: false
});
blurredCircle.fillColor = {
    gradient: gradient,
    origin: blurredCircle.position,
    destination: blurredCircle.bounds.rightCenter
};
var blurredCircleDef = new SymbolDefinition(blurredCircle);

function onMouseDown(event) {
}
function onMouseDrag(event) {
   new SymbolItem(blurredCircleDef, event.point);
}
function onMouseUp(event) {
}
document.getElementById('button').addEventListener('click', function() {
    var svg = project.exportSVG({ asString: true });
    console.log('data:image/svg+xml;base64,' + btoa(svg));
});
</script>