如何获取在第四象限内的点围绕另一个点旋转后的位置?

假设对图片上任意点(x,y),绕一个坐标点(rx0,ry0)顺时针旋转a角度后的新的坐标设为(x0, y0),有公式:

x0= (x - rx0)cos(a) - (y - ry0)sin(a) + rx0 ;

y0= (x - rx0)sin(a) + (y - ry0)cos(a) + ry0 ;

现在我套用这个公式后发现一个问题,在前端页面上旋转一个图片(拖拽旋转)后,假设为逆时针旋转,那么假设点击的起始左边为(122,50),顺时针旋转15弧度后,得到的点的y点反而小于50了

:如下图
image.png

这个公式在坐标轴的第一象限内是没有问题的,但是在前端中touch事件获取的点其实是从(0,0)开始,x,y递增的(点击事件的区域其实在坐标轴的第四象限内,上图画红圈位置)。不知道我有没有表达清楚这个意思。

就是说这个公式获取不到对应的旋转后的点。
有没有懂的或者说遇到过这个问题的,帮忙指点指点一下小弟

阅读 4.5k
4 个回答

想办法抽象成这样子,再减回去
image

这个计算机图形学中有专门的讨论
主要就是这些最终都是数据乘以一个转换矩阵即可直接得出结果。
一般计算时,为了化简,是以旋转轴心为中心来调整坐标体系,计算完后再调整回来(因为调整的过程是直接加或者减旋转中心坐标分量过程)。

你的问题图示其实不清楚,这个公式是没有问题的,问题在与计算机显示中的坐标体系方向性问题,因为图形显示的坐标体系是左上为原点,向右,向下分别是图形x轴和y轴的增长方向,这个和普通坐标系已经存在变换啦,这个变换在处理二者对应时需要添加上去(计算时需要调整)。

你当成第一象限来处理,因为Y轴(和数学上的坐标系相比)是反的,所以角度要反着算

和象限无关系,是坐标系不同,如果坐标原点是左上角, 向右向下递增的时候 :
假设对图片上任意点(x,y),绕一个坐标点(rx0,ry0)逆时针旋转a角度后的新的坐标设为(x0, y0),则公式为:

x0= (x - rx0)cos(a) + (y - ry0)sin(a) + rx0 ;

y0= (x - rx0)cos(a) - (y - ry0)sin(a) + ry0 ;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏