有关创建类似Google地图的界面的建议

Dan*_*Dan 4 html html5 svg

我正在尝试制作一些基于网络的棋盘游戏,我希望界面可以平移和缩放.就像在Google地图中如何平移和缩放地图一样,我希望移动和缩放游戏板.当然,不同的谷歌地图,我希望与图像瓷砖工作.

谁能给我推荐使用什么技术?这是否适合纯HTML?HTML 5画布?还是SVG?是否需要推荐任何特定的JS库?

我想避免使用flash和Java.浏览器兼容性是加号,但不是最重要的因素.例如,我认为要求旧版IE​​的Chrome Frame可能没问题.

任何想法/建议将不胜感激.

pet*_*ter 5

一些想法:

  • 使用具有" 固定 "策略的OpenLayers UI一次性为您的主板加载矢量图形.(这可能是过于沉重的重量,但它具有全变焦和IE兼容性.)

  • 使用Raphael在SVG中构建您的电路板,使用RaphaelZPD进行平移缩放.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结构,并且需要在缩放级别进行平移会增加复杂性.