我們如何計算旋轉圖像的正確x和y值？

將SVG image映射到html。我們如何計算旋轉圖像的正確x和y值？

圖片在Inkscape的旋轉逆時針50度： enter image description here

<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後，它看起來： enter image description here

現在可以請任何人幫助我，並請解釋我最近出了什麼問題？

來源

2012-07-20 Tom Rider

您希望圖像保持在文檔的範圍內，對嗎？您當前的解決方案無法工作，因爲圖像旋轉了50º，中心位於(0, 0)，但您的圖像位於(-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個方程的最大值來實現所有角度。

爲了說明這個例子，請看看這個小提琴：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

來源

2012-07-20 21:05:21 Andrew

我們如何計算旋轉圖像的正確x和y值？

回答

相關問題