資訊專欄INFORMATION COLUMN
摘要：在拖拽旋轉(zhuǎn)圖片的實現(xiàn)中，最符合的就是上面這題的情況，接下來好好說明一下。經(jīng)過按計算機推導(dǎo)出來的結(jié)論，反三角函數(shù)計算出來的結(jié)果是弧度，而一直使用的角表示的其實是角的弧度。拖拽圍繞著圖片的中心旋轉(zhuǎn)，圖片中心作為公式中的原點設(shè)為點使用。
讓我們來看看以下這道題：
已知點A(x1,y1)和點B(x2,y2)，求兩點求與圓點O(x0,y0)的夾角θ的角度：∠θ=arctan[(y2-y0)/(x2-x0)]-arctan[(y1-y0)/(x1-x0)]
是否有股熟悉的味道？涉及的數(shù)學(xué)知識是初中便開始教的三角函數(shù)。在拖拽旋轉(zhuǎn)圖片的實現(xiàn)中，最符合的就是上面這題的情況，接下來好好說明一下。
分解公式定義：
穿過點A和原點的直線與x軸夾角為∠A
穿過點B和原點的直線與x軸夾角∠B
先求∠A兩直角邊a=y1-y0和b=x1-x0
根據(jù)反正切函數(shù)求出∠A，arctan(a/b)
接著∠B兩直角邊a"=y2-y0和b"=x2-x0
根據(jù)反正切函數(shù)求出∠B，arctan(a"/b")
最后根據(jù)公式∠θ=∠A-∠B得出的夾角便是我們需要求得的弧度。
弄清楚公式的結(jié)果這里不得不提的是反正切這類反三角函數(shù)：
反正切函數(shù)（inverse tangent）是數(shù)學(xué)術(shù)語，反三角函數(shù)之一，指函數(shù)y=tanx的反函數(shù)。計算方法：設(shè)兩銳角分別為A，B，則有下列表示：若tanA=1.9/5，則 A=arctan1.9/5；若tanB=5/1.9，則B=arctan5/1.9。如果求具體的角度可以查表或使用計算機計算。
經(jīng)過按計算機推導(dǎo)出來的結(jié)論，反三角函數(shù)計算出來的結(jié)果是弧度，而一直使用的∠A角表示的其實是角A的弧度。
弧度嚴格來說已經(jīng)是此次拖拽需要的結(jié)果，相信不是css大牛的各位接觸到的知識面還得提一下，像css關(guān)于旋轉(zhuǎn)的單位包含：
rad：弧度(Radians)，圓共有2PI弧度。
deg：度(Degress)，圓共有360度。
turn：轉(zhuǎn)(Turns)，圓共1圈。
直接使用弧度設(shè)置選擇也是可以的transform: rotate(.5 rad)，但是轉(zhuǎn)為度(deg)能讓數(shù)值更直觀可讀。
弧度(rad)換算成角度(deg)：x=∠A*(180/π)獲取所需要的兩點
這里說說大家都知道的拖拽流程：
點擊圖像
移動鼠標
松開鼠標
點擊圖像的時候采集所的點（設(shè)為點A），在移動鼠標時記錄另一個點（設(shè)為點B），這樣手上就有兩個點。拖拽圍繞著圖片的中心旋轉(zhuǎn)，圖片中心作為公式中的原點（設(shè)為點O）使用。
在處理上，在點擊圖像時就計算出∠A的弧度，然后在移動鼠標的過程再計算∠B的弧度，并用∠A減∠B得出實際拖拽中旋轉(zhuǎn)了多少度，具體可看下面例子。
https://codepen.io/packy1980/...
勾上[記錄上次旋轉(zhuǎn)的弧度]后便是一個完整的拖拽旋轉(zhuǎn)例子
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97064.html
摘要：移動的過程中可以通過拿到元素的坐標，記為。向上滾動放大，向下滾動縮小這里要注意控制最小縮放值。還要注意的是圖片在邊界的縮放，不然圖片可能會移動在屏幕外。代碼實現(xiàn)控制滾輪縮放計算縮放后的大小每一次滾輪限制最小不讓由于縮小消失在視野中 cxj-react-image 用法如下： yarn add cxj-react-image // npm i cxj-react-image import...
這只是個開頭 說在最前面,本文是一個系列文章的開頭, 這個系列里我會講如何用typescript開發(fā)一款支持pc和手機端的手勢庫any-touch, 以及通過jest讓你的代碼測試覆蓋率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目錄 用TypeScript開發(fā)手勢庫 - (2)tsconfig.json & r...
摘要：文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。但前提是需要約定傳入值和返回類型。 文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。大多文章之所以只說上傳這步估計是簡單易入門，但是實際工作時就會發(fā)現(xiàn)上傳文件這個功能上是簡單的，邏輯上卻比較復(fù)雜。 先說一下需求和功能點： 需求：上傳文件到服務(wù)器 功能：上傳 單這么...
摘要：中的拖拽縮放旋轉(zhuǎn)上數(shù)學(xué)知識準備。表示整個區(qū)域，表示中的元素。事實上，工作上的需求并沒有要求旋轉(zhuǎn)，只需要實現(xiàn)拖拽縮放即可。 寫在前面 showImg(https://segmentfault.com/img/bVbonep?w=283&h=306); 本文首發(fā)于公眾號：符合預(yù)期的CoyPan demo體驗地址及代碼在這里：請用手機或瀏覽器模擬手機訪問 上一篇文章介紹了canvas中的拖拽...
閱讀 2039·2023-04-25 23:30
閱讀 1458·2021-11-24 10:18
閱讀 3097·2021-10-09 09:54
閱讀 2024·2021-10-08 10:05
閱讀 3447·2021-09-23 11:21
閱讀 3170·2019-08-30 15:52
閱讀 1569·2019-08-30 13:05
閱讀 1068·2019-08-30 13:02
