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

1 回答

• 1

  问题来自旋转或倾斜，或这些操作 .

  移动或缩放矩形时，它仍然是一个矩形，因此您可以修改其坐标以包含这些效果，并通过仅修改svg中 <rect /> 的属性将其从转换中删除 . 然而，其他变换使它不再是一个矩形，或者至少不是一个边与 x 和 y 轴平行的变形 .

  有两种主要方法可以解决这个问题：

  • 在你的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");
  

  回复于 2024-05-14T10:11:39+08:00