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);

    }

}