Add a Rotation Center Point about jqueryrotate HOT 11 CLOSED

I agree.

On a TODO list (but not trival one unfortunatelly)

A temporary solution for me would be to reposition the image until this feature 
is completed.  I'm still trying to figure out how to do this though.

Repositioning image is obvoiusly the way to go here, however it gives alot of 
problems when positioning thats I mention that this is not trival o_O

Hi guys.

I am in the same boat as you all.

I have to have an arrow pointing like a fuel gauge dynamically showing how full 
or empty the tank is. 

One solution I can think of to have a center point is to re-size and position 
the image where the center point is the same as the rotation point. This would 
mean the image might have an empty bottom area, but if you are willing to use a 
transparent .png file this might not be a big problem.

I also thought of repositioning the image, but this means for every degree in 
rotation you might have to reposition the image. (Sounds like WAY too much work 
for me).

Hope this idea might help someone.

[deleted comment]

so, I actually managed to do this for a client.
My solution was quite simple (not for IE8 though).

I made a new element <div> in which I made the image as background and 
positioned it, so that the rotate point is exactly in the middle of that div.
Now when you rotate the div (with the image as background), you get the exact 
center point where you wanted it to rotate.

I small example is here:
http://true-web.ch/map18/ (click on image, there on a number, then press on/off 
to show the scale which you can rotate).

I had to rotate some drawing(lines and circle drawn on image ) with respect to 
image .One way is to use use raphael library. 
Raphael library's rotate function  allows to mention center of rotation.Below 
is the code section . 

                    var angle = $("#angle" + selectedImgId).val();
                    var cx = $('#' + selectedImgId).width() / 2;
                    var cy = $('#' + selectedImgId).height() / 2;
                    elt.rotate(angle, cx, cy);
                    if (flipClickedCounter[selectedImgId-1] % 2 != 0) {
                        elt.scale(-1, 1,cx,cy);
                    }

                    if (i == collection[j].length - 1) {
                        var element = paperArray[selectedImgId - 1].circle(point2[0], point2[1], 3).attr({ fill: "#119" }).attr("stroke", "#119");
                        element.rotate(angle, cx, cy);
                        if (flipClickedCounter[selectedImgId-1] % 2 != 0) {
                            element.scale(-1, 1,cx,cy);
                        }
                    }
                }

hope this helps someone

Finally added in jQueryRotate2. Let me know of any issues.