从显示列表中移除 obj.parent && obj.parent.removeChild(obj)
查看有多少个子容器 obj.numChildren

添加子容器 obj.addChild(child)
添加子容器到指定zIndex obj.addChildAt(child, childZIndex) 起始值是0

从显示队列删除子容器 obj.removeChild(child)
从显示队列删除子容器 obj.removeChildAt(zIndex)

删除所有子容器 obj.removeChildren() 或者下面这样写
const numChild: number = sprcon.numChildren;
for (const t: number = 0; t < numChild; t++) {
    sprcon.removeChildAt(0);
}

同一个zIndex只能有一个DisplayObject

不同zIndex交换顺序
容器.swapChildren( 显示对象, 显示对象 )
容器.swapChildrenAt( 深度值, 深度值 )

指定zIndex
容器.setChildIndex( 显示对象, 新的深度值 );
obj.zIndex = 3; 十倍性能优化 
要给一个对象使用 zIndex,包含此显示对象的 DisplayObjectContainer 对象一定要设置 sortableChildren = true,开启排序功能,否则设置 zIndex 是无效的

let container = new egret.Sprite();
container.sortableChildren = true; //注意,一定要设置为true
this.addChild(container);

let texture: egret.Texture = RES.getRes("bird_png");
let b1 = new egret.Bitmap();
b1.texture = texture;
b1.x = 100;
this.addChild(b1);

let b2 = new egret.Bitmap();
b2.texture = texture;
b2.x = 270;
this.addChild(b2);

let b3 = new egret.Bitmap();
b3.texture = texture;
b3.x = 440;
this.addChild(b3);

b2.zIndex = 3; //将第二个图片设置到顶部


查询现实对象
容器.getChildAt( 深度值 );
容器.getChildByName( 显示对象 )
const _spr: egret.DisplayObject = sprcon.getChildAt(1);
_spr.alpha = 0.5;

通过graphics对象绘制图形

class GraphicsTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        const shp: egret.Shape = new egret.Shape();
        shp.graphics.beginFill(0xff0000, 1);
        shp.graphics.drawRect(0, 0, 100, 200);
        shp.graphics.endFill();
        this.addChild(shp);
    }
}

shp.graphics.lineStyle(10, 0x00ff00); 提前声明画笔: 线条宽度, 颜色
shp.graphics.beginFill(0xff0000, 1); 红色, 1不透明, 开始填充
绘制形状
shp.graphics.endFill(); 结束填充

矩形
 shp.graphics.drawRect(0, 0, 100, 200);
 相对于shp的锚点(0,0), 宽度x=100,高度y=200

圆形
 drawCircle(x: number, y: number, radius: number): void;
 相对于shap的锚点, 指定圆心坐标(x,y),半径大小

直线
    moveTo(x: number, y: number): void; 起点坐标
    lineTo(x: number, y: number): void; 终点坐标(允许多条调用)

直线: 不需要开始填充, 只要结束填充

class GraphicsTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        const shp: egret.Shape = new egret.Shape();
        shp.graphics.lineStyle(2, 0x00ff00);
        shp.graphics.moveTo(10, 10);
        shp.graphics.lineTo(167, 76);
        shp.graphics.lineTo(221, 118);
        shp.graphics.lineTo(290, 162);
        shp.graphics.lineTo(297, 228);
        shp.graphics.lineTo(412, 250);
        shp.graphics.lineTo(443, 174);
        shp.graphics.endFill();
        this.addChild(shp);
    }
}

二次贝赛尔曲线
moveTo(x: number, y: number): void; P0起点坐标
curveTo(x1: number, y1: number, x2: number, y2: number): void; P1控制点,P2结束点

class GraphicsTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        const shp: egret.Shape = new egret.Shape();
        shp.graphics.lineStyle(2, 0x00ff00);
        shp.graphics.moveTo(50, 50);
        shp.graphics.curveTo(100, 100, 200, 50);
        shp.graphics.endFill();
        this.addChild(shp);
    }
}


圆弧
drawArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean): void;
圆弧路径的圆心位置(x,y)
圆弧半径radius
圆弧起点的角度startAngle (从x 轴方向开始计算,以弧度为单位)
圆弧终点的角度endAngle
绘制方向anticlockwise (true,逆时针绘制圆弧, false,顺时针绘制, 通常false)

一个从 0 到 π 的圆弧(上半圆,扇形)
class GraphicsTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        const shp: egret.Shape = new egret.Shape();
        shp.graphics.beginFill(0x1122cc);
        shp.graphics.drawArc(200, 200, 100, 0, Math.PI, true);
        shp.graphics.endFill();
        this.addChild(shp);
    }
}


线条型 弧线, 不填充颜色
const shape: egret.Shape = new egret.Shape();
shape.graphics.lineStyle(2, 0xffff00);
shape.graphics.drawArc(50, 50, 50, 0, Math.PI / 180 * 30, false);
shape.graphics.endFill();

拱形
画拱和画弧的区别就是:画拱需要填充图形,画弧不需要填充图形
const shape: egret.Shape = new egret.Shape();
shape.graphics.beginFill(0xff0000);
shape.graphics.drawArc(50, 50, 50, 0, Math.PI / 180 * 60, false);
shape.graphics.endFill();

扇形
const r: number = 50;
const shape: egret.Shape = new egret.Shape();
shape.graphics.beginFill(0xff0000);
shape.graphics.moveTo(r, r); //绘制点移动(r, r)点
shape.graphics.lineTo(r * 2, r); //画线到弧的起始点
shape.graphics.drawArc(50, 50, 50, 0, 260 * Math.PI / 180, false); //从起始点顺时针画弧到终点
shape.graphics.lineTo(r, r); //从终点画线到圆形。到此扇形的封闭区域形成
shape.graphics.endFill();

弧形进度条
class GraphicsText {
    private getArcProgress(): egret.Shape {
        const shape: egret.Shape = new egret.Shape();
        let angle: number = 0;
        egret.startTick(function (timeStamp: number) {
            angle += 1;
            changeGraphics(angle);
            angle = angle % 360;
            return true;
        }, this);
        function changeGraphics(angle) {
            shape.graphics.clear();
            shape.graphics.lineStyle(2, 0x0000ff, 1);
            shape.graphics.drawArc(50, 50, 50, 0, angle * Math.PI / 180, false);
            shape.graphics.endFill();
        }
    }
}

扇形进度条
class GraphicsText {
    private getSectorProgress(): egret.Shape {
        const shape: egret.Shape = new egret.Shape();
        let angle: number = 0;
        egret.startTick(function (timeStamp: number): boolean {
            angle += 1;
            changeGraphics(angle);
            angle = angle % 360;
            return true;
        }, this);
        return shape;
        function changeGraphics(angle) {
            shape.graphics.clear();
            shape.graphics.beginFill(0xff0000);
            shape.graphics.moveTo(50, 50);
            shape.graphics.lineTo(100, 50);
            shape.graphics.drawArc(50, 50, 50, 0, angle * Math.PI / 180, false);
            shape.graphics.lineTo(50, 50);
            shape.graphics.endFill();
        }
    }
}

不规则边框进度条
class GraphicsText {
    private getSectorProgress(): egret.DisplayObjectContainer {
        const container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
        const w: number = 100;
        const h: number = 100;
        const r: number = Math.max(w, h) / 2 * 1.5;
        const bitmap = new egret.Bitmap(RES.getRes(key));
        container.addChild(bitmap);
        bitmap.width = w;
        bitmap.height = h;
        const shape: egret.Shape = new egret.Shape();
        shape.x = bitmap.width / 2;
        shape.y = bitmap.height / 2;
        bitmap.mask = shape;
        container.addChild(shape);
        let angle = 0;
        egret.startTick(function (timeStamp: number): boolean {
            angle += 1;
            changeGraphics(angle);
            angle = angle % 360;
            return true;
        }, this);
        return container;
        function changeGraphics(angle) {
            shape.graphics.clear();
            shape.graphics.beginFill(0x00ffff, 1);
            shape.graphics.lineTo(r, 0);
            shape.graphics.drawArc(0, 0, r, 0, angle * Math.PI / 180, true);
            shape.graphics.lineTo(0, 0);
            shape.graphics.endFill();
        }
    }
}

多个形状绘制, 互相是独立的,每一次绘制填充,都必须以 endFill() 结束,才能开始下一次绘制
 this.graphics.beginFill(0x0000ff);
this.graphics.drawRect(0, 0, 50, 50);
this.graphics.endFill();
this.graphics.beginFill(0x0000ff);
this.graphics.drawRect(50, 50, 50, 50);
this.graphics.endFill();
this.graphics.beginFill(0xff0000);
this.graphics.drawRect(50, 0, 50, 50);
this.graphics.endFill();
this.graphics.beginFill(0xff0000);
this.graphics.drawRect(0, 50, 50, 50);
this.graphics.endFill();

遮罩层
遮罩的作用是指定一个显示对象的可见区域,所有显示对象都具备遮罩功能。

1.矩形遮罩
矩形遮罩,即显示对象的可见区域是方形显示区域而非不规则显示区域。
用法为:将一个矩形对象赋值给显示对象的 mask 属性。
shp.mask = new egret.Rectangle(20, 20, 30, 50);

2.显示对象遮罩
显示对象遮罩,即显示对象的可见区域由另一个显示对象确定,可实现不规则遮罩。
用法为:将被遮罩显示对象的 mask 属性设置为遮罩对象:

mySprite.mask = maskSprite; //将maskSprite设置为mySprite的遮罩
mySprite.mask = null; // 删除遮罩

//画一个红色的正方形
const square: egret.Shape = new egret.Shape();
square.graphics.beginFill(0xff0000);
square.graphics.drawRect(0, 0, 100, 100);
square.graphics.endFill();
this.addChild(square);
//画一个蓝色的圆形
const circle: egret.Shape = new egret.Shape();
circle.graphics.beginFill(0x0000ff);
circle.graphics.drawCircle(25, 25, 25);
circle.graphics.endFill();
this.addChild(circle);
square.mask = circle; // 正方形的遮罩是圆形, 最终可见到红色的圆形

用作遮罩的显示对象可设置动画、动态调整大小。
遮罩显示对象不一定需要添加到显示列表中。
但是,如果希望在缩放舞台时也缩放遮罩对象,或者如果希望支持用户与遮罩对象的交互(如调整大小),则必须将遮罩对象添加到显示列表中。

清空绘图
清空绘图操作是将已经绘制的图像全部清空,可以执行 Graphics 中的 clear() 方法

shp.graphics.clear();

文本

1.普通文本

const label: egret.TextField = new egret.TextField();
label.text = "This is a text!";
this.addChild(label);

2.输入文本
把egret.TextField.type 改为 egret.TextFieldType.INPUT 即可输入

const txInput: egret.TextField = new egret.TextField();
txInput.type = egret.TextFieldType.INPUT;
txInput.width = 282;
txInput.height = 43;
txInput.x = 134;
txInput.y = 592;
txInput.textColor = 0x000000;
/// 注意_container是事先建立好的一个显示容器,即 egret.Sprite,并且已经添加到显示列表中
this._container.addChild(txInput);

聚焦 textField.setFocus();

const textIput: egret.TextField = new egret.TextField();
textIput.type = egret.TextFieldType.INPUT;
this.addChild(textIput);

const button: egret.Shape = new egret.Shape();
button.graphics.beginFill(0x00cc00);
button.graphics.drawRect(0, 0, 100, 40);
button.graphics.endFill();
button.y = 50;
this.addChild(button);
button.touchEnabled = true;
button.addEventListener(egret.TouchEvent.TOUCH_BEGIN, (e) => {
    textIput.setFocus();
}, this);

设置输入文本的样式为 text,密码(默认输入英文字母),电话(数字输入框)

text.inputType = egret.TextFieldInputType.TEXT;
egret.TextFieldInputType.PASSWORD
egret.TextFieldInputType.TEL

3.位图文本 egret.BitmapText

位图文本是借助位图字体渲染的文本类型。egret.BitmapText 类表示位图文本类型。

加载位图字体文件, 将加载后的字体对象赋值给 egret.BitmapText 的 font 属性。

class Main extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.once(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(evt: egret.Event) {
        RES.getResByUrl("resource/cartoon-font.fnt", this.onLoadComplete, this, RES.ResourceItem.TYPE_FONT);
    }
    private _bitmapText: egret.BitmapText;
    private onLoadComplete(font: egret.BitmapFont): void {
        this._bitmapText = new egret.BitmapText();
        this._bitmapText.font = font;
        this._bitmapText.x = 50;
        this._bitmapText.y = 300;
        this.addChild(this._bitmapText);
    }
}

对齐方式

label.textAlign = egret.HorizontalAlign.CENTER;  水平
label.verticalAlign = egret.VerticalAlign.MIDDLE; 居中

字体

label.fontFamily = "Impact";

字号

label.size = 20

egret.TextField.default_size 属性可设置全局的默认文本字号大小。
egret.TextField 的对象自身尺寸会根据首次设置的文本内容自动计算

字体颜色, 默认白色

label.textColor = 0xff0000;

文字描边

label.strokeColor = 0x0000ff;
label.stroke = 2; 描边粗度

加粗

label.bold = true

斜体

label.italic =true

文字流, 不同字符, 不同的颜色样式

const tx: egret.TextField = new egret.TextField;
tx.width = 400;
tx.x = 10;
tx.y = 10;
tx.textColor = 0;
tx.size = 20;
tx.fontFamily = "微软雅黑";
tx.textAlign = egret.HorizontalAlign.CENTER;
tx.textFlow = <Array<egret.ITextElement>>[
    { text: "Text in ", style: { "size": 20 } },
    { text: "Egret", style: { "textColor": 0x336699, "size": 60, "strokeColor": 0x6699cc, "stroke": 2 } },
    { text: " can ", style: { "fontFamily": "Impact" } },
    { text: "be set ", style: { "fontFamily": "Times New Roman" } },
    { text: "to a ", style: { "textColor": 0xff0000 } },
    { text: "\n" },
    { text: "variety ", style: { "textColor": 0x00ff00 } },
    { text: "of ", style: { "textColor": 0xf000f0 } },
    { text: "styles ", style: { "textColor": 0x00ffff } },
    { text: "with", style: { "size": 56 } },
    { text: "different ", style: { "size": 16 } },
    { text: "colors, ", style: { "size": 26 } },
    { text: "\n" },
    { text: "fonts ", style: { "italic": true, "textColor": 0x00ff00 } },
    { text: "and ", style: { "size": 26, "textColor": 0xf000f0, fontfamily = "Quaver" } },
    { text: "sizes", style: { "italic": true, "textColor": 0xf06f00 } }
];
this.addChild(tx);

文字超链接, 必须用textFlow, 且可触摸

tx.textFlow = new Array<egret.ITextElement>(
{ text: "这段文字有链接", style: { "href": "http://www.egret.com/" } },
{ text: "\n这段文字没链接", style: {} }
);
tx.touchEnabled = true;

标签: none

添加新评论