在paperjs中喷射工具性能

我想在paperjs中编写一个类似喷雾的工具，因为绘图必须是svg可导出的。在paperjs中喷射工具性能

该代码正在运行，但性能很快就会变差。有没有办法在paperjs或其他库中改进性能，模仿svg可导出的喷雾工具？

<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范围，但问题仍然存在。

update2：正确使用工具。

来源

2016-12-18 lolol

最好使用外循环创建（因为坡度不改变），使所有的路径单一梯度指的是单梯度。 –

对SVG我喜欢http://snapsvg.io/
使用paper.js您可以禁用asString并检查性能出口SVG，原因可能是字符串添加到DOM非常大的产生本滞后

来源

2016-12-28 00:50:14

由于所有项目已相同的形状，您应该在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>

来源

2017-02-07 07:34:31 Waruyama

在paperjs中喷射工具性能

回答

相关问题