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

最近在寫公司項目的時候遇到了拖拽拉伸加旋轉組件而後改變其高度寬度的需求，本來覺得‘拖拽那麼簡單，拉伸的話就改變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點的位置橫向不變了，這裏只例舉了橫座標的狀況，縱座標的原理相似

最終效果