HTML5 Canvas: вычисление положения мыши после масштабирования и перевода

Я пытаюсь разработать интерактивный просмотрщик векторных рисунков и хочу иметь функцию масштабирования. Функция масштабирования работает довольно хорошо, но теперь у меня проблема с вычислением положения мыши для выбора объектов. Событие возвращает координаты экрана. У холста нет метода для использования матрицы преобразования обратным способом. У кого-нибудь есть решение этой проблемы?


canvas scale coordinates html
person strangeoptics    schedule 11.12.2011    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я сделал очень маленький простой класс для отслеживания матрицы преобразования.

Я добавил функцию invert() по таким причинам. Я также сделал функцию invertPoint(), но не включил ее в окончательную версию. Однако сделать вывод несложно, просто инвертируйте и преобразуйте точку вместе.

Я часто просто вычисляю подходящее преобразование с этим классом, а затем использую setTransform, в зависимости от приложения.

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

Вот код класса преобразования. И вот сообщение в блоге с небольшим объяснением.

person Simon Sarris    schedule 11.12.2011
comment
Привет Саймон, спасибо за ваш быстрый ответ. Решение идеальное. Сегодня я постараюсь включить ваши чистые классы в свой проект.‹br› Жаль, что у холста нет подходящих методов для таких требований. У Android и любой другой графической платформы, которую я знаю, она есть. - person strangeoptics; 12.12.2011
comment
Вы должны добавить функцию инвертирования, которая возвращает новый объект Transformobject/Matrix. В противном случае мне придется вызывать инвертирование во второй раз после того, как я закончу перевод своего экрана в мир. Это может быть более производительным. - person strangeoptics; 12.12.2011

arrow_upward
-1
arrow_downward

Вот несколько ценных функций для вашей библиотеки, которые сохраняют состояние матрицы и необходимы для построения графа сцены:

Transform.prototype.reset = function() {
  this.m = [1,0,0,1,0,0];
  this.stack = [];
};

Transform.prototype.push = function() {
    this.stack.push(this.m.slice());
};

Transform.prototype.pop = function() {
    this.m = this.stack.pop();
};
person strangeoptics    schedule 15.12.2011