パン+ズーム最初の列が固定されたHTML5キャンバスグリッド

Question

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

私はここPhrogzの投稿をもとにパン+ズーム機能を追加しました：Zoom Canvas to Mouse Cursor

私はパン+ズームとピンの列では、次の困難を抱えているが：

• 私は最初の列よりも右側にキャンバスをパンすることを避けたいと考えています。つまり、最初の列はほとんどの場合、左端にあります。私は

は、誰かがこの上で私を助けてくださいすることができ修正することができませんこと、ズームすると

は、最初の列をスケーリングに問題がある（同じ上縁と下パンのために適用されますか）？このフィドルアウト

Answer 1

チェック：

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

それは（もスケーリングして）あなたの境界条件を処理する方法についていくつかのアイデアを与える必要があります。

なぜ2つのキャンバスを使用し、jQueryを使用しないのか分かりませんが、これはおそらく良いよりも害を及ぼすでしょう。

境界のための適切なコード：

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; 

は、あなたがあなたの戦略ビットを切り替えたいかもしれないかどうかを確認するためにバイオリンで私の一般的なアプローチをチェックしてください。

私はあなたのコードのいくつかに従うことができませんでした。