Pan + Zoom HTML5 холст сетка с закрепленным первым столбцом

Question

Я хотел бы создать сетку холста HTML5 с закрепленным первым столбцом (аналогичная опция для MS Excel). До сих пор я был в состоянии создать следующее: http://jsfiddle.net/dobbylan/AbnpE/

я добавил функциональности Pan + Увеличить на основе размещения 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; 

Проверьте мой общий подход в скрипку, чтобы увидеть, если вы можете переключить свою стратегию немного.

Если быть честным, я не смог бы выполнить некоторые из ваших кодов.