具有矩形和矩阵时计算坐标[关闭]答案

【问题标题】：Calculate coordinates when having a rectangle and matrix [closed]具有矩形和矩阵时计算坐标[关闭]
【发布时间】：2020-10-08 07:27:06
【问题描述】：

如果我有一个 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？

【问题讨论】：

这些值有什么关系？
用矩阵[1, 0, 0, 1, 0, 0] 那么x是左边位置：x=x1，y是顶部位置y=y1，w是矩形的宽度w =x2-x1, h 是矩形的高度 h = y2-y1
你的矩阵中有六个值吗（看起来更像一个向量...）？
@NinaScholz 其直接 2D 同质 3x3 变换矩阵最后 3 个元素隐含为 (0,0,1) 这就是 SVG 定义它的方式，因为其中没有投影...... IIRC 来变换你只需要的顶点乘以position' = matrix*position
这是存储在pdf文件中的矩阵

标签： javascript math svg transform

【解决方案1】：

该矩阵是直接 2D 同质 3x3 变换矩阵，其中最后 3 个缺失元素隐式为 (0,0,1)，因为 SVG 中没有投影。它基本上是this 的二维版本。

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

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 对象父对象有更多矩阵，您也需要按顺序应用它们。

【讨论】：

谢谢，很有帮助，请问怎么找角度？
@ThiPhạm 它在矩阵中...... IIRC 它是atan2(M[1],M[0]) 或atan2(M[2],M[0]) 之一，我敢打赌它是后一个。该矩阵包含 2 个基向量（每个轴一个）和偏移量我只是不记得它是否存储在列或行中并且懒得分析/反转我的旧代码...
我认为应该是 atan2(-M[1],M[0]) 或 atan2(M[2],M[0])
@ThiPhạm 取决于您的坐标系...如果您的轴是 x 向右并且 y 向上则没有否定，所以很可能atan2(M[2],M[0]) 只需尝试查看计算的角度是否与您的 SVG 视图匹配
还有一件事，如果 [x1,y1,x2,y2] = [ 456.079, 402.645, 514.841, 527.925 ] 是矩形旋转后的结果，我能找到原来的x吗？是吗？