前端实验手札——拖拽旋转图片的实现及思路

tianren124 发布于2019-08-23 11:31 / 2503人阅读

摘要：在拖拽旋转图片的实现中，最符合的就是上面这题的情况，接下来好好说明一下。经过按计算机推导出来的结论，反三角函数计算出来的结果是弧度，而一直使用的角表示的其实是角的弧度。拖拽围绕着图片的中心旋转，图片中心作为公式中的原点设为点使用。

让我们来看看以下这道题：

已知点A(x1,y1)和点B(x2,y2)，求两点求与圆点O(x0,y0)的夹角θ的角度：∠θ=arctan[(y2-y0)/(x2-x0)]-arctan[(y1-y0)/(x1-x0)]

是否有股熟悉的味道？涉及的数学知识是初中便开始教的三角函数。在拖拽旋转图片的实现中，最符合的就是上面这题的情况，接下来好好说明一下。

分解公式

定义：

穿过点A和原点的直线与x轴夹角为∠A

穿过点B和原点的直线与x轴夹角∠B

先求∠A两直角边a=y1-y0和b=x1-x0

根据反正切函数求出∠A，arctan(a/b)

接着∠B两直角边a"=y2-y0和b"=x2-x0

根据反正切函数求出∠B，arctan(a"/b")

最后根据公式∠θ=∠A-∠B得出的夹角便是我们需要求得的弧度。

弄清楚公式的结果

这里不得不提的是反正切这类反三角函数：

反正切函数（inverse tangent）是数学术语，反三角函数之一，指函数y=tanx的反函数。计算方法：设两锐角分别为A，B，则有下列表示：若tanA=1.9/5，则 A=arctan1.9/5；若tanB=5/1.9，则B=arctan5/1.9。如果求具体的角度可以查表或使用计算机计算。

经过按计算机推导出来的结论，反三角函数计算出来的结果是弧度，而一直使用的∠A角表示的其实是角A的弧度。

弧度严格来说已经是此次拖拽需要的结果，相信不是css大牛的各位接触到的知识面还得提一下，像css关于旋转的单位包含：

rad：弧度(Radians)，圆共有2PI弧度。

deg：度(Degress)，圆共有360度。

turn：转(Turns)，圆共1圈。

直接使用弧度设置选择也是可以的transform: rotate(.5 rad)，但是转为度(deg)能让数值更直观可读。

弧度(rad)换算成角度(deg)：x=∠A*(180/π)

获取所需要的两点

这里说说大家都知道的拖拽流程：

点击图像

移动鼠标

松开鼠标

点击图像的时候采集所的点（设为点A），在移动鼠标时记录另一个点（设为点B），这样手上就有两个点。拖拽围绕着图片的中心旋转，图片中心作为公式中的原点（设为点O）使用。

在处理上，在点击图像时就计算出∠A的弧度，然后在移动鼠标的过程再计算∠B的弧度，并用∠A减∠B得出实际拖拽中旋转了多少度，具体可看下面例子。

https://codepen.io/packy1980/...

勾上[记录上次旋转的弧度]后便是一个完整的拖拽旋转例子

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

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

多功能React影像组件(拖拽、水印、缩放、切换、旋转)

摘要：移动的过程中可以通过拿到元素的坐标，记为。向上滚动放大，向下滚动缩小这里要注意控制最小缩放值。还要注意的是图片在边界的缩放，不然图片可能会移动在屏幕外。代码实现控制滚轮缩放计算缩放后的大小每一次滚轮限制最小不让由于缩小消失在视野中 cxj-react-image 用法如下： yarn add cxj-react-image // npm i cxj-react-image import...

soasme 2019-08-23 13:56 评论0 收藏0
用typescript开发手势库 - (1)web开发常用手势有哪些?

这只是个开头说在最前面,本文是一个系列文章的开头, 这个系列里我会讲如何用typescript开发一款支持pc和手机端的手势库any-touch, 以及通过jest让你的代码测试覆盖率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目录用TypeScript开发手势库 - (2)tsconfig.json & r...

raise_yang 2019-08-23 16:03 评论0 收藏0
前端临床手札——文件上传

摘要：文件上传基本是学习前端路上必定遇到的例子，然而网上能找到的都是单单满足上传这步的案例。但前提是需要约定传入值和返回类型。文件上传基本是学习前端路上必定遇到的例子，然而网上能找到的都是单单满足上传这步的案例。大多文章之所以只说上传这步估计是简单易入门，但是实际工作时就会发现上传文件这个功能上是简单的，逻辑上却比较复杂。先说一下需求和功能点：需求：上传文件到服务器功能：上传单这么...

SexySix 2019-08-19 18:07 评论0 收藏0
canvas中的拖拽、缩放、旋转 (下) —— 代码实现

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

pumpkin9 2019-08-23 15:13 评论0 收藏0