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

2021-09-13 08:52:07 字數 1371 閱讀 5814

最近在寫公司專案的時候遇到了拖拽拉伸加旋轉元件然後改變其高度寬度的需求,原本以為『拖拽那麼簡單,拉伸的話就改變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點的位置橫向不變了,這裡只例舉了橫座標的情況,縱座標的原理類似

設定文字旋轉角度

如果需要將報表單元格內的文字在展現時實現旋轉效果,我們可以設定單元格資料型別為html來解決。下面我們就來具體看乙個簡單的例子。第一步,設計報表如下 其中b2 b3 b4 b5為html型別。b2 潤幹報表 b3 潤幹報表 b4 潤幹報表 b5 潤幹報表 其中,潤幹報表 中rotation的值可以為...

螢幕旋轉角度的處理

原文章 螢幕旋轉角度的處理,文章說得好棒!android開發實踐 螢幕旋轉的處理 2013 09 24 20 40 10 標籤 開發 android 旋轉orientation 作者資訊和本宣告。否則將追究法律責任。正文 begin 最近開發android camera相關的程式,被螢幕旋轉搞得頭大...

core animation使用旋轉角度,搖擺效果

今天看某位同學問時鐘效果怎麼做,我首先想到的就是view的屬性transform裡面有旋轉角度的方法,當然還有其他的方法,只是我感覺這個最簡單 尷尬 有兩種方式,乙個是定時器控制動畫,乙個是利用core animation的重複動畫屬性 void animation completion bool ...