Question

我正在尝试在paperjs中编写类似喷涂的工具，因为绘图必须是svg可导出的。

代码正在运行，但性能很快就会变坏。有没有办法模仿svg可出口的喷雾工具，在paperjs或其他图书馆中提高性能？

<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：修正了梯度变量范围，由于建议，但问题仍然存在。

update2：正确使用工具。

Answer 1

对于svg我更喜欢http://snapsvg.io/
用于导出svg使用paper.js你可以禁用asString并检查性能，原因可能是添加到DOM的字符串非常大而产生这种滞后

Answer 2

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

Here is a Sketch to try

以下是使用符号的代码：

<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>

像paperjs一样喷涂工具性能

2 个答案: