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

Question

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

Answer 1

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

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

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

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

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

Answer 2

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

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();
};