拉斐爾2旋轉和平移

這裏是我的腳本：拉斐爾2旋轉和平移

<script> 
Raphael.fn.polyline = function(pointString) { 
    return this.path("M" + pointString); 
}; 

window.onload = function() { 

var paper = Raphael("holder", 500, 500); 
paper.circle(100, 175, 70).attr({"stroke-width":10, "stroke":"red"}); 

var a = paper.polyline("92,102 96,91 104,91 108,102").attr({"fill":"green", "stroke-opacity":"0"}).rotate(25, 100, 175); 
var b = paper.polyline("92,102 96,91 104,91 108,102").attr({"fill":"green", "stroke-opacity":"0"}).rotate(45, 100, 175); 
var c = paper.polyline("92,102 96,91 104,91 108,102").attr({"fill":"green", "stroke-opacity":"0"}).rotate(65, 100, 175); 

var group = paper.set(); 
group.push(a, b, c); 

group.translate(60); 

}; 
</script>

當我使用拉斐爾-1.5.2，其結果是： enter image description here

當我使用拉斐爾2.0，結果是： enter image description here

在1.5.2中它使用旋轉變換來旋轉圓周上的物體，在2.0中它使用矩陣變換。我假設矩陣變換會轉換該對象的座標系，所以當您稍後在xy方向上翻譯對象時，它會將其轉換爲與該對象相對的xy。

我需要能夠在紅色圓圈的邊緣周圍添加綠色物體，然後才能夠在同一方向上拖動和移動所有物體。我堅持使用1.5.2還是我只是想在2.0中如何改變翻譯？

來源

2011-10-10 beardedlinuxgeek

[heres a jsfiddle showing the issue]（http://jsfiddle.net/whAxR/）。隨着拉斐爾1.5.2，-X總是在左邊，而-Y總是在上面。隨着2.0 -X和-Y的變化取決於元素的旋轉。與2.0我沒有看到翻譯以前旋轉過的東西的好方法。 – Joe

使用絕對變換而不是translate。說你要在X移動的100和50 y中做到這一點：

Element.transform("...T100,50");

確保您使用大寫字母T，你會得到一個絕對的翻譯。以下是文檔中提到的內容：

還有另一種「絕對」平移，旋轉和縮放：T，R和S.它們不會考慮以前的轉換。例如，... T100,0將始終將水平元素移動100px，而如果之前有r90，則t100,0可以將其垂直移動。只是比較r90t100,0和r90T100,0的結果。 See documentation

關於平移，根據聖拉斐爾JS 2.0翻譯的文檔執行此：

由給定數量添加到翻譯元素的轉換的列表中。 See documentation

所以會發生什麼是追加基於什麼已經應用到該對象的相對變換（它基本上」 ...... t100,50" ）。

來源

2011-11-30 21:06:29 paaat

絕對變換是超級有用的。您可以創建一個包裝對象來存儲屬性：'{x：100，y：50，r：45}'。然後總是使用這些設置變換，例如： 'el.transform（['T'，x''，'，y，'R'，r] .join（''））;' 您可以也將這個想法擴展到動畫。 – Tyler

我懷疑是用1你的變換正確對待集作爲一個對象，但與2小呈綠色的東西旋轉自主承擔二是徹底的重新設計讓喜歡這個小斷開會發生使用getBBox並找到您所設定的中心，然後在整個集合上使用1個旋轉命令指定從getBBox派生的cx cy

來源

2011-10-11 22:14:21 Chasbeen

拉斐爾2旋轉和平移

回答

相關問題