Egret 矢量繪圖、遮罩、碰撞檢測

矢量繪圖：

1. 為矢量繪圖繪制外邊 - graphics.lineStype()

    private createGameScene():void 
    {   
        console.log("Runtime start.");
        
        var myShape:egret.Shape = new egret.Shape();
        
        myShape.graphics.lineStyle(10, 0x00ff00, 1);
        myShape.graphics.beginFill(0xff0000, 1);
        myShape.graphics.drawRect(0,0,100,200);
        myShape.graphics.endFill();
        this.addChild(myShape);

        console.log("Runtime end.");
    }

2. 清空一個顯示對象的繪圖 - graphics.clear()

3. 繪制圓形 - graphics.drawCircle(0, 0, 50)

4. 畫直線：

    private createGameScene():void 
    {          
        var myShape:egret.Shape = new egret.Shape();  
        myShape.graphics.lineStyle(5, 0x00ff00, 1);
        myShape.graphics.moveTo(50, 10);    //將畫筆移動到起點位置
        myShape.graphics.lineTo(100, 20);   //從起點位置划線到終點
        myShape.graphics.endFill();
        this.addChild(myShape);
    }

5. 貝塞爾曲線：

    private createGameScene():void 
    {          
        var myShape:egret.Shape = new egret.Shape();  
        myShape.graphics.lineStyle(5, 0x00ff00, 1);
        myShape.graphics.moveTo(50, 200);    　　　　   //將畫筆移動到起點位置
        myShape.graphics.curveTo(150, 50, 250, 200);   //指定起始移動方向的交匯點坐標，與終點坐標后進行畫線
        myShape.graphics.endFill();
        this.addChild(myShape);
    }

6. 繪制圓弧：

    private createGameScene():void 
    {          
        var myShape:egret.Shape = new egret.Shape();  
        myShape.graphics.lineStyle(5, 0x00ff00, 1);
        myShape.graphics.beginFill(0x1122cc);    

        //圓心坐標、半徑、起始弧度、終止弧度，填充的區域是圓弧+圓弧兩端點的連接所包含的區域
        myShape.graphics.drawArc(200,200,100,Math.PI/3, Math.PI);   
        myShape.graphics.endFill();
        this.addChild(myShape);   
    }

7. 值得注意的是：graphic 可以用來繪制多個圖形，不用一個 graphic 對應一個圖形。

 

遮罩

1. 矩形遮罩：

    private createGameScene():void 
    {          
        var shp: egret.Shape = new egret.Shape();
        shp.graphics.beginFill(0xff0000);
        shp.graphics.drawRect(0,0,100,100);
        shp.graphics.endFill();
        this.addChild(shp);
        
        var shp2: egret.Shape = new egret.Shape();
        shp2.graphics.beginFill(0x00ff00);
        shp2.graphics.drawCircle(0,0,20);
        shp2.graphics.endFill();
        this.addChild(shp2);
        shp2.x = 20;
        shp2.y = 20;  
        
        var rect: egret.Rectangle = new egret.Rectangle(20,20,30,50);   //參數指定的區域是遮罩不遮擋的區域
        shp.mask = rect;
    }

2. 對象遮罩：可以用一個對象當成另一個對象的遮罩

square.mask = circle;    //像這樣直接指定即可

 

碰撞檢測

    private createGameScene():void {

        var infoTest = new egret.TextField();
        infoTest.y = 200;
        infoTest.text = "碰撞結果";                                                                                             
        this.addChild(infoTest);      //顯示一個文本以展示測試結果

        var shp:egret.Shape = new egret.Shape();
        shp.graphics.beginFill(0xff0000);
        shp.graphics.drawRect(0, 0, 120, 120);                                                                                                 
        shp.graphics.endFill();
        this.addChild(shp);                     

        console.log(shp.width);     //shp 的 width 與 height 與顯示對線的內容相關，這里是 120
        console.log(shp.height);   

        var testPoint = new egret.Shape();
        testPoint.graphics.beginFill(0x000000);
        testPoint.graphics.drawRect(100, 100, 5, 5);    //標記一個黑色的邊界點
        testPoint.graphics.endFill();
        this.addChild(testPoint);          

        var isHit:boolean = shp.hitTestPoint(110, 110); //結論：是否碰撞與 shp.graphics 相關，而與 shp.width/height 無關
        infoTest.text = "碰撞結果" + isHit;              //就算已經 addchild,可以直接修改文本, 結果是 true
        
        shp.graphics.clear();                           //如果不clear, 重新 drawRect 不會生效
        shp.graphics.beginFill(0xff0000);
        shp.graphics.drawRect(0, 0, 100, 100);                                                                                                 
        shp.graphics.endFill();    
        var isHit:boolean = shp.hitTestPoint(110, 110); 
        infoTest.text = "碰撞結果" + isHit;              //結果是 false                                                                                   
    }

　　值得注意的是，精確坐標的碰撞檢測是非常消耗性能的，盡量少用。