JS canvas 大數據縮放和平移（100k-1M 對象）

Question

我想在我的 Canvas 上實現快速和高分辨率的縮放和平移。正如您可能已經在標題中讀到的那樣，我有很多數據，所以使用CanvasRenderingContext2D.scale()和CanvasRenderingContext2D.translate()重繪不是一個選項，因為它很慢。 我已經嘗試過使用圖像，但我想在縮放和平移時查看所有數據點。 只繪制可見的數據點是一個好的開始，但這使得縮放和平移只能在非常接近的縮放下進行，但我實際上希望能夠縮小直到我可以看到所有數據點。 數據點用圓圈繪制，如果這對您有任何幫助，它們會非常靠近。 我感謝有關如何處理此問題的每條建議。

Answer 1

我認為您應該嘗試以下方法之一：

1. WebGL（對於 web 瀏覽器，它是 OpenGL 行）
   材料： khronos 組 web 頁面回購： GitHub
2. three.js 材料： three.js web 頁面回購： GitHub

我向他們求助是因為他們也能夠處理 2D（不僅是 3D）並且他們有處理大紋理的工具。 您可以創建 static 相機，它只會改變到表面的距離（帶紋理）- 縮放。

使用 Three.js 可以使用 mipmap 鏈或“預過濾的 Mipmapped 輻射環境 Map： PMREMGenerator ”逐步加載位圖。

Answer 2

另一種對我有用的方法是有一個（隱藏的）canvas 用於繪圖和一個用戶可以看到的視口 canvas。 在隱藏的 canvas 上繪制允許您繪制更大的圖像，然后通過重繪 canvas 來更新視口以僅查看中間部分（您可以使用viewportContext.drawImage(sourceCanvas, -canvasWidth / 2, -canvasHeight / 2)來從一個 canvas 繪制到另一個）。

要實現縮放和平移，我會簡單地將源 canvas 中的圖像存儲在開頭（在 mouseDown 或滾動上）並根據新的鼠標位置/滾動（只需平移它或更改其尺寸即可）將其重新繪制到源 canvas .