码迷,mamicode.com
首页 > 其他好文 > 详细

Egret 矢量绘图、遮罩、碰撞检测

时间:2016-10-03 23:30:13      阅读:427      评论:0      收藏:0      [点我收藏+]

标签:

矢量绘图:

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                                                                                   
    }

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

 

Egret 矢量绘图、遮罩、碰撞检测

标签:

原文地址:http://www.cnblogs.com/Daniel-Liang/p/5929334.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!