Можно ли разложить обобщенную матрицу преобразования c [a, b, c, d, e, f] (svg) в серию директив rotate / scale / translate? - PullRequest
Новая
       57

Можно ли разложить обобщенную матрицу преобразования c [a, b, c, d, e, f] (svg) в серию директив rotate / scale / translate?

0 голосов
/ 13 марта 2020

Это не дубликат. Я просмотрел все остальные ответы.

У меня есть матрица преобразования [a, b, c, d, e, f] svg. Я хочу разложить его на любую серию операций перевода / масштабирования / вращения (с необязательным центром). Наклон НЕ вариант. Я пытаюсь вписаться в 7 атрибутов, предоставляемых Android Vector Drawable Group (например, вращение, pivotX, pivotY, scaleX, scaleY, translateX, translateY).

Мой первый вопрос заключается в том, что возможно ли для всех таких матриц? Если матрица имеет перекос вдоль любой оси, можно ли вместо этого визуализировать ее с помощью серии операций rotate | scale? Если не все матрицы возможны, можно ли определить, когда их нет?

Второй вопрос - это некоторая помощь по основам математики. Я добираюсь до translateX = e и translateY = f. scaleX = a и scaleY = d IF b и c равны нулю. Но когда b и c не равны нулю, вращение и масштаб запутываются. Как я могу распутать их?

1 Ответ

1 голос
/ 14 марта 2020

Основано на ответе здесь : 

const sx = Math.sign(a) * Math.sqrt(a * a + c * c);
const sy = Math.sign(d) * Math.sqrt(b * b + d * d);
const tx = e;
const ty = f;
const angle = Math.atan2(b, d) * 180 / Math.PI;
const transform = `translate(${tx} ${ty}) scale(${sx} ${sy}) rotate(${angle})`;

Похоже, нет способа разделить матрицу на отдельные преобразования, когда b / d != -a / c. Можете ли вы решить эту проблему с помощью нескольких поворотов и масштабирования, я не знаю. 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 250">
    <path fill="blue" opacity="0.5" transform="translate(100 -150) scale(2.8284271247461903 0.9998489885977782) rotate(45)" d="M 238 162.4 247 214.7 200 190 153 214.7 162 162.4 123.9 125.3 176.5 117.6 200 70 223.5 117.6 276.1 125.3z"/>
    <path fill="none" stroke="blue" transform="matrix(2 0.707 -2 0.707 100 -150)" d="M 238 162.4 247 214.7 200 190 153 214.7 162 162.4 123.9 125.3 176.5 117.6 200 70 223.5 117.6 276.1 125.3z" />
</svg>
...