Javascript 忽略图像的透明角点

假设您有一个用于构建等轴测地图的平铺图像。每个瓷砖都是可选的。问题在于，平铺图像周围的透明角与后面的平铺重叠。我希望图像的透明区域被忽略，以便可以更准确地选择其他瓷砖

这里是这样一个瓷砖的例子。轮廓已变为红色，因此很容易看到透明区域

我们使用的浏览器支持

指针事件

。我想知道是否有一种方法可以将其合并到角落区域，或者我是否需要找到一种方法让程序自己识别透明像素

这些平铺图像不是使用画布构建的。CSS就是这样：

div.content 
{
   position: absolute;
   top: 105px;
   width: 10px;
   height: 50%;
}

div.content div.tile 
{
   width:96px;
   position: absolute;
   height:102px;
   line-height:96px;
   background-image:url('images/tiles.png');
}

div.content div.tile:hover 
{ 
   opacity:0.8; 
}

---

我会尝试做一些类似于中概述的事情，以便获得鼠标下像素的颜色。一旦你有了它，你可以说当点击时，如果像素的颜色与背景的颜色相同（白色看起来像），它就不会选择平铺了。

你可以：

使用HTML图像映射：。这是一个简单的选择。但缺点是，您需要自己创建所有分幅的地图

我知道有些人创建了一个等轴测游戏引擎，它使用画布对象不是用来画东西，而是用来计算鼠标是否点击了一个透明的平铺来将onclick事件委托给下一个平铺。可以找到项目的说明，包括鼠标事件委派

---

据我所知，

指针事件

仅适用于SVG元素

我会怎么做

为每个平铺创建一个画布元素，具有平铺的大小

进入每一张画布

从每个画布上下文获取imageData并将其存储在某个位置

mousedown事件提供坐标，从该坐标平铺imageData并检查其alpha值

编辑： 重新考虑一下，事件可能会变得复杂，因为前景中的瓷砖可能会覆盖它们后面的瓷砖。
您可能必须让mousedown事件冒泡到container元素，并手动选择单击“命中”的分幅，然后对所有这些分幅执行“每像素检查”。

我建议：

创建一个瓷砖大小的画布

在鼠标事件（悬停、单击等）上，绘制导致该事件进入该画布的平铺

获取alpha值并绑定计数器事件以重置画布

3.1。如果alpha为零，则将事件委托给下一个几何平铺（右上、左上、右下或左下），并在那里执行操作

3.2。如果alpha大于零，则对导致事件的磁贴执行操作

---

这只会在必要时绘制到画布，从而节省一些计算时间

您必须注意，绘制到HTML5canvas的速度（仍然）非常慢，因此使用多个画布并在其中呈现大量内容（如等距RPG游戏）可能会花费大量计算时间。@Qqwy，他在加载游戏或其他东西时只画了一次瓷砖。只是为了访问图像数据。如果所有的瓷砖大小相同，他也可以只使用一个画布元素，为每个瓷砖清除它。而且。。。画布并没有那么慢，我在平庸的笔记本电脑上每帧都有上千个像素操作（粒子系统）的fps（60+）绘制全高清画布。投票支持提供指向各个步骤的链接。我将不得不等到明天选择一个最终答案，因为届时我将有更多的时间思考每个答案。