javascript – 忽略图像的透明角落

2019年8月3日 198次阅读

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

这是这种瓷砖的一个例子.轮廓已经变成红色,因此很容易看到透明区域.

我们正在使用支持指针事件的浏览器.我想知道是否有办法将其纳入角落区域,或者我是否需要找到让程序自己识别透明像素的方法.

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

最佳答案 据我所知,指针事件仅适用于SVG元素.

我会怎么做

>为每个图块创建一个画布元素,具有图块的大小
>每张画布draw the tiles
>从每个画布上下文中获取imageData并将其存储在某个地方
> mousedown事件从tile图像数据提供坐标get the pixel color并检查它的alpha值.

编辑：

反思它,可能会有事件的复杂化,因为前景中的瓷砖可能会覆盖它们后面的瓷砖.
你可能不得不让mousedown事件冒泡到容器元素并手动选择被点击“点击”并在所有这些上执行“每像素检查”的图块.

点赞