1

我有一个画布，我使用 jCanva (http://calebevans.me/projects/jcanvas/docs.php?p=layers)s 来创建带有事件的圈子。

我希望每个圆圈都有文本（用于鼠标悬停事件）和 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

@TamarG：要理解为什么你的“i”总是最后一个 i（data.length），我强烈推荐Trevor Burnham的一本名为“ Async JavaScript ”的书。我用过很多语言编程，在读这本书之前我以为我知道 JavaScript。JavaScript 事件管理是不直观的——事件的管理方式与我使用过的任何其他语言不同。直到我读了这本书，我才明白。

于 2012-09-24T16:15:31.310 回答
0

我知道这并不完全符合您的要求，但请查看这个库 - http://d3js.org/ 它非常适合创建数据驱动的文档，并且会让您的工作更加轻松。我认为使用 svg 会给你比使用画布更好的性能。

于 2012-06-27T18:19:25.167 回答