Хобрук: Ваш путь к мастерству в программировании

Разложение матрицы Svg

В svg у нас есть метод element.getCTM(), который возвращает SVGMatrix как:

[a c e][b d f][0 0 1]

Я хочу рассчитать sx , sy и угол поворота из этой матрицы.

svg rotation matrix decomposition angle
02.01.2012

  • Помогите мне решить эту проблему. 02.01.2012

Ответы:


1

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

a == sx и d == sy, поэтому вы получите к ним доступ следующим образом:

var r, ctm, sx, sy, rotation;

r   = document.querySelector('rect'); // access the first rect element
ctm = r.getCTM();
sx  = ctm.a;
sy  = ctm.d;

Теперь о вращении a == cos(angle) и b == sin(angle). Асин и акос сами по себе не могут дать вам полную картину, но вместе они могут. Вы хотите использовать atan, начиная с tan = sin/cos, и именно для таких проблем вы на самом деле хотите использовать atan2:

RAD2DEG = 180 / Math.PI;
rotation = Math.atan2( ctm.b, ctm.a ) * RAD2DEG;

Если вы изучаете обратные тригонометрические функции и единичный круг вы поймете, почему это работает.

Вот незаменимый ресурс W3C по преобразованиям SVG: http://www.w3.org/TR/SVG/coords.html. Прокрутите немного вниз, и вы сможете прочитать гораздо больше о том, что я упомянул выше.

ОБНОВЛЕНИЕ, пример использования, как программно делать анимацию. Сохраняйте преобразования отдельно, а при их обновлении перезаписывайте/обновляйте преобразование элемента SVG.

var SVG, domElement, ...

// setup
SVG        = document.querySelector( 'svg' );
domElement = SVG.querySelector( 'rect' );
transform  = SVG.createSVGTransform();
matrix     = SVG.createSVGMatrix();
position   = SVG.createSVGPoint();
rotation   = 0;
scale      = 1;

// do every update, continuous use
matrix.a = scale;
matrix.d = scale;
matrix.e = position.x;
matrix.f = position.y;

transform.setMatrix( matrix.rotate( rotation ) );
domElement.transform.baseVal.initialize( transform ); // clear then put
02.01.2012
  • Как найти разложенные значения для анимации svg? 21.01.2012
  • Какие анимации вы хотите сделать? Какие значения вам нужны? Пожалуйста, опишите больше. 21.01.2012
  • Я хочу сказать, что если у меня есть svg-анимация, в которой многие узлы анимации, такие как animateTransform (перевод, масштабирование, поворот) и animateMotion, добавляются к узлу-контейнеру. Так что, если я хочу упростить эту анимацию в одиночные перевод, поворот, масштабирование и наклон, что может быть возможно с помощью ctm, потому что ctm представляет собой комбинированную матрицу преобразования. Сделайте вопрос, какие значения я должен поместить в перевод, поворот, масштабирование и наклон. узлы, чтобы перейти к текущему преобразованию. 23.01.2012
  • Это требует ОЧЕНЬ много работы. Когда вы используете animateTransform, animateMotion и другие элементы анимации, вы не должны управлять ими программно. Если вы хотите управлять анимацией программно, вы хотите работать непосредственно с преобразованиями элементов. Я обновил свой ответ выше примером. 24.01.2012
  • Я нашел решение, используя SVD, который дает мне такие матрицы, как A = USV *, где U и V * — матрицы вращения, а S — матрица масштаба. Предположим, 1-я строка U равна [a11 a12], а 2-я строка — [a21 a22]. ]. Как получить угол, вокруг которого вращаются оси системы координат? 30.01.2012
    • Новые материалы
    ВЫ РЕГРЕСС ЭТО?
    Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..
    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
    LeetCode Проблема 41. Первый пропущенный положительный результат
    LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..
    Расистский и сексистский робот, обученный в Интернете
    Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..
    Управление состоянием в микрофронтендах
    Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..
    Декларативное и функциональное программирование в стиле LINQ с использованием JavaScript с использованием каррирования и генератора ...
    LINQ - одна из лучших функций C #, которая обеспечивает элегантный способ написания кода декларативного и функционального стиля, который легко читать и понимать. Благодаря таким функциям ES6,..
    Структуры данных в C ++ - Часть 1
    Реализация общих структур данных в C ++ C ++ - это расширение языка программирования C, которое поддерживает создание классов, поэтому оно известно как C с классами . Он используется для..