问答

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

作者:admin 2021-04-21 我要评论

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

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

假设对图片上任意点(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递增的(点击事件的区域其实在坐标轴的第四象限内,上图画红圈位置)。不知道我有没有表达清楚这个意思。

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

###

想办法抽象成这样子,再减回去
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 ;

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 如何获取在第四象限内的点围绕另一个点

    如何获取在第四象限内的点围绕另一个点

  • 在el-calendar基础上表头修改的地方

    在el-calendar基础上表头修改的地方

  • 如何部署网页到线上

    如何部署网页到线上

  • github "vue-grid-layout" 任意拖拽

    github "vue-grid-layout" 任意拖拽

腾讯云代理商
海外云服务器