在浏览器中使用html5和javascript显示交互式2D平面图
乔克斯
我需要替换几年前构建的Flash查看器，以显示来自AutoCAD的交互式2D平面图。
当前，已读取AutoCAD文件并将其转换为XML文件，该文件包含表示平面图对象（房间，墙壁，资产等）的多边形的X和Y坐标。图形中的对象是可单击的，可以设置为可见或不取决于主题观点。
有时这些平面图可能相对较大，有很多要点。
我已经尝试使用像LeafletJS这样的Web地图控件，因为它已经具有PAN和ZOOM功能，我可以插入可点击的标记，并管理图层，以便可以通过主题视图显示或隐藏对象。我已将地图CRS设置为指标，并将数据加载为GeoJSON。不幸的是，在实际的中型平面图中，它太慢了，有时变得无响应。
下面的示例由18630线对象组成，平移时反应不是很大。
因此，现在我想使用SVG或CANVAS在浏览器中直接绘制平面图。我更喜欢使用CANVAS，因为它比SVG快得多，如果支持的话，也可以使用WebGL，但是我必须依靠一个库才能拥有事件处理程序和像DOM这样的简单对象管理。
所以，现在我要问的是，即使我需要映射2D对象并且它是选择正确的技术，像threeJS这样的库是否也可以轻松完成这样的任务。特别是，可以使用threeJS：
- 要将事件侦听器分配给对象以获取其ID？
- 要将CSS3规则应用于样式对象，例如，突出显示房间或桌子？
- ThreeJS可以轻松地同时绘制SVG或Canvas元素吗？
- 使用ThreeJS，我还可以轻松管理平移和缩放吗？
- 它也可以在移动设备上显示吗？（Android和iOS）
如果有人知道更好的库或技术可以完成此任务，那么我完全可以提出任何建议。
（请注意，我只需要2D工程图，因为已经使用Revit的其他技术构建了3D）
炭疽
使用webgl（例如，通过three.js），您可以在启用GPU的桌面浏览器上以60fps的速度绘制数百万条简单的线图元。
这是使用three.js拼凑而成的超过一百万行原语的人为示例：
https://codesandbox.io/s/0pp3x92n4p
和这里：
http://vectorslave.com/wireblueprint/index.html
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
可以使用浏览器窗口推送和弹出的 javascript 交互式堆栈
- 2
使用Javascript，HTML5，AngularJS从浏览器打印嵌入式PDF
- 3
浏览器内文本的交互式选择突出显示
- 4
浏览器刷新后，交互式rmarkdown文档无法正确显示
- 5
HTML5全屏API无法在iPhone SE Safari浏览器和其他最新的iPhone中使用
- 6
混合使用matplotlib交互式图和内联图？
- 7
如何在 Meteor 应用程序中使用 Node JS 创建交互式 ssh 终端并从浏览器输入命令
- 8
HTML5标签可以包装交互式内容？
- 9
HTML5视频无法在任何浏览器中使用
- 10
带有 html5 视频和 javascript 注入的 c# WPF 浏览器
- 11
如何从浏览器为 IDP 和 SP 之间的 SAML SSO 流进行非交互式用户登录
- 12
仅使用HTML和CSS创建交互式条形图
- 13
使用matplotlib和ipywidget的交互式图
- 14
使用javascript与浏览器进行交互
- 15
使用HTML5 / Canvas / JavaScript拍摄浏览器内屏幕截图
- 16
如何使用WebView或Web浏览器在android Studio中显示和与OKHTTP html响应进行交互
- 17
在浏览器中使用html显示JSON字典
- 18
对Javascript平面图的了解？
- 19
R中使用Plotly和Shiny的交互式散点图
- 20
转换交互式python脚本以在浏览器中运行
- 21
使用HTML和JQUERY的交互式表单
- 22
RxJava 和 Retrofit 使用多个平面图处理分页
- 23
如何在PyQt5中使Matplotlib图交互式
- 24
Javascript工具/库，可在浏览器中使用javascript来检测和显示文本变化，例如git diff？
- 25
Web浏览器如何区分HTML5和HTML4？
- 26
兼容浏览器中未显示HTML5视频标签
- 27
浏览器如何确定HTML5视频标签是否显示全屏按钮？
- 28
基于HTML5的游戏没有显示在浏览器上吗？
- 29
R中使用apexcharter的交互式热图在反应性上失败
我来说两句