具有不规则 .png 形状的 Javascript "Jigsaw puzzle"

Question

Soooo，我想做的本质上是一个拼图游戏。左侧是一个区域，有十几个重叠的“撕开”纸片(所有不同的不规则形状，带有 alpha)的重叠 .png 文件，当放在一起时，按顺序放在右侧，形成一张纸上面有注释。视觉效果(忽略旋转的碎片):


我不知道什么新鲜事，但我在开发它时的两个主要警告是它必须在 ie8+ 和触摸设备上工作。所以这意味着没有闪光(这很容易)和没有 Canvas (愚蠢的 ie)；这给我留下了js和svg？

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

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

我环顾四周(here + google)并尝试了一些想法，但我无法解决不规则形状的选择/拖动问题。有任何想法吗？

谢谢你的时间。

Answer 1

低技术解决方案

具有绝对位置的嵌套元素

如果您愿意多花一点时间，有一种方法可以相当接近地实现这一点，而无需使用 Flash、Canvas、SVG 甚至图像映射。与图像映射不同的是，它允许您在需要时将相关内容嵌套在每个热点中(例如，弹出窗口)。

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

但是，如果您使用该超链接标签并为其指定多个跨度标签子项，并为每个标签指定绝对位置(相对于超链接)，并将图像的适当部分应用于背景，那么您可以“构建”不规则占据单个不规则热点的图像形状，与重叠元素的干扰相对较小。

实际上，图像(具有透明区域)被视为一个 Sprite 文件，超链接标签和子跨度标签每个都占据“ Sprite 文件”的一部分。图片的大部分透明部分不会被超链接标签或跨度标签占据。

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

我以前做过这个，为美国 map 上的每个州创建热点，而不使用图像 map (或 Flash、Canvas、SVG)，而且它几乎没有你想象的那么有问题。只需要一点时间来弄清楚如何将每个形状分解成正确数量的矩形的细节。

渔获

移动设备上的舍入误差

这就是问题所在，这太棒了。当网页在移动设备上缩放时(并且常规页面几乎总是在较小的设备上缩放)，这会引入舍入误差，导致超链接标签和跨度标签的像素位置可能水平变化至少 1 个像素和/或垂直。如果桌面浏览器被缩放，也会发生这种情况；只是桌面浏览器不经常缩放。

会发生的情况是，每个形状的不同部分之间往往会出现 1 像素左右的分离(或重叠)。在许多情况下，这往往是非常明显的，并且在视觉上是 Not Acceptable 。根据实现的不同，位置的差异可能高达 2px 或 3px。当它发生时，它很难解决，并且可以解决多少是有限的。

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

解决方案

将图像与热点分开

对于热点(精度不重要)，舍入误差不是什么大问题。真正导致问题的地方是图像(当您看到图像未对齐时)。

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

有一组用于热点的 HTML 代码，与上述相同，但不显示热点中的图像的任何部分。给他们所有透明的背景。

为图像提供另一组 HTML 代码。每个都是显示所有图像的单个矩形元素。

将每个图像放置在与相关热点相同的位置。

确保热点集和图像集都具有相同的 z-index 顺序。所有热点都将位于所有图像的顶部，但在热点内和图像内的顺序需要一致。

拖动某个片段的热点时，更新相关图像的位置以使其保持在同一位置。实际上，图像在拖动时会遮住热点。