javascript拖拽精灵放大缩小旋转的方法详解编程语言
2023-06-13 09:15:22 时间
javascript拖拽精灵放大缩小旋转的方法
玩过美图秀秀的人知道 可以添加挂件 能够放大缩小旋转 我画了个图 就明白原理了
2个小红点就是选中点拖动的起点和终点
放大到AB的长度 然后旋转C度就可以了
具体算法
1 获取中间精灵坐标
2 计算圆心到第二个红点的角度(直接设置这个角度就可以了)
可以用atan2函数(假设圆心在00点 需要换算下)
3计算AB距离更简单了 先计算B的坐标 知道B与X夹角的度数 坐标计算就是用
x1 = x0 + r * cos(angle * Math.PI / 180) y1 = y0 + r * sin(angle * Math.PI/180)
就搞定了
A坐标X 计算出来 后 看的出来与Y轴对称 那就是 A坐标X*2 就是AB距离了
ps:右下角的旋转放大按钮就是 外圆半径+最开始的精灵宽度高度/2计算和 左上角 那就是X Y加负数就可以了
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/18771.html
cjava相关文章
- 【原创】JavaScript的基本知识点和Splice()、join()方法。
- JavaScript学习总结(十六)——Javascript闭包(Closure)详解编程语言
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- JavaScript正则表达式的方法详解编程语言
- javaScript常用方法详解编程语言
- javascript tweenmax做倒计时的方法详解编程语言
- javascript canvas 清除图片空白多余的方法详解编程语言
- javascript实现监听页面1分钟没操作的方法详解编程语言
- javascript 调用WebAssembly的方法详解编程语言
- javascript 过滤中文汉字和 过滤中文汉字和符号的方法详解编程语言
- 谷歌浏览器调试javascript方法详解编程语言
- javascript高德地图放到网页中的方法详解编程语言
- javascript canvas 生成图片的方法详解编程语言
- javascript腾讯地图放到网页中的方法详解编程语言
- javascript tofixed四舍五入的方法详解编程语言
- 用javascript动态调整iframe高度的方法
- Javascript更新JavaScript数组的uniq方法
- javascript的indexOf忽略大小写的方法
- JavaScript验证浏览器是否支持javascript的方法小结
- javascript实现划词标记划词搜索功能
- Javascript获取链接(url)参数的方法[正则与截取字符串]
- javascript利用控件对windows的操作实现原理与应用
- 基于KMP算法JavaScript的实现方法分析
- 禁用JavaScript控制台调试的方法
- javascript跨域的4种方法和原理详解
- javascript事件冒泡详解和捕获、阻止方法
- JavaScript中的方法调用详细介绍