旋轉從Raphael中的一個圖像

Question

我有一個圖像，我想從某個點旋轉。該圖片的大小爲100px x 100px。

我想旋轉它在圖像內的某個點附近。想想一個指南針。我想旋轉它的點將直接在針的位置。 所以在我的例子中，我想旋轉圖像周圍80px左側80px頂部的圖像。這是可能的或我會不得不創建某種類型的gif。

Answer 1

這裏有一個例子 http://jsfiddle.net/KtB3G/1/

<div id="container"> 
    <img id="img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Rectangle_example.svg/220px-Rectangle_example.svg.png"> 
</div> 

<script> 
    $(function() { 
     var src = $("#img").attr("src"); 
     $("#container").html(""); 
     var paper = Raphael($("#container")[0], 500, 500); 

     var image = paper.image(src, 0, 0, 220, 130); 

     $("#container").click(function() { 
      image.animate({ 
       transform: "r360t50,50" 
      }, 1000, ">"); 
     }); 
    }); 
</script> 

您可以用玩變換，以達到預期的效果http://raphaeljs.com/reference.html#Element.transform

編輯： 爲了這個工作，你必須使用拉斐爾2