天天看點

Sprite

//初始化畫布

(function()

{

// 初始化畫布大小,不支援WebGL時自動切換至Canvas

Laya.init(Browser.clientWidth, Browser.clientHeight, Laya.WebGL);

Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//畫布垂直居中對齊

Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//畫布水準居中對齊

Laya.stage.scaleMode = "showall";//最小比例縮放

Laya.stage.bgColor = "#232628";//畫布背景顔色,預設為黑色

f();//初始化畫布後執行的函數

})();

(一)顯示圖檔

// 方法1:使用loadImage

var ape = new Sprite();

               ape.loadImage("../../res/apes/monkey3.png");

Laya.stage.addChild(ape);

建立精靈--loadImage API 取得精靈圖檔--将精靈添加到舞台上

// 方法2:使用drawTexture

(二)Sprite能夠作為其他顯示對象的容器

//povot()設定軸心點

apesCtn = new Laya.Sprite();//建立Sprite容器

Laya.stage.addChild(apesCtn);//将容器添加到舞台上

// 添加4張猩猩圖檔

for (var i = 0; i < 4; i++)

{

var ape = new Sprite();

ape.loadImage("../../res/apes/monkey" + i + ".png");

ape.pivot(55, 72);

// 以圓周排列猩猩

ape.pos(

Math.cos(radianUnit * i) * layoutRadius,

Math.sin(radianUnit * i) * layoutRadius);

apesCtn.addChild(ape);//将顯示對象添加到容器中

}

                apesCtn.pos(Laya.stage.width / 2, Laya.stage.height / 2);

Laya.timer.frameLoop(1, this, animate);每個一幀執行一次animate函數

function animate( e)     {          apesCtn . rotation += 1;//圖檔旋轉角度,未初始化時,預設值為0     }

(三)旋轉縮放

//初始化

var ape;

var scaleDelta = 0;

     function animate( e)     {          ape. rotation += 2;

         //心跳縮放          scaleDelta += 0.02;          var scaleValue = Math. sin( scaleDelta);//利用三角函數實作循環縮放          ape. scale( scaleValue, scaleValue);//水準和垂直縮放比例,取值為[0,1]     }

(三)根據資料繪制路徑

function drawPentagram()

{

var canvas = new Laya.Sprite();

Laya.stage.addChild(canvas);

var path = [];

path.push(0, -130);

path.push(33, -33);

path.push(137, -30);

path.push(55, 32);

path.push(85, 130);

path.push(0, 73);

path.push(-85, 130);

path.push(-55, 32);

path.push(-137, -30);

path.push(-33, -33);

canvas.graphics.drawPoly(Laya.stage.width / 2, Laya.stage.height / 2, path, "#FF7F50");//繪制多邊形,軸心點初始x,y坐标,各端點坐标,填充顔色,邊框顔色(可選),邊框寬度(可選)

}

(四)遮罩,放大鏡