Javascript“拼图”具有不规则的.png形状

Question

Soooo，我想要做的事实上是一个拼图游戏。在左侧是一个堆叠十几个重叠.png文件的“撕开”纸片（所有不同的不规则形状与alpha）的区域，当放在一起时，按顺序在右侧，形成一张纸附有说明。视觉（忽视旋转件）：

我所知道的并不是什么新东西，但我在开发它时的两个主要注意事项是它必须在ie8 +和触摸设备上工作。所以这意味着没有闪光（这将是非常容易的）和没有画布（愚蠢的ie）;这给我留下了js和svg？

js中的拖放部分很容易，但我遇到的问题是，我确定你知道，alpha通道被忽略，不规则的撕裂片实际上是一个矩形。这使得这个不可用，因为碎片是堆叠的，彼此重叠。

我可以通过使用图像映射并在翻转时设置变量来对掉落进行粒度命中检测。

我环顾了很多（这里是+谷歌）并尝试了一些想法，但我无法解决不规则的形状选择/拖动问题。有什么想法吗？

感谢您的时间。

Answer 1

ExplorerCanvas不是您的选择吗？我认为这将允许您创建基于画布的解决方案。这将比通过javascript

进行普通html元素操作所做的更好

Answer 2

低技术解决方案

具有绝对位置的嵌套元素

如果您愿意花一点时间，可以通过相当接近的方式实现这一目标，而无需使用Flash，Canvas，SVG甚至图像映射。与图像映射不同，它允许您根据需要在每个热点内嵌套相关内容（例如，弹出窗口）。

在最简单的情况下，您可以为拼图的每个部分使用单个矩形超链接热点。显然，这极大地限制了你可以支持的形状范围（不会干扰重叠元素）。

但是，如果你拿这个超链接标签并给它一些span标签子，并给每个绝对位置（相对于超链接），并将图像的适当部分应用到背景，那么你可以“构造“不规则图像形状，占据一个不规则的热点，对重叠元素的干扰相对较小。

实际上，图像（具有透明区域）被视为精灵文件，其中超链接标记和子跨度标记各自占据“精灵文件”的一部分。图像的大多数透明部分不会被超链接标记或span标记占用。

大多数形状都可以使用超链接标记和4 - 10跨度构建。当然，形状越不规则，它往往需要越多的跨度。

之前我已经完成了这项工作，为美国地图上的每个州创建热点，而不使用图像地图（或Flash，Canvas，SVG），这并不像你想象的那样有问题。只需要一点时间来弄清楚如何将每个形状分解成正确数量的矩形的细节。

捕获

移动设备上的舍入错误

这是捕获，这是一个很好的。当在移动设备上缩放网页（并且常规页面几乎总是在较小的设备上缩放）时，会引入舍入错误，导致超链接标记的px放置和跨度标记可能水平变化至少1个像素和/或垂直。如果缩放桌面浏览器，也会发生这种情况;只是桌面浏览器通常不会缩放。

您会倾向于在每个形状的不同部分之间分离（或重叠）1个像素左右。在许多情况下，这往往是非常明显的，在视觉上是不可接受的。根据实施情况，位置可以变化2px或3px。当它发生时很难解决，并且有多少可以解决它。

最后我查了一下，Firefox是唯一能够在缩放页面上舍入px值以避免此问题的浏览器。希望其他浏览器最终能够更好地支持它，因为即使是简单的页面也经常会出现舍入错误。

解决方案

将图像与热点分开

对于热点（精度不重要），舍入误差不是很大的问题。它真正导致问题的地方在于图像（当你看到图像没有排列在它应该的位置时）。

通过执行以下操作，可以避免最严重的图像舍入错误：

• 为热点设置一组HTML代码，与上述相同，但不显示热点中图像的任何部分。给他们所有透明的背景。
• 为图像添加另一组HTML代码。每一个都是一个显示所有图像的矩形元素。
• 将每张图片放在与相关热点相同的位置。
• 确保热点集和图像集都具有相同的z-index顺序。所有热点都将位于所有图像之上，但在热点和图像中，订单需要保持一致。
• 拖动片段的热点时，更新相关图像的位置以使它们保持在同一位置。实际上，图像在被拖动时会遮挡热点。