[英]Finding the coordinates (x,y,z) of vertices of a square plane rotated about its center point in P5 js
[英]Get new x,y coordinates of a point in a rotated image
我有谷歌地图图标,我需要在使用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),使旋转的图标更清晰。
要计算旋转点的位置,可以使用旋转矩阵 。
转换为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...]
旋转公式约为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。 最后一步是添加旋转位置的中心位置。
在图像中,向下是正Y,向右是正X.但是,要应用旋转公式 ,我们需要向上作为正Y.因此,步骤1将应用f(x,y) = f(x,hy)
,其中'h'是图像的高度。 假设图像相对于x0,y0旋转。 然后,您需要将原点转换为此点。 因此,步骤2将是f(x,y) = f(x-x0,y-y0)
。 在这个阶段(即两个步骤之后),你的新坐标将是x-x0
, hy-y0
。 您现在已准备好应用旋转公式
x1 = x*cos(theta) - y*sin(theta)
y1 = xsin(theta) + ycos(theta)
使用在第二步之后获得的x和y的值。 你会得到的
x1 = (x-x0)*cos(theta) - (h-y-y0)*sin(theta)
y1 = (x-x0)*sin(theta) + (h-y-y0)*cos(theta)
现在,撤消在步骤2和步骤1中完成的转换(按此顺序)。
撤消step2后: xNew = x1 + x0
和yNew = y1 + y0
撤消step1后: xNew = x1 + x0
和yNew = h - (y1 + y0)
这给你:
xNew = (x-x0)*cos(theta) - (h-y-y0)*sin(theta) + x0
yNew = -(x-x0)*sin(theta) - (h-y-y0)*cos(theta) + (h-y0)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.