有矩形和矩阵时计算坐标

Question

如果我有一个 SVG 矩形

[x1,y1,x2,y2] = [ 456.079, 402.645, 514.841, 527.925 ]

及其 SVG 矩阵

[0, 1, -1, 0, 58.7617, 0]

如何计算矩形的 x, y, w, h？

Answer 1

该矩阵是直接 2D 齐次 3x3 变换矩阵，其中最后 3 个缺失元素隐含 (0,0,1)，因为 SVG 中没有投影。它基本上是 .

的二维版本

所以你需要实现 3x3 矩阵 * 3D 向量乘法 V' = M*V 其中矩阵 M 是你的 6 个值 + (0,0,1) 而 3D 向量 V 是 (x,y,w=1) 结果是 (x',y',w)，您可以忽略 w'。因此，当编写代码（取自我几年前写的 C++ SVG decoder/encoder）来转换顶点时，只需执行以下操作：

x'=M[4]+(M[0]*x)+(M[2]*y);
y'=M[5]+(M[1]*x)+(M[3]*y);

如果您也有体重秤，那么：

x'=M[4]+scalex*((M[0]*x)+(M[2]*y));
y'=M[5]+scaley*((M[1]*x)+(M[3]*y));

其中：

M[6]={ 0, 1, -1, 0, 58.7617, 0 };

此外，如果你想变换向量（或宽度、高度、半径等大小）而不是顶点，那么 w=0 所以代码会忽略偏移量：

x'=(M[0]*x)+(M[2]*y);
y'=(M[1]*x)+(M[3]*y);

如果您也有体重秤，那么：

x'=scalex*((M[0]*x)+(M[2]*y));
y'=scaley*((M[1]*x)+(M[3]*y));

所以变换位置 (x1,y1) 有偏移量和 (x2,y2) 没有（因为它的宽度，高度）。

x=M[4]+(M[0]*x1)+(M[2]*y1);
y=M[5]+(M[1]*x1)+(M[3]*y1);
w=     (M[0]*x2)+(M[2]*y2);
h=     (M[1]*x2)+(M[3]*y2);

如果您的 SVG 对象父级有更多矩阵，您也需要按顺序应用它们。

有矩形和矩阵时计算坐标

Calculate coordinates when having a rectangle and matrix

javascript

math

svg

transform