假设您有一个用于构建等距地图的平铺图像.每个瓷砖都是可选择的.问题是瓷砖图像周围的透明角落与它们后面的瓷砖重叠.我希望忽略图像的透明区域,以便可以更准确地选择其他图块.
这是这种瓷砖的一个例子.轮廓已经变成红色,因此很容易看到透明区域.
我们正在使用支持指针事件的浏览器.我想知道是否有办法将其纳入角落区域,或者我是否需要找到让程序自己识别透明像素的方法.
这些图块图像不是使用画布构建的. 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事件冒泡到容器元素并手动选择被点击“点击”并在所有这些上执行“每像素检查”的图块.