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