Egret 矢量绘图遮罩碰撞检测

Posted 2020-08-12 青墨淡潋

矢量绘图：

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                                                                                   
    }

　　值得注意的是，精确坐标的碰撞检测是非常消耗性能的，尽量少用。