HTML5畫布和滾動

Question

我有一個尺寸為1024x768的canvas元素，在其中繪制了一個非常大的圖像，我們可以說寬度>> 1024，高度>>768。可以使用普通滾動條滾動圖像以完全看到。

用戶可以單擊到畫布上以將頂點添加到多邊形：每次添加頂點時，都會繪制一條從新頂點到鼠標光標的線。 鼠標在畫布上的每次移動都會更新畫布，以便將這樣的線從頂點重新繪制到新的鼠標光標位置。

由於圖像非常大，因此重繪非常慢，因此我只想重繪當前可見的圖像塊，或者更好的是重繪受此行影響的“子塊”。

問題是：如何根據用戶滾動圖像的多少來檢測上下文的可見部分的當前topLeft和bottomRight？ 基本上，我想添加對自定義視口的支持，但是我似乎無法利用這些信息來確定要從原始圖像中裁剪的塊的boundingBox。

Answer 1

我實際上有一個canvasDiv容器，它是真正的可滾動元素，而不是畫布本身。

這意味着您的畫布是完整尺寸，並且您正在使用容器div作為一種“框架”。 這確實很糟糕，因為畫布像素非常昂貴，尤其是在您甚至不使用它們的情況下（它們不在視口中）。

最好的方法是將畫布大小設置為容器大小，並使用drawImage函數控制滾動。 原始圖像將放置在屏幕外畫布或圖像元素上。 這樣我可以保證給您更好的性能。

您將失去滾動條，這是不利的一面。

Answer 2

我假設您通過在較小的div中包含較大的canvas元素來創建滾動條。

相反，您可以通過以下方式模仿此設置：

• 擁有一個與容器div大小相同的畫布。

• 添加2個輸入type = range控件以用作垂直和水平滾動條（或者，如果您想花哨的話，可以拿一個jqueryUI滾動條插件）。

• 然后，您可以使用context.drawImage的剪輯版本僅繪制范圍控件指定的圖像部分。 drawImage的剪輯版本如下所示：drawImage（myLargeImage，clipX，clipY，clipWidth，clipHeight，0、0，canvas.width，canvas.height）