資訊專欄INFORMATION COLUMN
摘要：在拖拽旋轉圖片的實現中，最符合的就是上面這題的情況，接下來好好說明一下。經過按計算機推導出來的結論，反三角函數計算出來的結果是弧度，而一直使用的角表示的其實是角的弧度。拖拽圍繞著圖片的中心旋轉，圖片中心作為公式中的原點設為點使用。
讓我們來看看以下這道題：
已知點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/...
勾上[記錄上次旋轉的弧度]后便是一個完整的拖拽旋轉例子
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97064.html
摘要：移動的過程中可以通過拿到元素的坐標，記為。向上滾動放大，向下滾動縮小這里要注意控制最小縮放值。還要注意的是圖片在邊界的縮放，不然圖片可能會移動在屏幕外。代碼實現控制滾輪縮放計算縮放后的大小每一次滾輪限制最小不讓由于縮小消失在視野中 cxj-react-image 用法如下： yarn add cxj-react-image // npm i cxj-react-image import...
這只是個開頭 說在最前面,本文是一個系列文章的開頭, 這個系列里我會講如何用typescript開發一款支持pc和手機端的手勢庫any-touch, 以及通過jest讓你的代碼測試覆蓋率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目錄 用TypeScript開發手勢庫 - (2)tsconfig.json & r...
摘要：文件上傳基本是學習前端路上必定遇到的例子，然而網上能找到的都是單單滿足上傳這步的案例。但前提是需要約定傳入值和返回類型。 文件上傳基本是學習前端路上必定遇到的例子，然而網上能找到的都是單單滿足上傳這步的案例。大多文章之所以只說上傳這步估計是簡單易入門，但是實際工作時就會發現上傳文件這個功能上是簡單的，邏輯上卻比較復雜。 先說一下需求和功能點： 需求：上傳文件到服務器 功能：上傳 單這么...
摘要：中的拖拽縮放旋轉上數學知識準備。表示整個區域，表示中的元素。事實上，工作上的需求并沒有要求旋轉，只需要實現拖拽縮放即可。 寫在前面 showImg(https://segmentfault.com/img/bVbonep?w=283&h=306); 本文首發于公眾號：符合預期的CoyPan demo體驗地址及代碼在這里：請用手機或瀏覽器模擬手機訪問 上一篇文章介紹了canvas中的拖拽...
閱讀 2022·2023-04-25 23:30
閱讀 1452·2021-11-24 10:18
閱讀 3069·2021-10-09 09:54
閱讀 2017·2021-10-08 10:05
閱讀 3431·2021-09-23 11:21
閱讀 3161·2019-08-30 15:52
閱讀 1560·2019-08-30 13:05
閱讀 1056·2019-08-30 13:02
