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

问题描述

我有谷歌地图的图标，我需要通过特定角度使用地图<一上绘制前旋转href=\"http://$c$c.google.com/apis/maps/documentation/javascript/reference.html#MarkerImage\">MarkerImage.我做即时使用PIL在Python的旋转，并且产生的图像是相同的尺寸与原始的 - 32×32。例如，下面的默认谷歌地图标记：

，一个30度康特时针旋转使用以下蟒code实现的：

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

棘手位获得新的定位点创建使用新旋转的图像的MarkerImage时使用。这需要图标的尖结束。缺省情况下，锚固点是底部中间[x中定义为（16,32），y坐标，其中（0,0）是左上角。可有人请向我解释，我怎么能轻松地去了解这个在JavaScript中？

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?

感谢。

更新2011年6月22：
已经贴错了旋转的图像（原是逆时针330度）。我已经纠正了。还增加了采样（Image.BICUBIC），使旋转图标清晰。

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.

，这个计算旋转点：

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屋！