Question

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

我希望每个圈子都有文本（用于鼠标悬停事件）和id（用于点击事件）。问题是事件是动态的，并且＆＃34; i＆＃34;永远是最后一个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
                        });
                    }
                });

Answer 1

我修复了它 - 我创建了一个单独的函数“drawOneCircle”来获取变量并使用它们。 “drawOneCircle”现在包含原始“for”循环的内容。

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

Answer 2

我知道这不是你要求的但是检查这个库 - http://d3js.org/ 它非常适合创建数据驱动的文档，并使您的工作更轻松。而且我认为使用svg会比使用canvas更好。

Answer 3

@TamarG：要理解为什么你的“我”永远是最后一个i（data.length），我强烈推荐一本名为“Async JavaScript”的书，由Trevor Burnham撰写。我用很多语言编程，在我读这本书之前，我以为我认识JavaScript。 JavaScript事件管理是非直观的 - 事件的管理方式与我使用的任何其他语言不同。在我读完这本书之前，我没有得到它。

动态文本和与jCanvas的链接

3 个答案: