平移+縮放HTML5畫布網格與固定第一列

Question

我想創建一個固定第一列的HTML5畫布網格（MS Excel有類似的選項）。 到現在爲止我已經能夠創建以下文件：http://jsfiddle.net/dobbylan/AbnpE/

我已經加入泛+縮放功能基於Phrogz的此留言：Zoom Canvas to Mouse Cursor

但是我有平移+縮放和固定列如下困難：

• 我想防止平移畫布右邊比第一列，即第一列最多可以在左邊界。 （同樣適用於上邊界和下掃視）
• 縮放時，沒有與縮放第一列一個問題，我無法修復

是否有人可以幫助我在這？

Answer 1

檢查這個搗鼓出來：

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

它應該給你關於如何處理邊界條件的一些想法（也有比例）。

我不知道爲什麼你選擇使用兩個畫布，而不是使用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; 

檢查出我的小提琴一般方法，看看您可能要切換你的策略一點。

說實話，我無法遵循你的一些代碼。