HTML5中的互动平面图

前端之家收集整理的这篇文章主要介绍了HTML5中的互动平面图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
你好StackOverflow.

在接下来的几个星期里,我将很乐意为公寓楼开发一个交互式平面图导航仪和观众,这将使其基于闪存的前身成功.

我现在正在评估最适合在HTML5中实施这些技术和技术的技术和技术.
我将不得不支持所有常见的浏览器(IE从7开始).

我需要的是相当简单:

用户可以看到建筑物的几个静态户外视图,两者之间可以用简单的窗口小部件切换.

他可以在这个外部视图中选择一个楼层.在鼠标悬停(点击触摸设备)时,会突出显示地板.

点击楼层后,您可以切换到平面图,这也是鼠标悬停/ onclick上的详细信息.

应该参与一些动画,但也没有什么太花哨.

您可以在这里查看基于Flash的版本:http://salitergasse.at/sg9/eigentumswohnungen/moedling/perchtoldsdorf

我一直在考虑实施这个的选择.
我还需要一个快速的选择多边形的方式(总览)公寓(平面图),以允许非开发者创建新的建筑物.

我想出的选择:

– )使用平面图像和图像映射作为中介.

– )使用画布(在不支持的情况下,使用Google的Javascript解决方案进行浏览).将图像加载到画布标签中并动态创建排版.

– )使用SVG

你们有什么感想?
跨浏览器兼容性的最佳选择是什么?

有这样的经验吗?

我会感谢任何建议.

解决方法

SVG或Canvas可以满足您的需求.您可能会更容易地在SVG中开发SVG,因为您已经完成了多少工作.

这里有一些其他的考虑:

> Canvas适用于所有“现代”浏览器,但不能用于IE7 / 8
> SVG在所有现代浏览器中工作,VML(非常接近)在IE7 / 8中
> Canvas中的文本呈现可以看起来与每个浏览器相当不同
> Canvas在一定程度上在Android和iOS中起作用(文字渐变的小事情仍然混乱)
> SVG在Android中不起作用(至少在一年前没有改变任何内容)它在iOS中有效
SVG的可访问性更好.文本是可搜索的,因此SEO友好,盲人友好,复制和粘贴友好等.与DOM的其余部分进行交互更为自然.
>画布表现更好,但您不需要.

在这一点上,它们相当平等,除了旧版本的IE.您可以使用excanvas库来获取Canvas的工作,但是它有点吸引人,尤其是如果有任何事情要移动.

我建议使用SVG,因为您可以在平面图类型的应用程序上快速地开发出更快的地面.一切都已经是一个DOM对象.事件,鼠标处理等已经为您完成.

但是如果你真的想要它(旧的)android手机,Canvas可能是现在更好的赌注.

猜你在找的HTML5相关文章