【问题标题】：Ignoring the transparent corners of the image忽略图像的透明角
【发布时间】：2011-11-30 16:21:22
【问题描述】：

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

以下是此类图块的示例。轮廓已被设为红色，因此很容易看到透明区域。

我们使用的浏览器支持pointer-event。我想知道是否有办法将其合并到角落区域，或者我是否需要找到一种方法让程序自己识别透明像素。

这些平铺图像不是使用画布构建的。 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; 
}

【问题讨论】：

标签： javascript jquery css transparency

【解决方案1】：

据我所知，pointer-event 仅适用于 SVG 元素。

我会做什么

为每个图块创建一个画布元素，具有图块的大小
draw the tiles 进入每个画布
从每个画布上下文中获取 imageData 并将其存储在某处
mousedown 事件提供坐标，get the pixel color 来自该图块 imageData 并检查它的 alpha 值。

编辑：

重新考虑一下，事件可能会出现复杂情况，因为前景中的图块可能会覆盖它们后面的图块。
您可能必须让 mousedown 事件冒泡到容器元素并手动选择通过单击“命中”的图块，并对所有这些图块执行“每像素检查”。

【讨论】：

您必须注意，绘制到 HTML5canvas（仍然）非常慢，因此使用多个画布并在其中渲染大量内容（如等距 RPG 游戏）可能会花费大量计算时间。
@Qqwy，他在加载游戏时只画了一次瓷砖。这只是为了访问 imageData。如果图块都具有相同的大小，他也可以只使用 1 个画布元素，为每个图块清除它。而且...画布并没有那么慢，我在平庸的笔记本上每帧都能获得不错的 fps (60+) 绘制全高清画布，每帧都有数千个像素操作（粒子系统）。
赞成提供指向各个步骤的链接。我将不得不等待明天才能选择最终答案，因为那时我将有更多时间考虑每个答案。

【解决方案2】：

我会尝试执行this question 中概述的操作，以获取鼠标下方像素的颜色。一旦你有了它，你可以说当有点击时，如果那个像素的颜色等于你的背景颜色（白色看起来），它就不会选择图块。

【讨论】：

【解决方案3】：

我建议：

创建一个平铺大小的画布
在鼠标事件（悬停、单击等）上，您将导致该事件的图块绘制到该画布上
获取 alpha 值并将计数器事件绑定到重置画布

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

3.2。如果 alpha 大于零，则在导致事件的图块上执行操作

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

【讨论】：

【解决方案4】：

你可以：

使用 HTML 图像映射：HTML Image Maps。这是一个简单的选择。但是，缺点是您需要自己创建所有图块的地图。
我知道有些人创建了一个 Isometric 游戏引擎，使用 Canvas 对象不是为了绘制东西，而只是为了计算鼠标是否单击了透明图块以将 onclick 事件委托给下一个图块。可以在here找到项目说明，包括他们的鼠标事件委托。

【讨论】：