JS如何使用Math.atan2获取两点之间角度的实践案例
本文主要介绍使用如何实现手动拖拽旋转元素的效果。
1、简述
最近在研究如何实现手动控制元素的旋转效果,在网上找了很多,都没有找出类似的实现,因此经过一些调研和计算,最终完美实现效果,在这里记录下来。
2、效果展示
通过手动旋转的方式,实现组件的360度无缝旋转。图示是实现结果的几个截图:
0deg
顺时针转到
66deg
逆时针转到
315deg
转到
180deg
3、实现分析
如图所示,实现难点在于计算出两点间连线的倾斜角 angle
这里需要掌握的几个知识点:
3.1 获取转动的角度
使用 Math.atan2()
函数可以非常高效的实现之,它是返回点与原点之间的倾斜角,如图所示,如果想计算出点 (x1,y1)
与 原点 (cx,cy)
与X轴的角度,只需要执行:
Math.atan2(y1 - cy, x1 - cx)
需要注意的是,它的取值范围是[-PI, PI]。
当 (x1, y1) 在第一象限, 0 < θ < PI/2
当 (x1, y1) 在第二象限 PI/2 < θ≤PI
当 (x1, y1) 在第三象限, -PI < θ < -PI/2
当 (x1, y1) 在第四象限, -PI/2 < θ < 0
3.2 角度与弧度之间的转换
角度 = 弧度 * 180 / Math.PI;
弧度= 角度 * Math.PI / 180;
3.3 组件中心点位置计算
使用getBoundingClientRect()
的方法可以获取出容器的位置信息,用当前位置减去宽/高的一半,即可获取中心点位置。
//中心点
cx = x + width / 2;
cy = y + height / 2;
4、最终代码
/**
* 获得旋转夹角
* @param {*} x1 旋转点1
* @param {*} y1
* @param {*} x2 旋转点2
* @param {*} y2
*/
function getAngle(x1, y1, x2, y2) {
// 获取组件的位置信息
let rect = document.getElementsByClassName('active-ele')[0].getBoundingClientRect();
let {
x,
y,
width,
height
} = rect;
//中心点
let cx = x + width / 2;
let cy = y + height / 2;
//2个点之间的角度获取
let c1 = Math.atan2(y1 - cy, x1 - cx) * 180 / (Math.PI);
let c2 = Math.atan2(y2 - cy, x2 - cx) * 180 / (Math.PI);
let angle;
c1 = c1 <= -90 ? (360 + c1) : c1;
c2 = c2 <= -90 ? (360 + c2) : c2;
//夹角获取
angle = Math.floor(c2 - c1);
angle = angle < 0 ? angle + 360 : angle;
return angle;
}
/**
* 获得旋转夹角
* @param startPos.x 指的是初始位置的x坐标
* @param startPos.y 指的是初始位置的y坐标
* @param startPos.r 指的是初始的旋转角度
*/
let angle = getAngle(startPos.x, startPos.y, e.x, e.y);
let startAngle = startPos.r;
let deg;
// 赋值的旋转角度
let rotate;
// 顺时针旋转
if (e.x - startX > 0) {
deg = startAngle + angle;
rotate = deg > 360 ? deg - 360 : deg;
} else {
// 逆时针旋转
angle = 360 - angle;
deg = startAngle - angle;
rotate = deg < 0 ? deg + 360 : deg;
}
JS如何使用Math.atan2获取两点之间角度的实践案例的更多相关文章
- 转:Math: Math.atan() 与 Math.atan2() 计算两点间连线的夹角
我们可以使用正切操作将角度转变为斜率,那么怎样利用斜率来转换为角度呢?可以利用斜率的反正切函数将他转换为相应的角度.as中有两个函数可以计算反正切,我们来看一下. 1.Math.atan() Math ...
- arcgis for js 之 获取两点之间的距离
换了新公司,接触新行业,半路出家,看着别人的代码,看着api慢慢理解. 需求如下:已知两点坐标求距离. 思路,没有,站在同事的肩膀上踩路子,给的这个链接 https://developers.arcg ...
- JAVA通过经纬度获取两点之间的距离
private static double EARTH_RADIUS = 6378.137; private static double rad(double d) { return d * Math ...
- js通过经纬度计算两点之间的距离
最近这几天在做地图的时候,获取到目的地经纬度和当前所在位置的经纬度,通过这几个参数,用js代码就能获取到这两点之间的直线距离: function (lat1, lng1, lat2, lng2) { ...
- (转)c# math 计算两点之间的角度公式
计算两点之间的角度公式是: 假设点一(X1,Y1),点二(X2,Y2) double angleOfLine = Math.Atan2((Y2 - Y1), (X2 - X2)) * 180 / Ma ...
- js math atan2
在双十二活动中,视觉要求实现一个鼠标跟随运动的的效果,就像“觉”的那个效果类似 其实原理很简单,看鼠标从哪个方向进的及从哪个方向出的,然后区块里绝对定位的浮层就可以根据鼠标方向 运动; 如:在鼠标进入 ...
- 获取经纬度之间两点间真实距离(适用于GoogleMap,BaiduMap,Amap等)
如何获取经纬度之间两点间真实距离(适用于GoogleMap,BaiduMap,Amap等) 目标:使用百度定位sdk开发实时移动距离计算功能,根据经纬度的定位,计算行驶公里数并实时刷新界面显示.大家 ...
- js中的Math
js中的Math Math.round 取最接近的整数 Math.round(-2.7) // -3 Math.ceil 向上取整 Math.ceil(1.1) // 2 Math.floor 向下取 ...
- 数学API Math.atan() 和Math.atan2() 三角函数复习
今天在学习贝塞尔曲线看到需要结合三角函数 以及两个不认识的Api :API Math.atan() 和Math.atan2() 先看下三角函数 正切函数图:(180为一个周期 即45=45+180) ...
随机推荐
- iOS学习笔记(1)--认识Xcode6.1的Interface Builder和常用快捷键
Interface Builder基本界面 红色区域为工具栏(Tool Bar) 蓝色区域为导航区(Navigator Area) 绿色区域为编辑区(Editor Area) 黑色区域是调试区(Deb ...
- sqlalchemy中使用event设置条件触发短信与邮件通知
一.原因 近期在做短信与邮件通知系统.使用到了这一块.例如,当订单完成以后进行邮件短信的通知.虽然可以采用直接调用接口的方式实现,但有几个原因让我希望使用条件触发的方式 1.由于系统中支持线上线下以及 ...
- 判断H5页面环境是否在小程序的webview中
用小程序提供的wx.miniProgram.getEnv可以获取环境参数,但是它有个问题就是无法在非微信环境下判断.所以在使用wx.miniProgram.getEnv前得先判断是否在微信环境中. 解 ...
- BZOJ - 3166 可持久化Trie 维护次大区间
题意:给出\(a[1...n]\),找出一个连续区间\(a[l...r],r>l\),令该区间的次大值为\(a_k\),使得\(a_k⊕a_i,l≤i≤r\)最大,输出全局最优解 (这题意有点别 ...
- API Monitor程序分析工具简介
API Monitor是一个免费软件,可以让你监视和控制应用程序和服务,取得该应用程序的API调用情况. 它是一个强大的工具,看到的应用程序和服务是如何工作的,或跟踪,你在自己的应用程序的问题. AP ...
- 网络编程- 解决黏包现象方案二之struct模块(七)
上面利用struct模块与方案一比较,减少一次发送和接收请求,因为方案一无法知道client端发送内容的长度到底有多长需要和接收OK.多一次请求防止黏包,减少网络延迟
- 自学springboot
参考资料 https://www.renren.io/guide/
- golang io.ReadFull
buf := make([]byte, 10, 10) file, _ := os.Open("./data.txt") n, err := io.ReadFull(file, b ...
- 阿里云Centos7上安装MySQL教程
1 基本安装过程 1.查看系统是否安装了mysql软件 # rpm -qa|grep -i mysql 2.将已经安装过的软件卸载掉.注意:这样的卸载是不彻底,不过这里够用了 # yum remove ...
- 遇到Caused by: java.lang.NoClassDefFoundError: javax/validation/ParameterNameProvider
今天在做spring和hibernate整合的时候遇到这个问题 网上搜找到这里有解决办法 http://blog.csdn.net/jueshengtianya/article/details/122 ...