egret.Shape渲染集合图形

代码：

class Main extends egret.DisplayObjectContainer
{
    public constructor()
    {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
    }
    //绘制直线
    private onAddToStage(event:egret.Event)
    {
        var shp:egret.Shape = new egret.Shape();
        shp.graphics.lineStyle( 2, 0x00ff00 );
        shp.graphics.moveTo( 10,10 );
        shp.graphics.lineTo( 100, 20 );
        shp.graphics.endFill();
        this.addChild( shp );
    }
}

  2.

class EgretBookScr extends egret.DisplayObjectContainer {
    private logo: egret.Bitmap;

    public constructor() {
        super(); 
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.startGame, this);   
    } 
    public startGame(): void {
        //alert("hello world");
        this.createGameScene();
    }
    private createGameScene():void{
        //创建一个Shape对象
        var circle:egret.Shape = new egret.Shape();
        //1:参数1：一个整数，以点为代为表示线段的粗细，有效值为（0--255）；若未指定该参数，则不绘制线条,为0，表示极细；
        //若值大于255,则默认值是255
        //参数2：指定一种线条样式，用于对lineto或drawcircle等Graphics方法的调用
        circle.graphics.lineStyle(0,0xffffff);
        //参数：填充颜色(简单的单色填充)、透明度?
        //调用clear会清楚填充
        circle.graphics.beginFill(0x00ff00,0.8);
        //(x:number,y:number,radius:number):x:圆心相对于父显示对象注册点的x位(以像素为单位) 绘制一个圆
        circle.graphics.drawCircle(0,0,100);//此时会显示右下部分的1/4的圆，因为xy的值
        circle.graphics.drawCircle(100,100,100);//若上一句代码不注释，显示的图形类似水滴；
        circle.graphics.endFill();
        this.addChild(circle);
    }
}

class Main extends egret.DisplayObjectContainer
{
    public constructor()
    {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
    }
    //绘制圆弧的方法
    
    private onAddToStage(event:egret.Event)
    {
        var shp:egret.Shape = new egret.Shape();
        shp.graphics.beginFill( 0x1122cc );
        //drawArc(x:number,y:number,radius:number,startAngle:number,endAngle:number,anticlockwise:boolean):void
        //圆弧路径的圆心在（x,y) 半径为radius 。anticlockwise参数为true,则逆时针绘制圆弧；否则为顺时针绘制
        shp.graphics.drawArc(200,200,100,0,Math.PI,true);
        shp.graphics.endFill();
        this.addChild( shp );
    }
}

完整的绘制：

class ShapeTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        this.drawRect(event);
        this.drawCircle(event);
        this.drawLine(event);
        this.drawCurve(event);
        this.drawArc(event);
        this.drawTest(event);
    }
    //绘制矩形
    private drawRect(evt: egret.Event) {
        var shp: egret.Shape = new egret.Shape();
        shp.graphics.lineStyle(10, 0x00ff00);//第一个参数：描边的线条宽度，第二个参数是描边的颜色
        shp.graphics.beginFill(0xff0000, 0.8);//red 设置矩形的填充颜色，第二个参数是透明度；1表示透明度 
        shp.graphics.drawRect(500, 500, 100, 200);//设置矩形的形状，绘制的是100*200的矩形  
        shp.graphics.lineStyle(10, 0x00ff00);//无作用
        shp.graphics.endFill();//结束当前绘制操作 若要对矩形加描边，可以设置线条的样式
        //通关lineStyle方法来设置 代码需要放在绘制代码之前,否则无效，且不报错 
        this.addChild(shp);
        ///////////////////////清空绘制:将已经绘制的图像全部清空,清除一个对象的绘图////////////////////////////////////////////////
        //shp.graphics.clear();
    }
    //绘制圆形
    private drawCircle(event: egret.Event) {
        var shp: egret.Shape = new egret.Shape();
        shp.x = 300;
        shp.y = 300;
        shp.graphics.lineStyle(10, 0x00ff00);
        shp.graphics.beginFill(0xff0000, 1);
        shp.graphics.drawCircle(0, 0, 50);//相对于父显示对象注册点的圆心的X轴位置，Y轴坐标值，圆的半径以像素为单位
        shp.graphics.endFill();//结束当前绘制操作 若要对矩形加描边，可以设置线条的样式
        //通关lineStyle方法来设置 代码需要放在绘制代码之前,否则无效，且不报错 
        this.addChild(shp);
    }
    //绘制直线需要使用两个方法，一个绘制起始点，另一个负责绘制直线的终点；
    private drawLine(evt: egret.Event) {
        var shp: egret.Shape = new egret.Shape();
        shp.graphics.lineStyle(2, 0x00ff00);
        shp.graphics.moveTo(200, 200);//将当前绘图位置移动到（x,y)/若缺少任一参数，该方法失效，则当前绘图位置不变
        shp.graphics.lineTo(200, 600);//直线结束的（x,y) //c此时为竖直的一个线段，若要连续的线段，形成折线
        //绘制首尾相接的直线，后边连续使用lineTo即可
        shp.graphics.moveTo(300, 300);
        shp.graphics.lineTo(100, 200);
        shp.graphics.lineTo(400, 80);
        shp.graphics.lineTo(600, 900);

        shp.graphics.endFill();

        this.addChild(shp);
    }
    //绘制曲线
    //Egret 提供的曲线是一个二次贝塞尔曲线，绘图方法curveTo
    private drawCurve(evt: egret.Event) {
        var shp: egret.Shape = new egret.Shape();
        shp.graphics.lineStyle(2, 0xff0000);
        shp.graphics.moveTo(600, 600);
        shp.graphics.curveTo(0, 0, 200, 50);
        shp.graphics.endFill();
        this.addChild(shp);
    }
    //绘制圆弧
    //Egret 提供的弧形绘图方法drawArc
    private drawArc(evt: egret.Event) {
        var shp: egret.Shape = new egret.Shape();
        shp.graphics.beginFill(0x1122cc);
        shp.graphics.drawArc(500, 500, 100, 0, Math.PI, false);//圆心位置（x,y);radius;anticlockwise:true:逆时针绘制圆弧
        shp.graphics.endFill();
        this.addChild(shp);
    }
    //多个图形绘制
    //相互是独立的，每次绘制填充都必须以endfill结束，才能开始下次绘制
    //绘制4个正方形小格子
    private drawTest(evt: egret.Event) {
        var shp: egret.Shape = new egret.Shape();
         
        shp.graphics.beginFill(0xff0000, 0.8); 
        shp.graphics.drawRect(0, 0, 50, 50);  
        shp.graphics.endFill(); 

        shp.graphics.beginFill(0x00ff00, 0.8); 
        shp.graphics.drawRect(50, 50, 50, 50);  
        shp.graphics.endFill();   

        shp.graphics.beginFill(0x0000ff, 0.8); 
        shp.graphics.drawRect(50, 0, 50, 50);  
        shp.graphics.endFill();  

        shp.graphics.beginFill(0x0000cc, 0.8); 
        shp.graphics.drawRect(0, 50, 50, 50);  
        shp.graphics.endFill(); 

        this.addChild(shp);

    }

}