1

キャンバスがあり、jCanva（http://calebevans.me/projects/jcanvas/docs.php?p=layers）を使用してイベントのあるサークルを作成しています。

すべての円にテキスト（マウスオーバーイベント用）とID（クリックイベント用）が必要です。問題は、イベントが動的であり、「i」が常に最後のi（data.length）であるため、すべての円が同じ値を取得することです...どうすれば解決できますか？

 for (i = 0; i < data.length; i++) {
                var id = data[i][0];
                var text = data[i][2];

                $("#mapCanvas").drawArc({
                    layer: true,
                    fillStyle: "yellow",
                    strokeStyle: "#000",
                    strokeWidth: 1,
                    x: Math.random() * c.clientWidth,
                    y: Math.random() * c.clientHeight,
                    radius: 6,
                    click: function (layer) {
                        window.open("Edit/" + id);
                    },
                    mouseover: function (layer) {
                       $("canvas")
                       .addLayer({
                            method: "drawRect",
                            name: "BackgroundLabel",
                            group: "ItemLabel",
                            fillStyle: "#FFFFD4",
                            x: layer.x + 10,
                            y: layer.y - 15,
                            width: 100,
                            height: 20
                       })
                       .drawLayers();

                       $("#mapCanvas").drawText({
                        layer: true,
                        fillStyle: "white",
                        strokeWidth: 0,
                        x: layer.x + 10,
                        y: layer.y - 10,
                        font: "14pt Arial, Verdana, sans-serif",
                        text: text
                        });
                    }
                });
4

3 に答える 3

2

私はそれを修正しました-変数を取得して使用する別の関数「drawOneCircle」を作成しました。「drawOneCircle」には、元の「for」ループのコンテンツが含まれるようになりました。

           for (i = 0; i < data.length; i++) {
                var id = data[i][0];
                var text = data[i][2];
                drawOneCircle(c, id, text);
            }
于 2012-06-26T10:17:52.617 に答える
0

私はそれがあなたが求めていたものではないことを知っていますが、このライブラリをチェックしてください -http://d3js.org/ データ駆動型ドキュメントを作成するのに最適で、作業がはるかに簡単になります。svgを使用すると、canvasを使用するよりもパフォーマンスが向上すると思います。

于 2012-06-27T18:19:25.167 に答える
0

@TamarG：あなたの「i」が常に最後のi（data.length）である理由を理解するために、TrevorBurnhamによる「AsyncJavaScript」という本を強くお勧めします。私はたくさんの言語でプログラミングしてきましたが、この本を読むまではJavaScriptを知っていると思っていました。JavaScriptのイベント管理は直感的ではありません。イベントは、私が使用した他の言語とは異なり管理されます。私はこの本を読むまでそれを手に入れませんでした。

于 2012-09-24T16:15:31.310 に答える