在浏览器中渲染巨大的交互式SVG

Rendering huge, interactive SVGs in a browser

本文关键字：交互式 SVG 巨大 浏览器      更新时间：2024-06-22

我们必须在web应用程序中显示巨大的SVG文档（约20mb）。用户应该能够放大和移动图像。

将SVG直接呈现为DOM对象太慢，并且性能不一致。这同样适用于在画布上绘制。

一般来说，在客户端处理SVG似乎很弱。因此，我考虑实现一个服务器端解决方案，以非矢量格式提供小块数据。如果用户没有与文档交互，则缓冲区开始延迟加载更详细的部分。我对这个解决方案的担忧是，网络流量可能至关重要。

我们将渲染2D DWG/DXF文件，这些文件将转换为SVG。

AutoCAD API似乎很慢。DWG示例在我们的任何设备上都不起作用。此外，应用程序必须在没有互联网连接的情况下运行，因此我们无法使用AutoCAD REST API。

你将如何解决这个问题？浏览器甚至是为处理巨大的矢量图形而构建的吗？

当涉及到SVG时，它取决于节点数量、渐变、不透明度和模糊效果；然而，为什么不使用最终用户的图形加速器来处理这个问题呢？

大多数现代网络浏览器都支持通过WebGL进行图形加速，使用WebGL，您可以在2D（或3D）中构建非常复杂（且"巨大"）的丰富图形，处理速度与图形加速器处理速度一样快；就像现代游戏一样。

建议在已经为您做了大量工作的地方使用WebGL库：

  • 播放画布：https://playcanvas.com/--您可以导入其他格式，构建&使用友好的界面编写场景脚本。PlayCanvas有很好的文档记录。

  • 三个.js：http://threejs.org/--一个高级WebGL库，面向编码人员。ThreeJS还可以处理许多不同类型的3D格式，这个库也有很好的文档记录。

使用Three.js，您也可以将图形渲染为SVG，但是，由于速度和质量方面的明显优势，建议使用WebGL。

这两个库都非常强大，有一个活跃的社区，并且在现代网络浏览器中得到了很好的支持；然而，还有许多其他方法你可以尝试。

有关上述图书馆的更多信息，最好访问有大量信息和示例的网站。

我建议您使用Autodesk Viewer，而不是自己实现，它也适用于具有完整REST+JavaScript API的开发人员。

基本上，这个库会将DWG文件（2D或3D）转换为JSON流，并根据浏览器/设备的功能调整数据量。它使用Three.js，但不需要直接处理几何体（但可以）。

查看Forge Github中的示例。我更喜欢Galley。

您也可以使用NodeJS在本地运行它，将它服务器到浏览器。提取样本完成整个过程。

相关文章：