在html5畫布上自定義滾動

爲hmtl5畫布中顯示的超大型數據提供滾動滾動條和原生滾動條的建議方法是什麼？在html5畫布上自定義滾動

我需要顯示128000x128000像素的數據。使用寬度/高度設置爲128000的畫布不是一個選項，因爲這將使用大量的RAM（根據我的快速計算，大約61 GB）。

所以我需要一種方法來爲HTML5畫布提供自定義滾動條。

來源

2012-08-11 JohanShogun

那麼，如果畫布正在繪製滾動條，那麼它不會真的是本地的。你想達到什麼目的？ – 2012-08-11 13:48:36

我基本上正在尋找一種方法來顯示一個本地滾動條，我可以抓住滾動事件。 :) – JohanShogun 2012-08-14 08:11:20

jCanvas是一個jQuery插件可以幫助你。

來源

2012-08-11 13:33:59

謝謝你的建議，不幸的是我找不到它在jCanvas中的任何原生支持，但它確實有其他一些非常好的東西。我最終做了一個縮放的事情，而不是谷歌地圖如何運作的啓發。 – JohanShogun 2012-08-14 08:09:03

好的。希望我幫助你。考慮投票並接受我的回答，讓其他人明白我的回答對你有幫助。 – 2012-08-14 08:15:29

有趣的問題。我還沒有非常使用<canvas>，但我相信<canvas>的內部最好像圖像一樣，也就是說，就DOM而言它是一個黑盒子。

因此，我不認爲你可以真正按照你想象的方式滾動它。如果你有一個128000×128000 <canvas>，你可以把它放在一個<div>裏面，例如， 1280×1280，並將<div>設置爲overflow:hidden，但正如你所說，128000×128000 <canvas>是不切實際的。

我想你要尋找的解決方案將提供一個虛擬的128000×128000畫布界面，但隨後將其拆分成塊，提供一個滾動界面，並在滾動到視圖中時繪製每個塊。

來源

2012-09-05 09:56:20

經過快速測試，我不確定Chrome或Firefox甚至會渲染一個大的畫布。我敢打賭，將創建一個畫布元素，但永遠不會將它追加到DOM。就像這樣：

var hiddenCanvas = document.createElement('canvas'); 
hiddenCanvas.width = 128000; 
hiddenCanvas.height = 128000; 
var hiddenContext = hiddenCanvas.getContext('2d');

然後創建一個小畫布，將實際顯示你的隱藏的畫布

<canvas width="something reasonable" height="something reasonable" id="viewCanvas"/>

的一部分，並使用的drawImage方法來繪製部分：

var viewCanvas = document.getElementById('viewCanvas'); 
var viewContext = viewCanvas.getContext('2d'); 
viewCanvasContext.drawImage(hiddenCanvas, 40, 50, viewCanvas.width, viewCanvas.height, 0, 0, viewCanvas.width, viewCanvas.height);

然後這將取決於你提供向上/向下/向右/向左導航按鈕，或者可能是假滾動條使用20px寬的DIVs只會顯示滾動條，你會鉤onscroll甚至聽衆。每當用戶改變位置時，再次調用drawImage，更新x/y位置（在我的例子中爲40和50）。

話雖如此，再次，即使隱藏我懷疑瀏覽器將與一個大的畫布工作。

我碰巧在尋找同樣問題的解決方案，所以如果您的研究中有幸運，請分享。

來源

2012-10-16 20:52:30

我用縮放功能解決了我的問題。將寬度和高度設置爲100％，然後使用鼠標放大/縮小和拖動。但它確實爲應用程序/用戶體驗增加了一些額外的複雜性。而且，即使在較小的畫布上渲染大量數據也會花費一些時間。 60000x60000塊縮小到例如1000x1000畫布通常需要2-3秒才能繪製。 – JohanShogun 2012-10-19 12:09:23

在html5畫布上自定義滾動

回答

相關問題