拖拽拉伸加上旋轉(zhuǎn)角度的數(shù)學(xué)原理

mengera88 發(fā)布于2019-08-23 11:29 / 2076人閱讀

摘要：最近在寫(xiě)公司項(xiàng)目的時(shí)候遇到了拖拽拉伸加旋轉(zhuǎn)組件然后改變其高度寬度的需求，原本以為拖拽那么簡(jiǎn)單，拉伸的話就改變和就好了，因?yàn)橥献Ю斓姆轿挥邪藗€(gè)點(diǎn)，所有一個(gè)個(gè)計(jì)算總會(huì)解決的，神奇的現(xiàn)象起初在沒(méi)有加上旋轉(zhuǎn)角度的時(shí)候測(cè)試了八個(gè)方位的拖拽拉伸是沒(méi)有

最近在寫(xiě)公司項(xiàng)目的時(shí)候遇到了拖拽拉伸加旋轉(zhuǎn)組件然后改變其高度寬度的需求，原本以為‘拖拽那么簡(jiǎn)單，拉伸的話就改變width和height就好了’，因?yàn)橥献Ю斓姆轿挥邪藗€(gè)點(diǎn)，所有一個(gè)個(gè)計(jì)算總會(huì)解決的，but

神奇的現(xiàn)象

起初在沒(méi)有加上旋轉(zhuǎn)角度的時(shí)候測(cè)試了八個(gè)方位的拖拽拉伸是沒(méi)有問(wèn)題的，而且其本身實(shí)現(xiàn)方法不難，例如拖拽的是最頂部的中心點(diǎn)則改變其組件的top數(shù)值和height數(shù)值就好了，但如果加上了旋轉(zhuǎn)角度之后、、似乎變得詭異了起來(lái)

分析原因

我們知道，旋轉(zhuǎn)的角度可以通過(guò)CSS3的transform屬性的rotate值來(lái)改變，然后如果不改變坐標(biāo)圓點(diǎn)則默認(rèn)是組件的中心點(diǎn)，所以如果一旦rotate值發(fā)生改變其組件的整個(gè)坐標(biāo)系也隨之改變，我大概粗略的畫(huà)了下圖

圖中藍(lán)色的方塊比作組件，其坐標(biāo)系是藍(lán)色的XY坐標(biāo)系，加入旋轉(zhuǎn)角度為45度的話，則坐標(biāo)系就變成了橙色的XY坐標(biāo)系

這個(gè)時(shí)候如果再用以藍(lán)色坐標(biāo)系為參考系來(lái)計(jì)算拖拽拉伸的數(shù)值肯定是不正確的，此時(shí)我們借助于坐標(biāo)系的旋轉(zhuǎn)變換公式，還記得嗎？

理清需求

因?yàn)槲覀冊(cè)诶祉敳康臅r(shí)候只計(jì)算了top值和height值，忽略了left值，以為拉伸頂部只改變只兩個(gè)值就好了，但其實(shí)這是理想情況，譬如上圖中的點(diǎn)V，我們?cè)谛D(zhuǎn)到45度的時(shí)候，拉伸頂部要保證V點(diǎn)的位置不變，注意！只是保證V點(diǎn)在藍(lán)色的原始坐標(biāo)系中的位置，那么勢(shì)必還是要計(jì)算left值的，我又大概粗略的畫(huà)了下圖

為了好計(jì)算，我假設(shè)組件的高度為100，被拉伸之后的高度為200，那么拉伸到200的時(shí)候其坐標(biāo)系為深灰色的X`Y`坐標(biāo)系，答案顯而易見(jiàn)，V點(diǎn)到深灰色坐標(biāo)原點(diǎn)的橫坐標(biāo)距離等于 V點(diǎn)到橙色坐標(biāo)原點(diǎn)的橫坐標(biāo)距離加上這兩個(gè)坐標(biāo)原點(diǎn)的橫坐標(biāo)距離

我最后大概又畫(huà)了下圖

也就是說(shuō)我們?cè)谕献Ю斓臅r(shí)候要保證這個(gè)等式成立，也就是E`F` = EF + OO`
那么，一我們知道了角度rotate、二我們也知道了兩個(gè)坐標(biāo)系圓點(diǎn)之間的距離OO`(注:sin(45度) * (200 - 100) / 2)，那么就能保證V點(diǎn)的位置橫向不變了，這里只例舉了橫坐標(biāo)的情況，縱坐標(biāo)的原理類似

最終效果