Monday, May 20, 2024
Homepage · python
 Popular · Latest · Hot · Upcoming
16
rated 0 times [  19] [ 3]  / answers: 1 / hits: 22074  / 13 Years ago, tue, june 21, 2011, 12:00:00

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
, 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



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.


More From » python
 Answers
5

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

[#91588] Monday, June 20, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
lailab
Add To Favorites
Follow
Total Points: 706
Total Questions: 102
Total Answers: 95
Location: Falkland Islands
Member since Mon, Jul 13, 2020
4 Years ago
lailab questions
Sat, Jan 15, 22, 00:00, 2 Years ago
Fri, Feb 21, 20, 00:00, 4 Years ago
Tue, Feb 4, 20, 00:00, 4 Years ago
Sun, Apr 14, 19, 00:00, 5 Years ago
Mon, Apr 1, 19, 00:00, 5 Years ago
View All
;