javascript - 获取旋转图像中点的新x，y坐标

我有Google Maps图标，在使用MarkerImage在 map 上绘制之前，需要旋转一定 Angular 。我使用PIL在Python中即时旋转，生成的图像与原始图像大小相同-32x32。例如，使用以下默认Google Maps标记:

，使用以下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时，要使用新的 anchor 。这必须是图标的尖头。默认情况下， anchor 位于底部中间(在x，y坐标中定义为(16,32)，其中(0,0)是左上角)。有人可以告诉我如何轻松地使用JavaScript进行此操作吗？

谢谢。

2011年6月22日更新:
张贴了错误的旋转图像(原始图像是逆时针旋转330度)。我已经改正了。还添加了重新采样(Image.BICUBIC)，使旋转后的图标更清晰。

最佳答案

要计算旋转点的位置，可以使用rotation matrix。

转换为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...]

关于javascript - 获取旋转图像中点的新x，y坐标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6428192/