计算一点绕另一点旋转n度后的坐标（亲测）

Doyle 发布于2019-08-23 18:17 / 3569人阅读

摘要：遇到问题先网上找一找因为自己已经忘完了，搜到好几个如下的答案一假设点为圆心原点，则有计算公式其中顺时针旋转为正，逆时针旋转为负，角度是弧度值，如旋转度转换为弧度为。二若不是原点，则可先将点坐标转换为相对坐标计算，计算结果再加上点坐标。

遇到问题先网上找一找（因为自己已经忘完了……），搜到好几个如下的答案：
一、

假设o点为圆心(原点0,0)，则有计算公式：

b.x = a.xcos(angle) - a.ysin(angle)

b.y = a.xsin(angle) + a.ycos(angle)

其中顺时针旋转为正，逆时针旋转为负，角度angle是弧度值，如旋转30度转换为弧度为：angle = pi/180 * 30。

二、

若o不是原点，则可先将a点坐标转换为相对坐标计算，计算结果再加上o点坐标。

参与计算的a点坐标实际应为 a - 0,由此得出最终计算公式如下：

b.x = ( a.x - o.x)cos(angle) - (a.y - o.y)sin(angle)

b.y = (a.x - o.x)sin(angle) + (a.y - o.y)cos(angle)

上面的内容是引用其他朋友的说明，结果坑了我半天，都是没做实验的吧，
直接上正解：
前面的步骤都是对的，但是！重点来了！！！！，最终还要加上中心点的坐标横纵坐标即：

b.x = ( a.x - o.x)cos(angle) - (a.y - o.y)sin(angle) + o.x

b.y = (a.x - o.x)sin(angle) + (a.y - o.y)cos(angle) + o.y

GPU云服务器云服务器哪些云vps好一点哪里云主机便宜一点哪些云主机好一点哪里云vps便宜一点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104962.html

移动端图片上传旋转、压缩的解决方案

摘要：上传的文件经过就可以实现预览图片了，这方面不清楚的可以查看进阶系列文件上传下载旋转旋转需要用到的方法。前言在手机上通过网页 input 标签拍照上传图片，有一些手机会出现图片旋转了90度d的问题，包括 iPhone 和个别三星手机。这些手机竖着拍的时候才会出现这种问题，横拍出来的照片就正常显示。因此，可以通过获取手机拍照角度来对照片进行旋转，从而解决这个问题。 Orientatio...

blair 2019-08-20 17:38 评论0 收藏0
基于javascript的拖拽类封装

摘要：参考了很多别人写的代码，最后终于弄明白了其中的原理，自己也写了一个。效果图如下地址如下拖拽类封装代码使用方法引入和对应的。如果没有为的结构，就创建。鼠标移动时，记录再次计算鼠标位置距离中心位置的的反正切函数。在公司做一个h5编辑平台，中间需要对元素进行拖拽、放大缩小、旋转等操作，且需要对文本、图片、音乐组件等不同元素都可以具备这些功能。参考了很多别人写的代码，最后终于弄明白了其中的原...

afishhhhh 2019-08-26 13:49 评论0 收藏0
巧妙使用transform实现环形路径平移动画

摘要：参考环形路径平移的方案，做一些调整，就可以得到型路径平移的写法这里初始把元素放在了上面那个半圆环的圆心，然后在的关键帧位置切换为下面的半圆环路径。最近在CSS Secrets一书看到了这样一节：让一个元素沿环形路径平移。这是一个css动画的问题，但却没有看上去那么简单，其关键点是元素是平移的，也就是说，元素自身并不发生旋转，只是稳定地沿着一个环形的路径移动，像这样： showImg(...

KevinYan 2019-08-29 11:31 评论0 收藏0