gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 17:55:38 29 4
gpt4 key购买 nike

我有谷歌地图图标,我需要在使用 MarkerImage 在 map 上绘制之前将其旋转一定 Angular .我使用 PIL 在 Python 中进行即时旋转,生成的图像与原始图像大小相同 - 32x32。例如,使用以下默认的 Google map 标记: icon before rotation,使用以下 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)

生成的图像是 icon rotated 30 degrees counter-clockwise

棘手的一点是在使用新的旋转图像创建 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/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com