4

最初の列が固定された HTML5 キャンバス グリッドを作成したいと考えています (MS Excel にも同様のオプションがあります)。これまでに、次のものを作成できました: http://jsfiddle.net/dobbylan/AbnpE/

ここでの Phrogz の投稿に基づいて、パン + ズーム機能を追加しました: Zoom Canvas to Mouse Cursor

ただし、パンとズーム、および固定された列には次のような問題があります。

  • キャンバスが最初の列よりも右にパンされないようにしたいと思います。つまり、最初の列はせいぜい左の境界線にある可能性があります。（上枠、下パンも同様）
  • ズームすると、最初の列のスケーリングに問題があり、修正できません

誰かがこれについて私を助けてくれますか?

4

1 に答える 1

4

このフィドルをチェックしてください：

http://jsfiddle.net/U8BE5/1/

境界条件を処理する方法についていくつかのアイデアを提供する必要があります (スケーリングも使用します)。

jQuery を使用せずに 2 つのキャンバスを使用することを選択した理由はわかりませんが、これはおそらく良いことよりも悪いことを引き起こしています。

境界に関連するコード:

if (gX > 0) gX = 0;
if (gX < canvas.width - gW * gScale) gX = canvas.width - gW * gScale;
if (gY > 0) gY = 0;
if (gY < canvas.height - gH * gScale) gY = canvas.height - gH * gScale;

フィドルでの私の一般的なアプローチをチェックして、戦略を少し変更したいかどうかを確認してください。

正直なところ、私はあなたのコードの一部をたどることができませんでした。

于 2013-02-03T00:23:13.543 に答える