Question

http://fiddle.jshell.net/f6rLds4g/6/

是否可以给出我制作id的矩形？

我想知道的是，当我点击一个矩形时，它会在下一个画布中显示数据

所以没有点击矩形0它必须显示数据（来自数据库的json或xml），但在我可以做之前，它应该有id（我认为）

  var canvas = $('#NodeList').get(0);
var ctx = canvas.getContext('2d');
canvas.height = 0;

var a = 20;
var x = 150;
var y = 100;


var rects = [
    [a, 20, x, y],
    [a, 220, x, y],
    [a, 420, x, y],
    [a, 620, x, y],
    [a, 820, x, y],
    [a, 1020, x, y],
    [a, 1220, x, y],
    [a, 1420, x, y],
    [a, 1620, x, y],
    [a, 1820, x, y]



];
for (var i = 0; i < rects.length; i++) {
    canvas.height = canvas.height + 200;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //rectangles opnieuw tekenen
    for (var j = 0; j < i; j++) {
        ctx.fillRect(rects[j][0],
        rects[j][1],
        rects[j][2],
        rects[j][3]);
    }
    ctx.fillRect(rects[i][0],
    rects[i][1],
    rects[i][2],
    rects[i][3]);

}

$('#NodeList').click(function (e) {
    var x = e.offsetX,
        y = e.offsetY;



        for (var i = 0; i < rects.length; i++) {
    if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) {
        var canvas = document.getElementById("NodeDisplay");
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillText('Rectangle ' + i + ' clicked', 110, 10);
    }
}



});

对于整个html页面，点击开头的链接

Answer 1

您只能将ID指定给元素由于您的矩形不是元素，而是画布的内容，因此它不能具有id。

但是，有三种方法可以解决这个问题：

为您的画布分配一个click事件监听器，并使用JavaScript检查点击的坐标是否在矩形内。
使用HTML元素而不是在画布上绘制矩形。具有固定宽度，高度display: block和position: absolute的元素将显示完全相同，但作为HTML元素，它可以具有ID。
在画布上绘制您想要的任何内容，并在其上放置一个带有可点击区域的map标记。通过这种方式，您可以精确控制每个像素的颜色值和可点击性，但代码可能会变得很长，而且对于矩形来说可能有点过分。

Answer 2

您正在将您的作品保存在数组中：var rects=[]。

您将每个rect表示为包含x，y，width，height的数组。

因此，如果您想为每个rect提供一个id，只需在每个rect的数组中添加一个id：

var rects = [
    [a, 20, x, y, 'rect0'],
    [a, 220, x, y, 'rect1'],
    [a, 420, x, y, 'rect2'],
    [a, 620, x, y, 'rect3'],
    [a, 820, x, y, 'rect4'],
    [a, 1020, x, y, 'rect5'],
    [a, 1220, x, y, 'rect6'],
    [a, 1420, x, y, 'rect7'],
    [a, 1620, x, y, 'rect8'],
    [a, 1820, x, y, 'rect9']
];

然后，您可以在需要时访问rect数组的id元素：

// test if this is rect with id=='rect3'
var n=3;
if(rects[n][4]=='rect3'){ alert('I have the id==rect3'); }

给Rectangle一个id

2 个答案: