我们如何计算旋转图像的正确 x 和 y 值？答案

【问题标题】：How we can calculate the correct x and y value for the rotated image?我们如何计算旋转图像的正确 x 和 y 值？
【发布时间】：2012-07-20 17:05:17
【问题描述】：

将 SVG image 元素映射到 html。

inkscape 中的图像旋转 逆时针 50 度 :

<image
   y="178.3712"
   x="-212.40982"
   id="image3002"
   xlink:href="..path"
   height="369"
   width="360"
   transform="matrix(0.64278761,-0.76604444,0.76604444,0.64278761,0,0)" />

计算 x & y，according to this mathematical logic ：

      X = -212.40982, Y = 178.3712

   x = X * 0.64278761 - Y * 0.76604444;

   y = X * 0.76604444 + Y * 0.64278761;

当我在 html 中映射图像时计算 x 和 y 后，它看起来：

现在可以请任何人帮助我，请解释一下这里出了什么问题？

【问题讨论】：

标签： c# svg rotation inkscape

【解决方案1】：

您希望图像保持在文档的范围内，对吗？您当前的解决方案不起作用，因为图像围绕(0, 0) 的中心旋转了50º，但您的图像放置在(-212.40982, 178.3712)。

让我们考虑一个不同的算法。如果图像放置在(0, 0)，则旋转将以图像的左上角为中心。旋转将导致图像的一部分超出范围。我们需要弄清楚有多少是超出范围的，并相应地移动图像。

x 方向的调整量可以使用这个分段函数来计算：

h × sin(θ) 为0 < θ ≤ π/2
h × sin(θ) − w × cos(θ) 为π/2 < θ ≤ π
−w × cos(θ) 为 π < θ ≤ 3π/2
0 为3π/2 < θ ≤ 2π

其中θ是旋转角度，w和h分别是图像的宽度和高度。

在 y 方向上的调整量只是向左移动了π/2。这个分段函数可以通过使用4个方程的最大值来实现所有角度。

为了说明这个例子，请查看这个 Fiddle：http://jsfiddle.net/XMkYS/

您可以使用rotate 应用转换，然后使用translate 来固定图像位置。在您的情况下，<image> 标签变为：

<image
   y="0"
   x="0"
   id="image3002"
   xlink:href="..path"
   height="369"
   width="360"
   transform="translate(0, 275.775999522832) rotate(-50)" />

延伸阅读：http://www.w3.org/TR/SVG/coords.html#TransformAttribute

【讨论】：