使用 System.Drawing.Drawing2D 中的 Matrix class 来展平 SVG 转换

Using Matrix class from System.Drawing.Drawing2D to flatten SVG transformation

我有一个 SVG 文档,它的 RECT 标签带有 MATRIX/SCALE/TRANSLATE 转换:

<?xml version="1.0" encoding="UTF-8"?>
    <svg
       xmlns:svg="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg"
       version="1.0"
       width="300"
       height="150"
       id="svg2">
      <rect
         width="70"
         height="30"
         x="169.46515"
         y="46.238182"
         id="rect1"
         style="fill:none;stroke:#000000;stroke-opacity:1" />
      <rect
         width="8"
         height="2"
         x="134.69983"
         y="97.45443"
         id="rect2"
         style="fill:none;stroke:#000000;stroke-opacity:1" />
      <rect
         width="2"
         height="2"
         x="-99.804573"
         y="125.0692"
         transform="matrix(-2.6042412e-3,-0.9999966,0.9999966,-2.6042412e-3,0,0)"
         id="rect3"
         style="fill:none;stroke:#ff0000;stroke-width:1;stroke-opacity:1" />
      <rect
         width="8"
         height="2"
         x="-100.87854"
         y="129.95743"
         transform="matrix(-6.2857322e-4,-0.9999998,0.9999418,-1.0789073e-2,0,0)"
         id="rect4"
         style="fill:none;stroke:#ff0000;stroke-width:1;stroke-opacity:1" />
      <rect
         width="2"
         height="8"
         x="-99.81971"
         y="134.43823"
         transform="matrix(-2.6042412e-3,-0.9999966,0.9999966,-2.6042412e-3,0,0)"
         id="rect5"
         style="fill:none;stroke:#ff0000;stroke-width:1;stroke-opacity:1" />
      <path
         d="M 82.592797,67.016361 C 82.597697,77.923711 76.726297,86.769781 69.481867,86.769781 C 62.237427,86.769781 56.366027,77.923711 56.370927,67.016361 C 56.366027,56.109011 62.237427,47.262941 69.481867,47.262941 C 76.726297,47.262941 82.597697,56.109011 82.592797,67.016361 z"
         id="path22095"
         style="fill:none;stroke:#0000ff;stroke-opacity:1" />
      <rect
         width="30"
         height="70"
         x="46.304344"
         y="-239.40808"
         transform="matrix(0,1,-1,0,0,0)"
         id="rect6"
         style="fill:none;stroke:#ff0000;stroke-opacity:1" />
      <rect
         width="2"
         height="2"
         x="121.03672"
         y="97.452477"
         id="rect7"
         style="fill:none;stroke:#000000;stroke-opacity:1" />
    </svg>

我想要 flatten/transform 坐标并完全摆脱 TRANSFORM 属性。

似乎 System.Drawing.Drawing2D.Matrix class 具有所有必需的方法,但由于某种原因结果看起来不正确。以下是我使用的代码:

PointF[] coordinates = 
            {
                new PointF(float.Parse(element.Attribute("x").Value), float.Parse(element.Attribute("y").Value))
            };    

var matrix = new Matrix(transform[0], transform[1], transform[2], transform[3], transform[4], transform[5]);
matrix.TransformPoints(coordinates);

element.Attribute("x").Value = coordinates[0].X.ToString();
element.Attribute("y").Value = coordinates[0].Y.ToString();

至少在 RECT 的情况下,它似乎可以正确计算位置,但是因为 Width/Height 保持不变,所以看起来不同。当我尝试将 TransformPoints 应用于 Width/Height 时,它也没有帮助。

所以我的问题是是否有可能以某种方式找到原始坐标?

更新

正如@Cimbali 所建议的那样,我尝试了以下代码,但结果仍然不正确:

var matrix = new Matrix(transform[0], transform[1], transform[2], transform[3], transform[4], transform[5]);
matrix.TransformPoints(coordinates);

var a = Math.Sign(transform[0]) * Math.Sqrt(transform[0] * transform[0] + transform[2] * transform[2]);
var b = Math.Sign(transform[3]) * Math.Sqrt(transform[1] * transform[1] + transform[3] * transform[3]);
var angle = Math.Atan2(transform[1], transform[3]) * 180 / Math.PI;
var newWidth = double.Parse(element.Attribute("width").Value) * a;
var newHeight = double.Parse(element.Attribute("height").Value) * b;

element.Attribute("x").Value = Math.Round(coordinates[0].X, coordinatesPrecision, MidpointRounding.AwayFromZero).ToString();
element.Attribute("y").Value = Math.Round(coordinates[0].Y, coordinatesPrecision, MidpointRounding.AwayFromZero).ToString();
element.Attribute("width").Value = newWidth.ToString();
element.Attribute("height").Value = newHeight.ToString();

if (angle != 0)
    element.Attribute("transform").Value = string.Format("rotate({0})", angle);

谢谢

问题来自于旋转或倾斜,或这些类型的操作。

当移动或缩放一个矩形时,它仍然是一个矩形,因此您可以修改其坐标以包含这些效果,并通过仅修改 svg 中 <rect /> 的属性将它们从变换中移除。然而,其他变换使它不再是一个真正的矩形,或者至少不是一个边平行于 xy 轴的矩形。

有两种主要方法可以解决此问题:

  • 在您的 svg 中保留 transform="rotate(angle)",如果您使用它们,最终还会保留 skew。 为此,您必须将矩阵分解为不同的(乘法)元素,这将是非常重要的,并删除缩放和平移。
  • 使用 <polygon /> 而不是 <rect />。这是更简单的选项。

后一个选项:多边形

我们需要矩形的 4 个角:{(x,y), (x+width,y), (x+width,y+height), (x, y+height)}

现在您可以将变换矩阵应用于所有这些点,就像您只对 (x,y) 所做的那样,并使用它们(保持顺序)绘制多边形。

原选项:继续轮换

在这个版本中,我们保留了rect,并尝试将其transform属性从矩阵简化为简单的旋转。我假设你只旋转、平移和缩放你的矩阵,没有倾斜(我已经尝试了一段时间但没有定论)。

然后变换矩阵 A 以列优先顺序写入其前 2 行(因为第 3 行始终是 0 0 1)。因此,由于它包括缩放(沿 x a 和沿 y b),然后旋转某个角度,其中 c = cos(angle)s = sin(angle),它是写成:

    | a*c  -a*s  tx |   | transform[0] transform[2] transform[4] |
A = | b*s   b*c  ty | = | transform[1] transform[3] transform[5] |
    |  0     0    1 |   |      0            0            1       |

因此 from here 出现了此转换的伪代码:

  • transform[4] 添加到 <rect />
  • x 属性
  • transform[5] 添加到 <rect />
  • y 属性
  • a = sqrt( transform[0] * transform[0] + transform[2] * transform[2] )
  • b = sqrt( transform[1] * transform[1] + transform[3] * transform[3] )
  • angle = atan2(transform[1], transform[3]) * 180/PI
  • 将矩形的宽度乘以 a,将其高度乘以 b
  • 最后,将<rect />transform属性设置为"rotate(angle)"(如果angle为非零),如果angle为零。

从您的更新中获取并更正代码(唉,因为我自己不做 C#),我们得到:

element.Attribute("x").Value = Math.Round(coordinates[0].X + transform[4], coordinatesPrecision, MidpointRounding.AwayFromZero).ToString();
element.Attribute("y").Value = Math.Round(coordinates[0].Y + transform[5], coordinatesPrecision, MidpointRounding.AwayFromZero).ToString();

var a = Math.Sqrt(transform[0] * transform[0] + transform[2] * transform[2]);
var b = Math.Sqrt(transform[1] * transform[1] + transform[3] * transform[3]);
var angle = - Math.Atan2(transform[1], transform[3]) * 180 / Math.PI;
var newWidth = double.Parse(element.Attribute("width").Value) * a;
var newHeight = double.Parse(element.Attribute("height").Value) * b;

element.Attribute("width").Value = newWidth.ToString();
element.Attribute("height").Value = newHeight.ToString();

if (angle != 0)
    element.Attribute("transform").Value = string.Format("rotate({0})", angle);
else
    element.RemoveAttribute("transform");

另一种方法是围绕 <rect /> 的中心旋转而不是 (0,0) 是首先对坐标应用变换,因此如下:

PointF[] coordinates = { new PointF(
    float.Parse(element.Attribute("x").Value),
    float.Parse(element.Attribute("y").Value)
)};

var matrix = new Matrix(transform[0], transform[1], transform[2], transform[3], transform[4], transform[5]);
matrix.TransformPoints(coordinates);

element.Attribute("x").Value = coordinates[0].X.ToString();
element.Attribute("y").Value = coordinates[0].Y.ToString();

var a = Math.Sqrt(transform[0] * transform[0] + transform[2] * transform[2]);
var b = Math.Sqrt(transform[1] * transform[1] + transform[3] * transform[3]);
var angle = - Math.Atan2(transform[1], transform[3]) * 180 / Math.PI;
var newWidth = double.Parse(element.Attribute("width").Value) * a;
var newHeight = double.Parse(element.Attribute("height").Value) * b;

element.Attribute("width").Value = newWidth.ToString();
element.Attribute("height").Value = newHeight.ToString();

if (angle != 0)
    element.Attribute("transform").Value = string.Format("rotate({0}, {1}, {2})", angle, coordinates[0].X + newWidth/2, coordinates[0].Y + newHeight/2);
else
    element.RemoveAttribute("transform");