JS画布缩放和平移大数据（100k-1M对象）

Question

我想在我的画布上实现快速、高分辨率的缩放和平移。正如您可能已经在标题中读到的那样，我有很多数据，因此使用

CanvasRenderingContext2D.scale()

和

CanvasRenderingContext2D.translate()

进行重绘不是一个选择，因为它太滞后了。我已经尝试使用图像，但我想在缩放和平移时查看所有数据点。仅绘制可见的数据点是一个好的开始，但这使得缩放和平移只能在非常接近的缩放上进行，但我实际上希望能够缩小直到可以看到所有数据点。数据点用圆圈绘制，并且非常靠近（如果这对您有帮助的话）。我很感激关于如何处理这个问题的每一个建议。

Answer 1

我认为你应该尝试其中之一：

1. WebGL（它是用于网络浏览器的 OpenGL）
   材料：khronos 小组网页 存储库：GitHub
2. Three.js 资料： Three.js 网页 仓库：GitHub

我建议他们是因为他们也能够处理 2D（不仅是 3D），而且他们有处理大纹理的工具。您可以创建静态相机，它只会改变到表面的距离（带有纹理） - 缩放。

使用 Three.js，可以使用 mipmap 链或“预过滤、Mipmap 辐射环境图”逐步加载位图：PMREMGenerator。

Answer 2

对我有用的另一种方法是拥有一个用于绘图的（隐藏的）画布和一个用户可以看到的视口画布。在隐藏的画布上绘图允许您绘制更大的图像，然后通过重新绘制画布以仅查看中间部分来更新视口（您可以使用

viewportContext.drawImage(sourceCanvas, -canvasWidth / 2, -canvasHeight / 2)

从一个画布绘制到另一个画布）。

要实现缩放和平移，我只需将源画布中的图像存储在开头（在 mouseDown 或滚动时），然后根据新的鼠标位置/滚动（只需将其平移或更改其尺寸即可）将其重新绘制到源画布。

Answer 3

这个问题已经有几年了，但对于那些仍然遇到的人来说，这里有一个我编写的 p5.js 插件的链接，这使得使用大型画布变得非常容易。 （平移和缩放无需重绘）p5.js 插件名为 p5.5