http://fiddle.jshell.net/f6rLds4g/6/
是否可以给我制作的矩形一个id?
我想要的是,当我单击一个矩形时,它会在下一个 Canvas 中显示数据
因此,点击的不是矩形 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 页面,请点击开头的链接
最佳答案
您只能将 id 分配给元素。
由于您的矩形不是元素,而是 Canvas 的内容,因此它不能有 id。
但是,我想到了三种解决此问题的方法:
为 Canvas 分配一个
click
事件监听器,并使用 JavaScript 检查单击的坐标是否在矩形内。使用 HTML 元素而不是在 Canvas 上绘制矩形。具有固定宽度、高度、
display: block
和position:absolute
的元素将显示完全相同,但作为 HTML 元素,它可以有一个 id。在 Canvas 上画出任何你想要的东西,并放置一个
map
标记上带有可点击区域。通过这种方式,您可以精确控制每个像素的颜色值和可点击性,但代码可能会很长,而且对于矩形来说可能有点过大。
关于javascript - 给矩形一个 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30208747/