Как рассчитать координаты для translate(x, y) относительно системы координат вьюпорта а не системы координат объекта?

Question

[asakasinsky]

Как рассчитать координаты для translate(x, y) относительно системы координат вьюпорта а не системы координат объекта?
Вот этот комментарий отлично описывает проблему:

Самую интересную и неочевидную особенность трансформаций не отразили: то, что трансформация меняет именно систему координат объекта. Например, если объект повернуть на 90° по часовой, раскукожить вдвое и после этого попытаться сдвинуть на 100px вправо — на самом деле он сдвинется на 200px вниз, т.к. в его системе координат теперь ось X смотрит вниз (а ось Y — влево) и каждый «пиксель» в ней равен двум настоящим.

Дополнение #1:
https://yadi.sk/d/9I5hJGWChXSZU
На гифке два элемента: первый с углом поворота 0deg, второй же повёрнут на 30deg. Нужно передвинуть элемент с помощью mouse или touch событий. Казалось бы чего проще, считывай координаты из событий и в соответствии с ними передвигай объект, но, как выяснилось, с помощью transform: translate(x, y) позиция элемента задаётся относительно его системы координат, а не вьюпорта.

Comments

[Евгений Петров]

Ваш вопрос непонятен. Объясните свою задачу, что хотите сделать, а не механику работы трансформаций.

[asakasinsky]

Евгений Петров: Вы, видно, просто не сталкивались с этой проблемой. Объясню визуально.
https://yadi.sk/d/9I5hJGWChXSZU
На гифке два элемента: первый с углом поворота 0deg, второй же повёрнут на 30deg. Нужно передвинуть элемент с помощью mouse или touch событий. Казалось бы чего проще, считывай координаты из событий и в соответствии с ними передвигай объект, но, как выяснилось, с помощью transform: translate(x, y) позиция элемента задаётся относительно его системы координат, а не вьюпорта.

[Евгений Петров]

asakasinsky: Это не выяснилось, а было известно изначально. Более того, проценты в translate считаются от размера самого элемента. Так что, скорее вы впервые стали изучать этот вопрос.

[asakasinsky]

Евгений Петров: Да, впервые. Про зависимость от scale() знаю, так как декомпозинг матрицы проводил и это было первое что бросилось в глаза.
Выход-то есть какой?

Answer 1

[Евгений Петров]

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

Сделал примитивный пример с matrix2d — таскаем трасформированные объекты.

Comments

[asakasinsky]

Вот уж действительно, горе от ума. Я перемножал матрицы с помощью Sylvester sylvester.jcoglan.com/api/matrix.html, и, судя по всему, где-то ошибка в расчётах. Результат вы видели на анимации. До более простого способа мозги не дошли )))

[Евгений Петров]

asakasinsky: Я не изучал это решение, но порядок умножения матриц имеет значение. Возможно, проблема в этом.

[asakasinsky]

Евгений Петров: я чуть позже вернусь к этому вопросу, спасибо большое за уточнение.

[asakasinsky]

Ах ты гений мой дорогой! Поменял порядок умножения, и заработало!!!

[asakasinsky]

в смысле правильно заработало.

[Евгений Петров]

asakasinsky: Тогда лучше оперируйте матрицами, не зря же я назвал свой пример примитивным:) Тем более, что transform3d гарантированно производительнее.

А пример просто для понимания, что итоговая матрица — суть всей трансформации и того, что порядок перечисления отдельных правил в transform задаёт порядок перемножения отдельных матриц.

[asakasinsky]

Очередное спасибо за уточнение.

Answer 2

[scapp]

Добавьте переменные с координатами вьюпорта и используйте как вам надо.

Comments

[asakasinsky]

https://yadi.sk/d/9I5hJGWChXSZU
На гифке два элемента: первый с углом поворота 0deg, второй же повёрнут на 30deg. Нужно передвинуть элемент с помощью mouse или touch событий. Казалось бы чего проще, считывай координаты из событий и в соответствии с ними передвигай объект, но, как выяснилось, с помощью transform: translate(x, y) позиция элемента задаётся относительно его системы координат, а не вьюпорта.