单击画布中的给定元素答案

【问题标题】：Click on given element in canvas单击画布中的给定元素
【发布时间】：2010-07-09 15:02:59
【问题描述】：

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

【问题讨论】：

标签： javascript canvas click collision-detection shape

【解决方案1】：

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

在画布上放置一个覆盖您希望可点击区域的 html 元素。 A 表示矩形区域或图像地图用于更不规则的区域。
为您希望可点击的每个元素使用单独的画布。
CAKE - 我自己没用过，但它的描述是“SVG sans the XML”。这可能满足您的需求。这里有演示http://glimr.rubyforge.org/cake/canvas.html#EditableCurve

【讨论】：

您也可以只检查鼠标单击的坐标与对象的坐标。更密集一点，但不是很困难。

【解决方案2】：

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

以下是解决方案的草图。假设...

x和y是鼠标点击事件的坐标
您正在循环游戏对象，当前对象存储在变量游戏对象中
游戏对象已使用图像、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!
}

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

【讨论】：

【解决方案3】：

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

【讨论】：