Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get new x,y coordinates of a point in a rotated image

I have Google Maps icons which I need to rotate by certain angles before drawing on the map using MarkerImage. I do the rotation on-the-fly in Python using PIL, and the resulting image is of the same size as the original - 32x32. For example, with the following default Google Maps marker: icon before rotation , a 30 degrees conter-clockwise rotation is achieved using the following python code:

# full_src is a variable holding the full path to image
# rotated is a variable holding the full path to where the rotated image is saved
image = Image.open(full_src)
png_info = image.info
image = image.copy()
image = image.rotate(30, resample=Image.BICUBIC)
image.save(rotated, **png_info)

The resulting image is icon rotated 30 degrees counter-clockwise

The tricky bit is getting the new anchor point to use when creating the MarkerImage using the new rotated image. This needs to be the pointy end of the icon. By default, the anchor point is the bottom middle [defined as (16,32) in x,y coordinates where (0,0) is the top left corner]. Can someone please explain to me how I can easily go about this in JavaScript?

Thanks.

Update 22 Jun 2011: Had posted the wrong rotated image (original one was for 330 degrees counter-clockwise). I've corrected that. Also added resampling (Image.BICUBIC) which makes the rotated icon clearer.

like image 959
Simon Kagwi Avatar asked Jun 21 '11 15:06

Simon Kagwi


People also ask

How do you calculate new coordinates after rotation?

Finding the Coordinates of a Polygon After a RotationStep 1: Find and label all vertices of the original polygon. Step 2: Find the coordinates of the vertices of the rotated polygon using the formulas: x′ → xcos(θ)−ysin(θ) x ′ → x cos ⁡ ( θ ) − y sin ⁡

What happens to the x and y coordinates when a figure is rotated?

90° clockwise rotation: (x,y) becomes (y,-x) 90° counterclockwise rotation: (x,y) becomes (-y,x) 180° clockwise and counterclockwise rotation: (x, y) becomes (-x,-y)

What is rotation equation for point x/y with angle theta in anticlockwise direction?

Answer : `A=[(cos theta,-sin theta),(sin theta,cos theta)]`


1 Answers

To calculate the position of a rotated point you can use a rotation matrix.

Converted into JavaScript, this calculates the rotated point:

function rotate(x, y, xm, ym, a) {
    var cos = Math.cos,
        sin = Math.sin,

        a = a * Math.PI / 180, // Convert to radians because that is what
                               // JavaScript likes

        // Subtract midpoints, so that midpoint is translated to origin
        // and add it in the end again
        xr = (x - xm) * cos(a) - (y - ym) * sin(a)   + xm,
        yr = (x - xm) * sin(a) + (y - ym) * cos(a)   + ym;

    return [xr, yr];
}

rotate(16, 32, 16, 16, 30); // [8, 29.856...]
like image 142
pimvdb Avatar answered Sep 24 '22 21:09

pimvdb