thehighhomie
@thehighhomie

Canvas трансформация объектов при помощи мыши?

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

Все получается, все круто работает, все не сложно, кроме трансформаций. Я вообще не понимаю как описать логику изменения трансформаций, когда вешаю события на движение мыши при зажатых контролах для scale, transform, skew, rotate...

Трансформации меня тормозят, это единственное с чем я не могу справиться.

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

К примеру я не понимаю, на сколько нужно сместить translateX, translateY после изменения скейла, чтобы объект остался в в изначальной центральной точке. к примеру:
изначальная транфсормация такая - 1, 0, 0, 1, 0, 0
устанавливаю такую транфсормацию - setTransform(1.5, 0, 0, 1.5, 0, 0)
1.5 это скейл, а последние 2 параметра это translateX/Y
Так вот, мне не понятно на сколько нужно изменить translateX/Y чтобы объект остался в своей центральной точке.

Это только один пример, а ведь есть еще и rotate, для которого нужно еще изменять skew, trasnlate....

Я понимаю что это сложно, но я хочу учиться, мне интересно, но не могу найти ресурсы, где можно изучить реальные примеры таких обработчиков.
  • Вопрос задан
  • 35 просмотров
Решения вопроса 1
RAX7
@RAX7
Помимо геометрии тебе пригодится курс линейной алгебры https://www.youtube.com/playlist?list=PLZHQObOWTQD...
Это только один пример, а ведь есть еще и rotate, для которого нужно еще изменять skew, trasnlate....

Все это делается перемножением матриц трансформации, т.е. берутся матрицы: перемещения, вращения, масштабирования и т.д. (translateMatrix, rotateMatrix, scaleMatrix) перемножаются:
transformMatrix = translateMatrix * rotateMatrix * scaleMatrix
и итоговая transformMatrix уже используется в setTransform()

p.s. у канваса есть простые методы для трансформации: rotate, translate и т.д. с помощью которых всё это можно сделать менее заморочено.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
02 апр. 2020, в 15:54
1000 руб./за проект
02 апр. 2020, в 15:48
10000 руб./за проект