拖拽拉伸加上旋转角度的数学原理

mengera88 发布于2019-08-23 11:29 / 1962人阅读

摘要：最近在写公司项目的时候遇到了拖拽拉伸加旋转组件然后改变其高度宽度的需求，原本以为拖拽那么简单，拉伸的话就改变和就好了，因为拖拽拉伸的方位有八个点，所有一个个计算总会解决的，神奇的现象起初在没有加上旋转角度的时候测试了八个方位的拖拽拉伸是没有

最近在写公司项目的时候遇到了拖拽拉伸加旋转组件然后改变其高度宽度的需求，原本以为‘拖拽那么简单，拉伸的话就改变width和height就好了’，因为拖拽拉伸的方位有八个点，所有一个个计算总会解决的，but

神奇的现象

起初在没有加上旋转角度的时候测试了八个方位的拖拽拉伸是没有问题的，而且其本身实现方法不难，例如拖拽的是最顶部的中心点则改变其组件的top数值和height数值就好了，但如果加上了旋转角度之后、、似乎变得诡异了起来

分析原因

我们知道，旋转的角度可以通过CSS3的transform属性的rotate值来改变，然后如果不改变坐标圆点则默认是组件的中心点，所以如果一旦rotate值发生改变其组件的整个坐标系也随之改变，我大概粗略的画了下图

图中蓝色的方块比作组件，其坐标系是蓝色的XY坐标系，加入旋转角度为45度的话，则坐标系就变成了橙色的XY坐标系

这个时候如果再用以蓝色坐标系为参考系来计算拖拽拉伸的数值肯定是不正确的，此时我们借助于坐标系的旋转变换公式，还记得吗？

理清需求

因为我们在拉伸顶部的时候只计算了top值和height值，忽略了left值，以为拉伸顶部只改变只两个值就好了，但其实这是理想情况，譬如上图中的点V，我们在旋转到45度的时候，拉伸顶部要保证V点的位置不变，注意！只是保证V点在蓝色的原始坐标系中的位置，那么势必还是要计算left值的，我又大概粗略的画了下图

为了好计算，我假设组件的高度为100，被拉伸之后的高度为200，那么拉伸到200的时候其坐标系为深灰色的X`Y`坐标系，答案显而易见，V点到深灰色坐标原点的横坐标距离等于 V点到橙色坐标原点的横坐标距离加上这两个坐标原点的横坐标距离

我最后大概又画了下图

也就是说我们在拖拽拉伸的时候要保证这个等式成立，也就是E`F` = EF + OO`
那么，一我们知道了角度rotate、二我们也知道了两个坐标系圆点之间的距离OO`(注:sin(45度) * (200 - 100) / 2)，那么就能保证V点的位置横向不变了，这里只例举了横坐标的情况，纵坐标的原理类似

最终效果

GPU云服务器云服务器图像识别旋转角度计算元素拖拽 js 原理最简便的数学算法 js时间加上秒

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

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

canvas中的拖拽、缩放、旋转 (下) —— 代码实现

摘要：中的拖拽缩放旋转上数学知识准备。表示整个区域，表示中的元素。事实上，工作上的需求并没有要求旋转，只需要实现拖拽缩放即可。写在前面 showImg(https://segmentfault.com/img/bVbonep?w=283&h=306); 本文首发于公众号：符合预期的CoyPan demo体验地址及代码在这里：请用手机或浏览器模拟手机访问上一篇文章介绍了canvas中的拖拽...

pumpkin9 2019-08-23 15:13 评论0 收藏0
前端实验手札——拖拽旋转图片的实现及思路

摘要：在拖拽旋转图片的实现中，最符合的就是上面这题的情况，接下来好好说明一下。经过按计算机推导出来的结论，反三角函数计算出来的结果是弧度，而一直使用的角表示的其实是角的弧度。拖拽围绕着图片的中心旋转，图片中心作为公式中的原点设为点使用。让我们来看看以下这道题：已知点A(x1,y1)和点B(x2,y2)，求两点求与圆点O(x0,y0)的夹角θ的角度：∠θ=arctan[(y2-y0)/(x...

tianren124 2019-08-23 11:31 评论0 收藏0
基于javascript的拖拽类封装

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

afishhhhh 2019-08-26 13:49 评论0 收藏0
HTML5中手势原理分析与数学知识的实践

摘要：中手势原理分析与数学知识的实践引言在这触控屏的时代，人性化的手势操作已经深入了我们生活的每个部分。这篇博文主要是解析了移动端常用手势的原理，及从前端的角度学习过程中所使用的数学知识。 HTML5中手势原理分析与数学知识的实践引言在这触控屏的时代，人性化的手势操作已经深入了我们生活的每个部分。现代应用越来越重视与用户的交互及体验，手势是最直接且最为有效的交互方式，一个好的手势交互，能...

rollback 2019-08-20 18:33 评论0 收藏0