我们如何为旋转的图像计算正确的x和y值? [英] How we can calculate the correct x and y value for the rotated image?

问题描述

将SVG image元素映射到html.

Mapping SVG image element to html.

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

Image in inkscape rotate counterclockwise 50 degree :

<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，根据此数学逻辑:

Computing 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之后，它看起来是:

After calculating the x and y when i map the image in html, it looks :

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

Now can please anybody help me out and please explain me whats going wrong here ?

推荐答案

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

You want the image to remain within the bounds of the document, correct? Your current solution doesn't work because the image is rotated 50º about the center at (0, 0), but your image is placed at (-212.40982, 178.3712).

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

Let's consider a different algorithm. If the image is placed at (0, 0), the rotation will be centered about the top-left corner of the image. The rotation will cause a portion of the image to go out of bounds. We need to figure out how much is out of bounds, and move the image accordingly.

可以使用以下分段函数来计算x方向上的调整量:

The amount to adjust in the x-direction can be calculated using this piecewise function:

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

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

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

where θ is the rotation angle, w and h are the width and height of the image respectively.

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

The amount to adjust in the y-direction is simply shifted left by π/2. This piecewise function can be implemented for all angles by using the maximum value of the 4 equations.

为说明此示例，请查看此小提琴: http://jsfiddle.net/XMkYS/

To illustrate this example, please check out this Fiddle: http://jsfiddle.net/XMkYS/

您可以使用rotate应用转换，然后使用translate固定图像位置.对于您来说，<image>标签变为:

You can apply the transformation using rotate, and then translate to fix the image position. In your case, the <image> tag becomes:

<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

这篇关于我们如何为旋转的图像计算正确的x和y值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！