1

这不是重复的。我已经浏览了所有其他答案。

我有一个 [a, b, c, d, e, f] svg 变换矩阵。我想将它分解成任何一系列的平移/缩放/旋转（带有可选中心）操作。偏斜不是一种选择。我试图适应 Android Vector Drawable Group 提供的 7 个属性（例如，rotation、pivotX、pivotY、scaleX、scaleY、translateX、translateY）。

我的第一个问题是，所有这些矩阵都可能吗？如果矩阵沿任一轴倾斜，是否可以通过一系列旋转|缩放操作来渲染？如果不是所有的矩阵都是可能的，是否有可能检测到它们何时不是？

第二个问题是对基本数学的一些帮助。我得到了translateX = e和translateY = f。如果scaleX = ab和c 为零。但是当 b 和 c 不为零时，旋转和缩放会纠缠在一起。我怎样才能解开这些？scaleY = d

4

1 回答 1

2

根据这里的答案：

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>

于 2020-03-14T17:30:41.993 回答