html - 关于创建类似 Google map 的界面的建议

Question

我正在尝试制作一些基于网络的棋盘游戏，我希望界面可以平移和缩放。就像在 Google map 中一样，您可以平移和缩放 map ，我希望移动和缩放游戏板。当然，与 Google map 不同，我不想使用图像 block 。

谁能给我推荐使用什么技术？这适合纯 HTML 吗？ HTML 5 Canvas ？还是SVG？是否有任何特定的 JS 库可以推荐或完全不同？

我想避免使用 Flash 和 Java。浏览器兼容性是加分项，但不是最重要的因素。例如，我认为为较旧的 IE 要求 Chrome Frame 可能没问题。

如有任何想法/建议，我们将不胜感激。

Answer 1

一些想法:

• 使用 OpenLayers UI使用“fixed”策略一次为您的主板加载矢量图形。 (这可能过于重量级，但具有平移缩放和 IE 兼容性。)

• 使用 Raphael使用 RaphaelZPD 在 SVG 中构建您的电路板用于平移缩放。 RaphaelZPD 不是跨浏览器的(即使 Raphael 是)，所以你需要 Chrome Frame 来兼容 IE。我认为这将是非常轻量级的。

• 为你的面板使用纯 SVG，使用 SVGpan用于平移缩放。这里也需要 Chrome Frame，不过如果你愿意，你可以使用 SVGweb。您可以直接在 Inkscape 中绘制您的板，清理 SVG 并在 XML 中添加您需要的任何 ID(SVG 是引擎盖下的 XML)，如果您愿意，可以使用 jQuerySVG 与板交互，或者手动编写脚本交互。我有没有提到 CSS 与 SVG 一起工作？ 我认为这是你最好的选择。

• 我想不出在这里使用 Canvas 有什么好处，除非您有 很多 动画或位图。 SVG 的工作方式要透明得多 - 它的底层是 XML，当在页面中呈现时，会变成您可以在现代浏览器中轻松操作的 DOM 节点。

• 纯 HTML 可能难以处理缩放。我见过很多图像缩放器，但还没有见过复杂的 HTML 结构，复杂性会因为需要在缩放级别进行平移而变得更加复杂。