5

太棒了，我想做的基本上是一个拼图游戏。左侧是一个区域，其中有十几个重叠的 .png 文件，这些文件是“撕开的”纸片（所有不同的不规则形状，带有 alpha），当它们放在一起时，在右侧按顺序形成一张纸上面有注释。视觉效果（忽略旋转的部分）：

在此处输入图像描述 我不知道什么新东西，但我在开发它时要注意的两个主要问题是它必须在 ie8+ 和触摸设备上工作。所以这意味着没有闪光灯（这很容易）和没有画布（愚蠢的ie）；这让我留下了 js 和 svg？

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

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

我环顾四周（这里+谷歌）并尝试了一些想法，但我无法解决不规则形状选择/拖动问题。有任何想法吗？

谢谢你的时间。

4

2 回答 2

1

低技术解决方案

具有绝对位置的嵌套元素

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

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

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

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

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

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

问题

移动设备上的舍入误差

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

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

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

解决方案

将图像与热点分开

舍入误差对于热点（精度并不重要）并不是什么大问题。真正引起问题的地方是图像（当您看到图像未在应有的位置排列时）。

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

  • 有一套用于热点的 HTML 代码，与上述相同，只是不显示热点中的图像的任何部分。给他们所有透明的背景。
  • 为图像准备另一组 HTML 代码。每个都是显示所有图像的单个矩形元素。
  • 将每个图像放置在与相关热点相同的位置。
  • 确保热点集和图像集都具有相同的 z-index 顺序。所有热点都将位于所有图像之上，但在热点内和图像内的顺序需要保持一致。
  • 当一个片段的热点被拖动时，更新相关图像的位置以保持它们在同一位置。实际上，图像在拖动时会遮挡热点。
于 2013-03-12T16:54:44.767 回答
1

ExplorerCanvas不适合您吗？我认为这将允许您创建基于画布的解决方案。这将比通过 javascript 处理纯 html 元素所做的任何事情都要好得多

于 2013-03-12T15:18:53.910 回答