LayaAir Sprite 旋轉縮放

2021-09-07 18:56:21 字數 1842 閱讀 7839

目錄

sprite 旋轉縮放

編碼示例 旋轉

縮放1、sprite 是基本的顯示圖形的顯示列表節點, sprite 預設沒有寬高,預設不接受滑鼠事件。

2、通過 graphics 可以繪製或者向量圖,支援旋轉,縮放,位移等操作。

3、laya.display.sprite 同時也是容器類,可用來新增多個子節點。

4、旋轉縮放操作主要使用到如下 api:

pivotx : number ,x軸 軸心點的位置,單位為畫素,預設為0。軸心點會影響物件位置,縮放中心,旋轉中心。

pivoty : number ,y軸 軸心點的位置,單位為畫素,預設為0。軸心點會影響物件位置,縮放中心,旋轉中心。

rotation : number ,旋轉角度,預設值為0。以角度為單位。

scalex : number ,x軸縮放值,預設值為1。設定為負數,可以實現水平反轉效果,比如scalex=-1。

scaley : number ,y軸縮放值,預設值為1。設定為負數,可以實現垂直反轉效果,比如scalex=-1。

scale(scalex:number, scaley:number, speedmode:boolean = false):sprite

設定縮放。相當於分別設定scalex和scaley屬性。 因為返回值為sprite物件本身,所以可以使用如下語法:spr.scale(...).pos(50, 100);

pivot(x:number, y:number):sprite

設定軸心點。相當於分別設定pivotx和pivoty屬性。 因為返回值為sprite物件本身,所以可以使用如下語法:spr.pivot(...).pos(50, 100);

首先必須明確何為"軸心點"? 乙個精靈 sprite預設的軸心點是在自己的左上角,使用 pos(x,y)設定sprite的位置的時候所以預設是以左上角進行定位的(如上圖左),如果想像右側一樣以自己中心為軸進行旋轉呢?就必須設定 sprite 的軸心位置 pivot,布局將會以軸心位置進行布局。

實現**如下:

(function () );

var label_2 = createlabel("以我中心為軸");

/**設定 label的軸心為自己的中心位置

* pos是以元件的軸心進行定位的,即 (450,100) 是 label 中心的位置

*/label_2.pivot(label_2.width / 2, label_2.height / 2);

label_2.pos(450, 100);//組建顯示的位置

laya.timer.frameloop(1, this, function () );

//建立乙個標籤並新增到舞台

在旋轉的基礎上加上縮放,實現**如下:

(function ()  else 

/** 1->0是正向縮小,0->-1是反向放大,所以達到-1後,再反向 -1->0 縮小,再 0-1>正向放大,迴圈往復*/

flag = sprite.scalex <= -1 ? false : flag;

flag = sprite.scalex >= 1 ? true : flag;

});})();

官網 demo:

尤拉角 內部旋轉 外部旋轉

從乙個座標系到另乙個座標系的轉換前面談到有多種轉換方法 尤拉角法 方向余弦矩陣法 四元數法等。其中尤拉角法的核心思想是 乙個座標系可以用另乙個參考座標系的三次空間旋轉來表達。旋轉座標系的方法又有兩種 一種是依次旋轉三個不同的座標軸 另一種是相鄰兩次旋轉不同的座標軸。第一種旋轉方法稱之為tait br...

演算法題 rotate list 旋轉旋轉

程式設計題 rotate list 時間限制 1秒 空間限制 32768k given a list,rotate the list to the right by k places,where k is non negative.for example given1 2 3 4 5 nulland...

點旋轉和座標系旋轉

同一座標系下的點旋轉變換 如圖1所示 和不同座標系之間的旋轉變換 如圖2所示 一直困擾著我,它們是兩個不同的概念,但形式上有很相似,以二維空間為例做了下推導,加深理解。同一座標系下的點旋轉變換,比較好理解,是在相同的座標系下做的旋轉變換。如圖3所示,已知逆時針的旋轉角度為 我們引入中間變數向量的長度...