忽略图像的透明角
假设您有一个用于构建等轴测图的图块图像。每个图块都是可选择的。问题在于图块图像周围的透明角与其后面的图块重叠。我希望忽略图像的透明区域，以便可以更准确地选择其他图块。
这是此类图块的示例。轮廓已设为红色，因此可以轻松看到透明区域。
我们使用的浏览器支持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;
}
Say you've got a tile image that you use to build an isometric map. Each tile is selectable. The problem is that the transparent corners around the tile image are overlapping the tiles behind them. I want the transparent area of the image to be ignored so that the other tiles can be more accurately selected.
Here is an example of such a tile. The outline has been made red so its easy to see the transparent area.
We're using a browser that supports pointer-event. I was wondering if there was a way to incorporate that into the corner areas, or if I need to find a way to have the program recognize the transparent pixels on their own.
These tile images are not built using canvas. The CSS is simply this:
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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
据我所知，
pointer-event仅适用于 SVG 元素。我会
编辑：
重新考虑一下，事件可能会变得复杂，因为前景中的图块可能会覆盖它们后面的图块。
您可能必须让 mousedown 事件冒泡到容器元素，并手动选择通过单击“击中”的图块，并对所有这些图块执行“每像素检查”。
As far as I know,
pointer-eventapplies only to SVG elements.What I would do
edit:
Rethinking it, there could be complications with events, since the tiles in the foreground will probably cover the tiles behind them.
You'll probably have to let the mousedown events bubble to the container element and manually select the tiles which are "hit" by the click and perform the "per pixel check" on all those.
我会尝试做类似这个问题<中概述的事情< /a> 以获取鼠标下方像素的颜色。一旦你有了这个，你可以说，当有一个点击时，如果该像素的颜色等于你的背景颜色（白色看起来像），它就不会选择图块。
I would try and do something like what is outlined in this question in order to get the color of the pixel that is under your mouse. once you have that, you can say that when there is a click, for it not to select the tile if the color of that pixel is equal to the color of your background (white looks like).
我建议：
创建一个图块大小的画布
在鼠标事件（悬停、单击等）上绘制导致该图块的图块事件到该画布
获取 alpha 值并绑定计数器事件以重置画布
3.1.如果 alpha 为零，则将事件委托给几何下一个图块（右上、左上、右下或左下）并在那里执行操作
3.2。如果 alpha 大于零，则在引起事件的图块上执行操作，
这只会在必要时绘制到画布，从而节省一些计算时间
i would suggest:
create a canvas of the size of a tile
on a mouse event (hover, click, whatever) you draw the tile that caused the event to that canvas
get the alpha value and bind the counter-event to reset canvas
3.1. if alpha is zero delegate the event to the geometric next tile (right-top, left-top, right-bottom or left-bottom) and execute actions there
3.2. if alpha is greater zero execute actions on tile that caused event
this will only draw to canvas if neccessary and thereby saves some calculation time
您可以：
使用 HTML 图像映射：HTML 图像映射< /a>.这是一个简单的选择。然而，缺点是您需要自己创建所有图块的地图。
我知道有些人创建了一个 Isometric 游戏引擎，使用 Canvas 对象不是为了绘制东西，而是为了计算鼠标是否单击了透明图块，以将 onclick 事件委托给下一个图块。可以在此处找到该项目的说明，包括其鼠标事件委托。< /p>
You could:
use HTML Image Maps:HTML Image Maps. This is a simple option. The con is however that you need to create a map of all tiles yourself.
I know that some people created an Isometric game engine used a Canvas object not to draw things, but just to calculate if the mouse clicked on a transparent tile to delegate the onclick event to the next tile. Explanation of the project including their mouse event delegation can be found here.