Question

我一直试图让这个相当简单的程序运行起来并遇到性能问题。

我试图在画布上制作数以千计的小彩点。在我能够在画布上获得我想要的数量之前创建这么多新路径会减慢我的计算机速度，然后当我尝试将画布导出为SVG时崩溃。我研究了使用符号，但我需要每个点的颜色不同。

目标是使每种颜色和位置完全随机且独特，并使点完全覆盖画布。画布最终需要打印55英寸×75英寸，所以我希望这些圆圈的分辨率足够高，以至于在打印时它们看起来不像素。这可能意味着能够导出到足够高的光栅分辨率或导出到矢量。

我使用paper.js是因为我认为最好将这些点渲染为矢量图形，以便我可以在需要时以高质量打印它们，但是有更好的方法可以做到这一点？

感谢。下面的html就是一切（除了paper.js库）。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="css/style.css">
	<!-- Load the Paper.js library -->
	<script type="text/javascript" src="js/paper.js"></script>
	<!-- Define inlined PaperScript associate it with myCanvas -->
	<style type="text/css">
	html,
	body {
		margin: 0;
		overflow: hidden;
		height: 100%;
	}
	/* Scale canvas with resize attribute to full size */
	canvas[resize] {
		width: 550px;
		height: 750px;
		background-color: #39ff14;
	}
</style>
<script type="text/paperscript" canvas="myCanvas">
paper.install(window);
tool.fixedDistance = .1;
var layer = project.activeLayer;
function onMouseMove(event) {
	var radius = (1 * Math.random()) + .5;;
	var path = new Path.Circle({
		center: Point.random() * view.size,
		radius: radius,
		fillColor: "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);}),
	})
}
// START DOWNLOAD BUTTON &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
function downloadDataUri(options) {
	if (!options.url)
	options.url = "http://download-data-uri.appspot.com/";
	$('<form method="post" action="' + options.url
	+ '" style="display:none"><input type="hidden" name="filename" value="'
	+ options.filename + '"/><input type="hidden" name="data" value="'
	+ options.data + '"/></form>').appendTo('body').submit().remove();
}
$('#export-button').click(function() {
	var svg = project.exportSVG({ asString: true });
	downloadDataUri({
		data: 'data:image/svg+xml;base64,' + btoa(svg),
		filename: 'export.svg'
	});
});
// END DOWNLOAD BUTTON &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
</script>
</head>
<body>
	<canvas id="myCanvas" resize></canvas>
	<input type="button" value="Download as SVG" id="export-button">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<!-- <script src="js/scripts.js"></script> -->
</body>
</html>

＆＃13;

paper.js vector slow performance

0 个答案: