javascript - 单击画布中的给定元素

Question

是否有任何技巧可以确定用户是否单击画布中呈现的给定元素？例如，我正在显示具有透明背景的 .png 文件中的菱形，并且我想知道用户是在该图形的内部还是外部单击（例如鼠标元素碰撞）。

Answer 1

画布中没有单个元素的概念 - 它只是您在其上绘制像素的区域。另一方面，SVG 由您可以将事件绑定到的元素组成。但是，您可以采取一些方法将点击事件添加到画布：

1. 在画布上放置一个覆盖您希望可点击的区域的 html 元素。A 用于矩形区域或图像映射用于更不规则的东西。

2. 为您希望可点击的每个元素使用单独的画布。

3. CAKE - 我自己没有使用过这个，但它的描述是“SVG sans the XML”。这可能满足您的需求。演示在这里http://glimr.rubyforge.org/cake/canvas.html#EditableCurve

Answer 2

一种想法是将图像绘制到临时画布上，然后使用 getImageDate() 接收您感兴趣的像素的数据，并检查其 alpha 值是否为 0（= 透明）。

下面是一个解决方案的草图。假设...

1. x 和 y 是鼠标点击事件的坐标
2. 您正在循环游戏对象，当前对象存储在变量游戏对象中
3. 游戏对象已使用图像、x 和 y 坐标初始化

然后，以下代码将检查单击是否在透明区域上：

var tempCanvas = document.createElement('canvas');
if (tempCanvas.getContext) {
  tempContext = tempCanvas.getContext('2d');
}
tempContext.drawImage(gameObject.img, 0, 0);
var imgd = tempContext.getImageData(x - gameObject.x, y - gameObject.y, 1, 1);
var pix = imgd.data;
if (pix[3] == 0) {
  // user clicked on transparent part of the image!
}

注意：这可能效率很低。我相信有人可以提出更好的解决方案。

Answer 3

我已经使用 kintech.js 解决了这个问题，可以找到教程和示例：http: //www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/