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

Question

将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＆amp; 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后，它看起来：

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

Answer 1

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

让我们考虑一个不同的算法。如果图像位于(0, 0)，则旋转将围绕图像的左上角居中。旋转将导致图像的一部分超出界限。我们需要弄清楚多少是超出界限，并相应地移动图像。

可以使用此分段函数计算在x方向上调整的量：

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

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

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

为了说明这个例子，请查看这个小提琴：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