HTML5中的互动平面图 [英] Interactive Floor Plans in HTML5
问题描述
您好，有StackOverflow。
在接下来的几个星期，我将有幸开发一个互动平面图导航器和公寓建筑的查看器，
我现在正在评估最适合在HTML5中实现此技术和技术的过程。
我必须支持所有常见的浏览器（IE从7开始）。
我需要的是很简单的：
用户被呈现给建筑物的几个静态户外视图，在它们之间他可以用一个简单的小部件切换。
他将能够在这个外部视图上选择一个楼层。
点击楼层后，切换到平面图，再次通过mouseover / onclick提供有关公寓的详细信息。
有些动画应该涉及，但没有太多的花哨。
此处为基于Flash的版本的版本： http://salitergasse.at/sg9/eigentumswohnungen/moedling/perchtoldsdorf
我一直在想实现这个选项。
我还需要一个快速选择地板多边形（概述）和公寓（平面图）以允许非开发人员创建新建筑的方法。
我想出的选项：
- ）使用平面图像和图像映射的铺垫。
- ）使用画布（使用Google的Javascript解决方案的浏览器，不支持）。
- ）使用SVG
家伙想？
跨浏览器兼容性的最佳选择是什么？
有这样的体验吗？
$ bSVG或Canvas将满足您的需求。
这里有一些其他的注意事项：
- Canvas适用于所有现代浏览器，但不适用于IE7 / 8
- SVG适用于所有现代浏览器， （非常接近）在IE7 / 8中
- Canvas中的文本呈现在每个浏览器中看起来很不一样
- Canvas在Android和iOS
- SVG不能在android中工作（至少它不是一年前，任何改变？）它在iOS中工作
- SVG的辅助功能 FAR 更好。文字是可搜索的，因此SEO友好，盲目友好，复制和粘贴友好等。与DOM的其余部分交互是更自然。
- 画布性能更好，但你不需要它。
在这一点上，它们是相当一致的兼容性，除了旧版本的IE。你可以使用excanvas库让那些使用Canvas工作，但它很可爱，特别是如果有什么东西会移动。
我建议SVG只是因为你将能够下载地面开发它更快的平面计划类型的应用程序。一切都已经是一个DOM对象。事件，鼠标处理等，已经为你做了。
但如果你真的想要它的工作（老？）Android手机，画布可能是更好的赌现在。
Hi there StackOverflow.
In the next weeks I will have the pleasure of developing an interactive floor plan navigator and viewer for apartment buildings, which will succeed its Flash-based predecessor.
I am now in the process of evaluating techniques and technologies best suited to implement this in HTML5. I will have to support all common browsers (IE starting with 7).
What I need is rather simple:
The user is presented with several static outdoor views of the building, between which he can switch with a simple widget.
He will be able to select a floor on this outside view. On mouseover (click for touch devices) the floor will be highlighted.
Upon clicking on the floor you switch to a floor plan, which - again on mouseover/onclick - provides detailed information about the apartment.
Some animations should be involved, but nothing too fancy.
You can view a version of the flash-based version here: http://salitergasse.at/sg9/eigentumswohnungen/moedling/perchtoldsdorf
I have been thinking of the options for implementing this. I will also need a quick way of selecting polygons for the floors (overview) an the apartments (floor plan) to allow non-developers to create new buildings.
The options I came up with:
-) Use plain images and image maps for the layovers.
-) Use canvas(utilizing Google's Javascript solution for browsers without support). Load the image in the canvas tag and dynamically create the layovers.
-) Use SVG
What do you guys think? What is the best option for cross-browser compatability?
Any experience with something like this?
I would appreciate any suggestions.
Either SVG or Canvas will suit your needs. You'll probably have an easier time developing this in SVG simply because of how much is already done for you.
Here are some other considerations:
- Canvas works in all "modern" browsers, but not IE7/8
- SVG works in all modern browser, and VML (very close) is in IE7/8
- Text rendering in Canvas can look pretty different per-browser right now
- Canvas works in Android and iOS to an extent (minor things like text gradients still mess up)
- SVG does not work in android (at least it didn't a year ago. Anything change?) It does work in iOS
- The accessibility of SVG is FAR better. Text is searchable, therefore SEO-friendly, blind-friendly, copy-and-paste friendly, etc. Interacting with the rest of the DOM is a lot more natural.
- Canvas performance is better, but you don't need that.
At this point they are pretty equal compatibility-wise, save for older versions of IE. You can get those to work with Canvas using the excanvas library, but it kinda sucks, especially if anything is going to be moving.
I'd recommend SVG solely because you will be able to get off the ground developing it much much faster for a floor-plan type of app. Everything is already a DOM object. Events, mouse handling, etc, is already done for you.
But if you really want it to work on (older?) android phones, Canvas may be the better bet for now.
这篇关于HTML5中的互动平面图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
