获取旋转图像中某点的新x,y坐标

Question

我有谷歌地图图标,我需要在使用MarkerImage在地图上绘制之前按特定角度旋转.我使用PIL在Python中即时轮换,结果图像与原始图像大小相同 - 32x32.例如,使用以下默认的Google地图标记: ,使用以下python代码实现30度顺时针旋转:

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

得到的图像是

棘手的一点是在使用新的旋转图像创建MarkerImage时使用新的锚点.这需要是图标的尖端.默认情况下,锚点是底部中间[在x,y坐标中定义为(16,32),其中(0,0)是左上角].有人可以向我解释如何在JavaScript中轻松解决这个问题吗？

谢谢.

2011年6月22日更新: 发布了错误的旋转图像(原始图像是逆时针旋转330度).我已经纠正了这一点.还添加了重采样(Image.BICUBIC),使旋转的图标更清晰.

Answer 1

要计算旋转点的位置,可以使用旋转矩阵.

转换为JavaScript,计算旋转点:

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

Answer 2

旋转公式约为0,0是:

x1 = cos(theta) x0 - sin(theta) y0
y1 = sin(theta) x0 + cos(theta) y0

但这是常规轴,旋转约为0,0.PIL旋转顺时针方向,带有"图形"轴.另外,它位于图像的中心附近.最后令人困惑的是图像的大小可能会发生变化,这需要在最终结果中加以考虑.

步骤:取原点,减去图像中心,应用"图形轴"校正旋转,找到新的图像尺寸,加回新图像的中心位置.

使用图形轴旋转是:

x1 = cos(theta) x0 + sin(theta) y0
y1 = -sin(theta) x0 + cos(theta) y0

16,32 - 16,16为0,16.顺时针旋转30度(根据你的图像)给出一个点cos(-30)*0 + sin(-30)*16,-sin(-30)*0 + cos(-30)*16 = -8,13.86.最后一步是添加旋转位置的中心位置.