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

Question

[thehighhomie]

Начал учить канвас и заново школьную геометрию, так как я ее прогуливал и не знаю вообще.
Пишу свой велосипед похожий на 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....

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

Answer 1

[RAX7]

Помимо геометрии тебе пригодится курс линейной алгебры https://www.youtube.com/playlist?list=PLZHQObOWTQD...

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

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

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

Comments

[thehighhomie]

спасибо)))

Answer 2

[Кирилл Горелов]

У меня к тебе самому вопрос)))

Тоже сейчас делаю свой велосипед.
И блин проблемы.
Как ты сделал трансформацию грамотно, у меня все уезжает когда я меняю ось X и ось Y. Картинка уезжает больше чем положено.

И как ты сделал обводку вокруг объекта, и что бы за нее можно было растягивать объект?

Если не жалко поделиться, буду признателен)?
То что прислал RAX7 я сделал, а вот трансформацию и обводку как у fabric пока не понимаю как сделать(((

Comments

[thehighhomie]

давай вечером попробую вспомнить, что я делал) уже вообще не помню)

[Кирилл Горелов]

thehighhomie, Да, без проблем.
Или можешь прислать ссылку на гит, если выкладывал.
С трансформацией я разобрался.
А вот как сделать обводку вокруг объекта, и что за за нее можно было "дергать" я пока не нашел решения.