首页 > 代码库 > Egret 矢量绘图、遮罩、碰撞检测
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 }
值得注意的是，精确坐标的碰撞检测是非常消耗性能的，尽量少用。
Egret 矢量绘图、遮罩、碰撞检测
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。