javascript - html5キャンバスでのカスタムスクロール

Question

hmtl5キャンバスに表示される非常に大きなデータにスクロールバーとネイティブスクロールバーを提供するための推奨される方法は何ですか？

128000x128000ピクセルのデータを表示する必要があります。幅/高さが128000に設定されたキャンバスを使用することは、膨大な量のRAM（私の簡単な計算によると約61 GB）を使用するため、オプションではありません。

そのため、HTML5キャンバスにカスタムスクロールバーを提供する方法が必要です。

Answer 1

簡単なテストの後、ChromeやFirefoxがキャンバスをそれほど大きくレンダリングするかどうかはわかりません。私の賭けは、canvas要素を作成することですが、それを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幅のDIVを使用して偽のスクロールバーを提供するかはあなた次第です。そして、ユーザーが位置を変更するたびに、drawImageを再度呼び出して、x / y位置（私の例では40と50）を更新します。

そうは言っても、隠されていても、ブラウザがそれほど大きなキャンバスで動作するかどうかは疑問です。

私はたまたま同じ問題の解決策を探しているので、あなたの研究で運が良ければ共有してください。

Answer 2

興味深い質問です。あまり使用していません<canvas>が、内部は<canvas>画像のように考えるのが一番だと思います。つまり、DOMに関してはブラックボックスです。

そのため、想像しているように実際にスクロールできるとは思いません。128000×128000がある場合は、たとえば1280×1280の<canvas>中に入れて、に設定することもできますが、おっしゃるように、128000×128000は実用的ではありません。<div><div>overflow:hidden<canvas>

あなたが探している種類のソリューションは、仮想の128000×128000キャンバスインターフェイスを提供すると思いますが、それをチャンクに分割し、スクロールインターフェイスを提供し、スクロールして表示されるように各チャンクを描画します。

Answer 3

jCanvasはあなたを助けるかもしれないjQueryプラグインです。