transform基本轉換應用2D

2021-08-07 16:27:48 字數 923 閱讀 1534

最近在折騰transform,其實不想寫啥的,但看在忙活的一天多的份上就簡單寫一下額。(ps:只作為記錄,語言表達能力有限)。

transform常用的幾個值:translate 偏移 scale 縮放 skew 拉伸/傾斜 rotate 旋轉(ps:這幾個值都比較好理解,只要記得用到的座標軸y軸是向下的)

真正浪費我時間的是matrix 矩陣 矩陣是個數學中的概念,很簡單,不了解的可以先學一下,至於怎麼實現的用matrix完成上面值的效果我就不說了,(ps:要想知道為

我就只說下最後的結果。

(ps:以下結果成立的條件,用到座標軸y軸向下,即與直接使用上面四個值一樣)

matrix(a,b,c,d,e,f)六個引數中,第乙個和第四個(a,d)控制(xy值no匡高)scale縮放,栗子(省略transform)matrix(2,0,0,2,0,0)與scale(2,2)效果一樣

第二個和第三個(b,c)控制skew拉伸,不過b代表y軸角度的tan值,c代表x軸角度的tan值,栗子 matrix(1,1.7,1.7,1,0,0)與skew(60deg,60deg)效果一樣

(1.7為tan60的約值)

第五個和第六個(e,f)代表(x,y)的translate位移值,栗子  matrix(1,0,0,1,30,50)與translate(30px,50px)效果一樣

rotate旋轉要單獨寫出來前四個值(a,b,c,d)分別是旋轉角度的(cos,sin,-sin,cos)值,matrix中值不用單位。這個與上面演算法一樣就不算值了

transform函式的應用

transform函式的作用是 將某操作應用於指定範圍的每個元素。transform函式有兩個過載版本 transform first,last,result,op first是容器的首迭代器,last為容器的末迭代器,result為存放結果的容器,op為要進行操作的一元函式物件或sturct cl...

Transform 學習和應用

link transform 變換,是場景中最常打交道的類,用於控制物體的位移,旋轉,縮放等功能。transform class,inherits from component,ienumerable position,rotation and scale of an object.控制物體的位置,...

transform 三個屬性的基本應用

transform translate 偏移自身的屬性 寬和高 不會影響其他元素的位置。transform translate x,y transform rotate 單位為deg 順時針旋轉 逆時針旋轉 可以加hover效果,通過transtion 過度 屬性演示動畫。transform ori...