CODEWITHSUNDEEP
raphael
Wesley Skeen
Wesley Skeen

Reputation: 8285

Rotate an image from a point in Raphael

I have an image that I want to rotate from a certain point. The Image is of size 100px x 100px.

I want to rotate it at around a certain point from within the Image. Think of a compass. The point I would want to rotate it around would be directly where the needle is. So In my example I would like to rotate the image around the point 80px left 80px top from within the image. Is this possible or would I have to create some sort of gif.

Upvotes: 0

Views: 158

Answers (1)

psu
psu

Reputation: 379

here is an example 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>

You can play with the transform to achieve the desired result http://raphaeljs.com/reference.html#Element.transform

EDIT: In order for this to work you must use Raphael 2

Upvotes: 2

Related Questions