Add a Rotation Center Point

[GoogleCodeExporter]

Would be nice if a center point of the rotation could be specified rather than 
rotating from the center of the image every time.

Original issue reported on code.google.com by kyle%exc...@gtempaccount.com on 29 Jun 2010 at 4:03

[GoogleCodeExporter]

I agree.

Original comment by jhayz...@gmail.com on 27 Aug 2010 at 8:40

[GoogleCodeExporter]

On a TODO list (but not trival one unfortunatelly)

Original comment by wil...@gmail.com on 27 Aug 2010 at 8:59

[GoogleCodeExporter]

Original comment by wil...@gmail.com on 25 Jan 2011 at 11:39

• Changed title: Add a Rotation Center Point (need research, quite challenging on a CSS solution)
• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

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.

Original comment by drep...@gmail.com on 14 Jun 2011 at 11:54

[GoogleCodeExporter]

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

Original comment by wil...@gmail.com on 15 Jun 2011 at 6:19

[GoogleCodeExporter]

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.

Original comment by francois...@gmail.com on 8 Sep 2011 at 9:44

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

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).

Original comment by bauzl1...@gmail.com on 12 Dec 2011 at 4:12

[GoogleCodeExporter]

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

Original comment by sam...@gmail.com on 2 Jun 2012 at 5:54

[GoogleCodeExporter]

Original comment by wil...@gmail.com on 26 Nov 2012 at 9:00

• Changed title: Add a Rotation Center Point

[GoogleCodeExporter]

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

Original comment by wil...@gmail.com on 11 Jul 2013 at 2:37

• Changed state: Fixed