爲什麼Raphaeljs，集旋轉後，做了鼠標懸停的對象恢復到它的初始位置

我有一組對象，我對藍方的點擊旋轉，它工作正常。該集合中的每個對象都附帶一個懸停事件，使該對象動畫化顏色變化和縮放，以便在鼠標進入和離開時爲其生長和收縮留下印象。但是，從演示中可以看到，縮放會導致對象重置爲原始位置，並且如果先前將對象懸停在其上，還會對旋轉產生有趣效果。

我的問題是我可以旋轉一組對象，並且在旋轉後仍然具有對象的縮放效果，而不會重置爲原始位置，我假設我在鼠標懸停中具有不正確的轉換，並且如果有人可以指向我在正確的方向，我將非常感激。

編輯新撥弄鏈接...

2012-09-21 ginja

可否請你更新在給定鏈路的代碼？它不包含除創建Paper對象之外的任何代碼。 –

對不起，是我不好，應更新現在 – ginja

增加了新的jsfiddle鏈接 – ginja

經過進一步研究，這個我想我明白這個問題。

當你繪製拉斐爾是在畫布上設定的位置，當我們進行旋轉，它是在該組位置的頂部施加轉型的路徑。觸發懸停事件我們應用一個縮放轉換，它將清除任何以前的轉換，這就是爲什麼對象返回到原始位置。

，我想出瞭解決的辦法是，當我們進行懸停動畫，我們還需要進行任何電流施加的轉動和旋轉的時候，我們需要確保縮放復位。我也注意到，當旋轉發生時，如果將鼠標懸停在某個塊上，會出現一些奇怪的動畫，並且可能需要在旋轉時禁用懸停。

請參閱的jsfiddle鏈接http://jsfiddle.net/ginja/5yp7D/一個更新的代碼，下面我列出我的變化...

旋轉：

blocks.animate({ transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1" }, 1000);

鼠標懸停：

this.animate({ fill: "#5CBFEB", transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1.2" }, 200);

鼠標移出：

this.animate({ fill: "#cc0000", transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1" }, 200);

我不知道這是否是這樣做的正確的方式，但如果有人有什麼補充或更好的解決方案請不要發表評論或回答

2012-10-03 12:05:22 ginja

我花了相當多的時間試圖幫助你，文檔說，你可以使用el.transform（「」）清除任何轉換;所以我試圖通過鼠標清除它並將鼠標移出，我認爲你擁有的東西肯定會幫助大多數人。 – Neil

我也注意到，如果你把一個對象和旋轉它，如果你要移動它，您可以節省一堆悲傷的，如果你刪除的變換，移動對象並重新轉換。否則，旋轉對象的整個座標系會發生變化。 –

回答