成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

mengera88 / 2116人閱讀

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

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

神奇的現(xiàn)象

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

分析原因

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

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

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

理清需求

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

為了好計(jì)算，我假設(shè)組件的高度為100，被拉伸之后的高度為200，那么拉伸到200的時(shí)候其坐標(biāo)系為深灰色的X`Y`坐標(biāo)系，答案顯而易見，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)距離

我最后大概又畫了下圖

也就是說我們在拖拽拉伸的時(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)的原理類似

最終效果

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/97033.html

相關(guān)文章

  • canvas中的拖拽、縮放、旋轉(zhuǎn) (下) —— 代碼實(shí)現(xiàn)

    摘要：中的拖拽縮放旋轉(zhuǎn)上數(shù)學(xué)知識準(zhǔn)備。表示整個(gè)區(qū)域，表示中的元素。事實(shí)上，工作上的需求并沒有要求旋轉(zhuǎn)，只需要實(shí)現(xiàn)拖拽縮放即可。 寫在前面 showImg(https://segmentfault.com/img/bVbonep?w=283&h=306); 本文首發(fā)于公眾號：符合預(yù)期的CoyPan demo體驗(yàn)地址及代碼在這里：請用手機(jī)或?yàn)g覽器模擬手機(jī)訪問 上一篇文章介紹了canvas中的拖拽...

    pumpkin9 評論0 收藏0

  • 前端實(shí)驗(yàn)手札——拖拽旋轉(zhuǎn)圖片的實(shí)現(xiàn)及思路

    摘要：在拖拽旋轉(zhuǎn)圖片的實(shí)現(xiàn)中，最符合的就是上面這題的情況，接下來好好說明一下。經(jīng)過按計(jì)算機(jī)推導(dǎo)出來的結(jié)論，反三角函數(shù)計(jì)算出來的結(jié)果是弧度，而一直使用的角表示的其實(shí)是角的弧度。拖拽圍繞著圖片的中心旋轉(zhuǎn)，圖片中心作為公式中的原點(diǎn)設(shè)為點(diǎn)使用。 讓我們來看看以下這道題： 已知點(diǎn)A(x1,y1)和點(diǎn)B(x2,y2)，求兩點(diǎn)求與圓點(diǎn)O(x0,y0)的夾角θ的角度：∠θ=arctan[(y2-y0)/(x...

    tianren124 評論0 收藏0

  • 基于javascript的拖拽類封裝

    摘要：參考了很多別人寫的代碼，最后終于弄明白了其中的原理，自己也寫了一個(gè)。效果圖如下地址如下拖拽類封裝代碼使用方法引入和對應(yīng)的。如果沒有為的結(jié)構(gòu)，就創(chuàng)建。鼠標(biāo)移動(dòng)時(shí)，記錄再次計(jì)算鼠標(biāo)位置距離中心位置的的反正切函數(shù)。 在公司做一個(gè)h5編輯平臺(tái)，中間需要對元素進(jìn)行拖拽、放大縮小、旋轉(zhuǎn)等操作，且需要對文本、圖片、音樂組件等不同元素都可以具備這些功能。參考了很多別人寫的代碼，最后終于弄明白了其中的原...

    afishhhhh 評論0 收藏0

  • HTML5中手勢原理分析與數(shù)學(xué)知識的實(shí)踐

    摘要：中手勢原理分析與數(shù)學(xué)知識的實(shí)踐引言在這觸控屏的時(shí)代，人性化的手勢操作已經(jīng)深入了我們生活的每個(gè)部分。這篇博文主要是解析了移動(dòng)端常用手勢的原理，及從前端的角度學(xué)習(xí)過程中所使用的數(shù)學(xué)知識。 HTML5中手勢原理分析與數(shù)學(xué)知識的實(shí)踐 引言 在這觸控屏的時(shí)代，人性化的手勢操作已經(jīng)深入了我們生活的每個(gè)部分?，F(xiàn)代應(yīng)用越來越重視與用戶的交互及體驗(yàn)，手勢是最直接且最為有效的交互方式，一個(gè)好的手勢交互，能...

    rollback 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<