文章目录
一、任务目标
在之前的学习中，我们特意放慢速度，让我们可以很好的入门和激发兴趣，很多知识学的相对较慢，如今我们已经学习完了所有UI组件，可以发现学习引擎的一些套路了，之后的学习中我们要加快吸收的速度，达到快速上手的目的，该任务则主要学习图行显示相关内容。
二、任务分解
2.1 Sprite节点可以作为容器使用
Sprite节点的一个妙用就是可以作为一个父容器来使用，用于装载其他用于显示图像的Sprite节点，这样做的好处是同类图片我们可以装入一个容器中，这样方便统一回收和操作。
//1.让Sprite作为容器装载其他显示图片的Sprite
private Sprite_DisplayImage(): void {
for (let i = 1; i <= 3; i++) {
let sprite: Sprite = new Sprite();
sprite.loadImage("myComp/loading_0"+i+".png");
//设置相对位置排列,相对于父容器imageBox而言，如果希望方便转换可以将父容器固定在左上角原点处
sprite.pos(i*50,0);
this.imageBox.addChild(sprite);
}
}
-
imageBox是作为父容器的Sprite节点 -
pos()的设置是相对于父容器的位置，不是全局位置 - 运行结果如下：
2.2 心跳缩放
利用Sprite我们可以控制图片的旋转和缩放，该例子我们来实现官方示例中的心跳缩放效果。
//2.制作心跳缩放效果
private Sprite_Scale(): void {
let sprite: Sprite = new Sprite();
sprite.loadImage("myComp/loading_01.png");
sprite.pivot(61.5,52.5);
this.imageBox.addChild(sprite);
//心跳缩放
let scaleDelta: number = 0;
Laya.timer.frameLoop(1,this,()=>{
scaleDelta += 0.02;
//abs()用于取绝对值，sin()用于计算三角sin值
let scaleValue = Math.abs(Math.sin(scaleDelta));
sprite.scale(scaleValue,scaleValue);
});
}
- 利用
sin()函数来模拟出周期性的心跳效果 -
abs()的作用是取绝对值，否则在sin函数负周期时图片会倒置 - 运行效果：
2.3 利用Graphics矢量绘图API绘制图形
Graphics类用于创建绘图显示对象，可以绘制多个是位图或者矢量图，同时它支持以命名流的方式存储，所以是比Sprite更轻量级的对象，为了优化性能我们往往采用单个Sprite节点的Graphics命令集合。
- 例如
sprite.graphics.drawImage()这样使用，而不是创建Graphics对象
onAwake(): void {
//this.Sprite_DisplayImage();
//this.Sprite_Scale();
this.input.on(Laya.Event.BLUR,this,() => {
console.log("test");
this.imageBox.removeChildren();
this.Sprite_DrawShapes(Number(this.input.text));
});
}
//3.利用Graphics绘制位图或矢量图
private Sprite_DrawShapes(index: number = 0): void {
let sprite: Sprite = new Sprite();
this.imageBox.addChild(sprite);
switch (index) {
case 1: /**1.画直线 */
sprite.graphics.drawLine(0,0,50,0,"#ff0000",3);
break;
case 2: /**2.绘制折线 */
let lines: number[] = [0, 0, 39, -50, 78, 0, 120, -50];
sprite.graphics.drawLines(0,0,lines,"#ff0000",3);
break;
case 3: /**3.绘制曲线 */
let curves: number[] = [0, 0, 19, -100, 39, 0, 58, 100, 78, 0];
sprite.graphics.drawCurves(0,0,curves,"#ff0000",3);
break;
case 4: /**4.绘制多边形 */
sprite.graphics.drawPoly(0,0,[0, 100, 50, 0, 100, 100],"#ff0000");
sprite.graphics.drawPoly(0,110,[0, 100, 50, 0, 100, 100, 75, 150, 25, 150],"#ff0000");
break;
case 5: /**5.绘制圆形和扇形 */
sprite.graphics.drawCircle(0,0,40,"#ff0000");
sprite.graphics.drawPie(50,0,40,0,90,"#ff0000");
break;
case 6: /**6.绘制矩形和圆角矩形*/
sprite.graphics.drawRect(0,0,50,25,"#ff0000");
let path:any[] = [
["moveTo", 30, 0], //画笔的起始点，
["lineTo",400,0],
["arcTo", 500, 0, 500, 30, 30], //p1（500,0）为夹角B，（500,30）为端点p2
["lineTo",500,200],
["arcTo", 500, 300, 470, 300, 30],//p1（500,300）为夹角C，（470,300）为端点p2
["lineTo",30,300],
["arcTo", 0, 300, 0, 270, 30], //p1(0,300)为夹角D，（0,270）为端点p2
["lineTo",0,100],
["arcTo", 0, 0, 30, 0, 30],//p1(0,0)为夹角A，（30,0）为端点p2
];
sprite.graphics.drawPath(60,0,path,{fillStyle:"#ff0000"},{strokeStyle:"#ffffff",lineWidth:"5"});
break;
default:
break;
}
}
运行结果：
注意：消除矢量图锯齿的方法
//消除矢量绘制的锯齿，但会增加性能消耗
Laya.Config.isAntialias=true;
//初始化舞台
Laya.init(500, 300, WebGL);
在Main.ts文件中初始化舞台时添加如上Laya.Config.isAntialias=true这句代码，可以起到抗锯齿效果，但是会增加性能损耗。