How we can calculate the correct x and y value for the rotated image?

问题

Mapping SVG image element to html.

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)" />

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;

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 ?

回答1:

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).

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.

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

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

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

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.

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

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)" />

Further reading: http://www.w3.org/TR/SVG/coords.html#TransformAttribute

来源：https://stackoverflow.com/questions/11583922/how-we-can-calculate-the-correct-x-and-y-value-for-the-rotated-image

标签

svg

rotation

inkscape