3

私は本当にWebkitだけを気にしていますが、一般的に、何千もの長方形を構築するときにRaphael JSはうまく機能すると予想されますか?

さらに、これらの各長方形 (yipes) でイベントを処理できる必要があります。

私は動作する C++ ソリューションを持っていますが、むしろ RaphaelJS を使用したいと思います。

ありがとう ：）

4

2 に答える 2

4

RaphaelJS については何も知りませんが、次のコードでパフォーマンスのヒントを提供できます。

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

「onclick」イベントで動き回る5000個の長方形： ここに画像の説明を入力

于 2011-01-29T11:27:29.303 に答える
4

Raphael JS のパフォーマンスをテストしたい場合は、10,000 ポイントをプロットする簡単な例を投稿しました。レンダリング時間とクリア時間をテストします。

http://jsfiddle.net/jaRhY/1049/

于 2012-05-18T20:48:31.620 に答える