Pan + Zoom HTML5 холст сетки с закрепленным первым столбцом - PullRequest
Новая
       356

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

4 голосов
/ 29 февраля 2012

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

Я добавил функциональность Pan + Zoom, основанную на публикации Phrogz здесь: Zoom Canvas to Mouse Cursor

Однако у меня есть следующие трудности с панорамированием + масштабированием и закрепленным столбцом:

  • Я бы хотел предотвратить панорамирование холста вправо дальше, чем первый столбец, т. Е. Первый столбец может максимумбыть на левой границе.(То же относится и к верхней границе и панорамированию вниз)
  • При масштабировании существует проблема с масштабированием первого столбца, которую я не могу исправить

Может кто-нибудь, пожалуйста, помогите мнена это?

1 Ответ

4 голосов
/ 03 февраля 2013

отметьте это:

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

Это должно дать вам некоторые идеи о том, как обрабатывать ваши граничные условия (также с масштабированием).

I 'Я не уверен, почему вы решили использовать два холста и не использовать 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;

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

Если честно, я не мог следовать некоторому вашему коду.

...