具有数千个路径/矩形的RaphaelJS的性能 [英] Performance of RaphaelJS with thousands of paths/rectangles
本文介绍了具有数千个路径/矩形的RaphaelJS的性能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我真的只关心Webkit，但总的来说，在构建数千个矩形时，Raphael JS是否有望表现良好?
I really only care about Webkit, but in general, is Raphael JS expected to perform well when building thousands of rectangles?
此外，我将需要能够处理这些矩形(类型)中的每个事件.
Additionally, I would need to be able to handle events on each of these rectangles (yipes).
我有一个可以工作的C ++解决方案，但我宁愿使用RaphaelJS.
I've got a C++ solution which works but I'd rather use RaphaelJS.
谢谢:)
推荐答案
我对RaphaelJS一无所知，但是我可以通过以下代码为您提供性能提示:
I don't know nothing about RaphaelJS but I can give you a performance hint with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<script>
window.onload = function () {
var rectangles = 5000;
for (var i = 0; i < rectangles; i ++) {
var height = 50;
var width = 50;
var canvas = document.createElement ("canvas");
canvas.height = height;
canvas.style.margin = "15px";
canvas.width = width;
canvas.addEventListener ("click", function () {
alert ("You like to MOVE !");
}, false);
var ctx = canvas.getContext ("2d");
ctx.fillStyle = "silver";
ctx.fillRect (0, 0, width, height)
document.body.appendChild (canvas);
}
canvas = document.body.getElementsByTagName ("canvas");
window.setInterval (function () {
for (var i = 0; i < canvas.length; i ++) {
canvas[i].style.margin = (Math.floor (Math.random () * 16)) + "px";
}
}, 100);
}
</script>
</head>
<body></body>
</html>
5000个带有"onclick"事件的矩形移动:
5000 rectangles moving around with "onclick" event:
这篇关于具有数千个路径/矩形的RaphaelJS的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
