1

次のサイズのキャンバスがあります: 500x200。このキャンバス内に、いくつかのブロック (実際にはテーブル セル) を描画しています。描画するブロックの量に関する情報は AJAX 経由で取得していますが、すべてのセルのサイズは 100x50 に固定されています。したがって、キャンバス内に水平方向に 5 ブロック、垂直方向に 4 ブロックしか表示できません。しかし、他のブロックはどうですか？スクリプトがテーブル 30x30 セルを返すとどうなりますか。ユーザーが残りのセルを表示できるように（ズームアウトせず、スクロールのみ）、キャンバスを横にスクロールするにはどうすればよいですか（マウスを優先）。

さらに情報が必要な場合は、教えてください。提供します。ありがとうございました。

4

3 に答える 3

2

これを実現する最も簡単な方法は、マウスパンを実装することです。

マウスダウンイベントで、パンを開始し、マウスの位置を保存します

マウス移動イベントでctx.translate(x,y)、現在のマウス位置と元の位置の差によってコンテキスト（）を変換してから、シーンを再描画します。

マウスアップイベントで、パンを停止します。

もっと難しい方法があります。Mozilla Bespinが行ったように、キャンバス内にスクロールバーを実装できます（...これはMozilla Skywriterになり、その後Aceとマージされ、Canvasのすべての使用が削除されました）。彼らが使用したコードはかなり良かった。

または、キャンバスで使用するDOMスクロールバーを実装することもできますが、すべての場合に正しく実行するのは簡単ではありません。これには、実際のスクロールバーの外観と機能を提供するために、いくつかのダミーdivを追加することが含まれます。私はこれを行いましたが、コードは今のところリリースされていません。しかし、それがあなたが本当に望んでいるのであれば、それを試してみることができない理由はありません。

于 2011-08-25T13:58:47.727 に答える
1

http://www.brighthub.com/hubfolio/matthew-casperson/blog/archive/2009/06/29/game-development-with-javascript-and-the-canvas-element.aspxで優れたチュートリアルをチェックしてください。

それはあなたの質問への答えとはるかに多くを与えるでしょう...

于 2011-09-17T14:09:03.550 に答える
0

これについては Simon Sarris と一緒ですが、別の方法として、キャンバスのクローンを作成し、空白のキャンバスに置き換えてから、元のキャンバスを画像としてレンダリングすることもできます。私はymmvによって、私の使用には問題ない、次のようなMooTools jsをいくつか持っています。

    var destinationCanvas = this.canvas.clone()l
    destinationCanvas.cloneEvents( this.canvas, 'mousemove');
    var destCtx = destinationCanvas.getContext('2d');
    destCtx.drawImage(
        this.canvas, 
        (this.options.scrollPx)*-1, 
        0
    );
    destinationCanvas.replaces( this.canvas );
    this.canvas.destroy();
    this.canvas = destinationCanvas;
    this.ctx        = destCtx; // this.canvas.getContext('2d');
于 2012-09-17T18:58:12.060 に答える