拖拽拉伸加上旋轉角度的數學原理

mengera88 發布于2019-08-23 11:29 / 2069人閱讀

摘要：最近在寫公司項目的時候遇到了拖拽拉伸加旋轉組件然后改變其高度寬度的需求，原本以為拖拽那么簡單，拉伸的話就改變和就好了，因為拖拽拉伸的方位有八個點，所有一個個計算總會解決的，神奇的現象起初在沒有加上旋轉角度的時候測試了八個方位的拖拽拉伸是沒有

最近在寫公司項目的時候遇到了拖拽拉伸加旋轉組件然后改變其高度寬度的需求，原本以為‘拖拽那么簡單，拉伸的話就改變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時間加上秒

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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