获取旋转图像中某个点的新 x,y 坐标 [英] Get new x,y coordinates of a point in a rotated image

问题描述

我有 Google 地图图标，在使用 .

转换成 JavaScript，计算旋转点:

函数旋转(x，y，xm，ym，a){var cos = Math.cos,sin = Math.sin,a = a * Math.PI/180,//转换为弧度，因为那是//JavaScript 喜欢//减去中点，使中点平移到原点//并再次添加到最后xr = (x - xm) * cos(a) - (y - ym) * sin(a) + xm，yr = (x - xm) * sin(a) + (y - ym) * cos(a) + ym;返回 [xr, yr];}旋转(16、32、16、16、30)；//[8, 29.856...]

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

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.

解决方案

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

这篇关于获取旋转图像中某个点的新 x,y 坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！