egret.Shape渲染集合图形

Posted 2021-02-11 allyh

代码：

 1 class Main extends egret.DisplayObjectContainer
 2 {
 3     public constructor()
 4     {
 5         super();
 6         this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
 7     }
 8     //绘制直线
 9     private onAddToStage(event:egret.Event)
10     {
11         var shp:egret.Shape = new egret.Shape();
12         shp.graphics.lineStyle( 2, 0x00ff00 );
13         shp.graphics.moveTo( 10,10 );
14         shp.graphics.lineTo( 100, 20 );
15         shp.graphics.endFill();
16         this.addChild( shp );
17     }
18 }

  2.

 1 class EgretBookScr extends egret.DisplayObjectContainer {
 2     private logo: egret.Bitmap;
 3 
 4     public constructor() {
 5         super(); 
 6         this.addEventListener(egret.Event.ADDED_TO_STAGE, this.startGame, this);   
 7     } 
 8     public startGame(): void {
 9         //alert("hello world");
10         this.createGameScene();
11     }
12     private createGameScene():void{
13         //创建一个Shape对象
14         var circle:egret.Shape = new egret.Shape();
15         //1:参数1：一个整数，以点为代为表示线段的粗细，有效值为（0--255）；若未指定该参数，则不绘制线条,为0，表示极细；
16         //若值大于255,则默认值是255
17         //参数2：指定一种线条样式，用于对lineto或drawcircle等Graphics方法的调用
18         circle.graphics.lineStyle(0,0xffffff);
19         //参数：填充颜色(简单的单色填充)、透明度?
20         //调用clear会清楚填充
21         circle.graphics.beginFill(0x00ff00,0.8);
22         //(x:number,y:number,radius:number):x:圆心相对于父显示对象注册点的x位(以像素为单位) 绘制一个圆
23         circle.graphics.drawCircle(0,0,100);//此时会显示右下部分的1/4的圆，因为xy的值
24         circle.graphics.drawCircle(100,100,100);//若上一句代码不注释，显示的图形类似水滴；
25         circle.graphics.endFill();
26         this.addChild(circle);
27     }
28 }

 

 1 class Main extends egret.DisplayObjectContainer
 2 {
 3     public constructor()
 4     {
 5         super();
 6         this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
 7     }
 8     //绘制圆弧的方法
 9     
10     private onAddToStage(event:egret.Event)
11     {
12         var shp:egret.Shape = new egret.Shape();
13         shp.graphics.beginFill( 0x1122cc );
14         //drawArc(x:number,y:number,radius:number,startAngle:number,endAngle:number,anticlockwise:boolean):void
15         //圆弧路径的圆心在（x,y) 半径为radius 。anticlockwise参数为true,则逆时针绘制圆弧；否则为顺时针绘制
16         shp.graphics.drawArc(200,200,100,0,Math.PI,true);
17         shp.graphics.endFill();
18         this.addChild( shp );
19     }
20 }

完整的绘制：

  1 class ShapeTest extends egret.DisplayObjectContainer {
  2     public constructor() {
  3         super();
  4         this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
  5     }
  6     private onAddToStage(event: egret.Event) {
  7         this.drawRect(event);
  8         this.drawCircle(event);
  9         this.drawLine(event);
 10         this.drawCurve(event);
 11         this.drawArc(event);
 12         this.drawTest(event);
 13     }
 14     //绘制矩形
 15     private drawRect(evt: egret.Event) {
 16         var shp: egret.Shape = new egret.Shape();
 17         shp.graphics.lineStyle(10, 0x00ff00);//第一个参数：描边的线条宽度，第二个参数是描边的颜色
 18         shp.graphics.beginFill(0xff0000, 0.8);//red 设置矩形的填充颜色，第二个参数是透明度；1表示透明度 
 19         shp.graphics.drawRect(500, 500, 100, 200);//设置矩形的形状，绘制的是100*200的矩形  
 20         shp.graphics.lineStyle(10, 0x00ff00);//无作用
 21         shp.graphics.endFill();//结束当前绘制操作 若要对矩形加描边，可以设置线条的样式
 22         //通关lineStyle方法来设置 代码需要放在绘制代码之前,否则无效，且不报错 
 23         this.addChild(shp);
 24         ///////////////////////清空绘制:将已经绘制的图像全部清空,清除一个对象的绘图////////////////////////////////////////////////
 25         //shp.graphics.clear();
 26     }
 27     //绘制圆形
 28     private drawCircle(event: egret.Event) {
 29         var shp: egret.Shape = new egret.Shape();
 30         shp.x = 300;
 31         shp.y = 300;
 32         shp.graphics.lineStyle(10, 0x00ff00);
 33         shp.graphics.beginFill(0xff0000, 1);
 34         shp.graphics.drawCircle(0, 0, 50);//相对于父显示对象注册点的圆心的X轴位置，Y轴坐标值，圆的半径以像素为单位
 35         shp.graphics.endFill();//结束当前绘制操作 若要对矩形加描边，可以设置线条的样式
 36         //通关lineStyle方法来设置 代码需要放在绘制代码之前,否则无效，且不报错 
 37         this.addChild(shp);
 38     }
 39     //绘制直线需要使用两个方法，一个绘制起始点，另一个负责绘制直线的终点；
 40     private drawLine(evt: egret.Event) {
 41         var shp: egret.Shape = new egret.Shape();
 42         shp.graphics.lineStyle(2, 0x00ff00);
 43         shp.graphics.moveTo(200, 200);//将当前绘图位置移动到（x,y)/若缺少任一参数，该方法失效，则当前绘图位置不变
 44         shp.graphics.lineTo(200, 600);//直线结束的（x,y) //c此时为竖直的一个线段，若要连续的线段，形成折线
 45         //绘制首尾相接的直线，后边连续使用lineTo即可
 46         shp.graphics.moveTo(300, 300);
 47         shp.graphics.lineTo(100, 200);
 48         shp.graphics.lineTo(400, 80);
 49         shp.graphics.lineTo(600, 900);
 50 
 51         shp.graphics.endFill();
 52 
 53         this.addChild(shp);
 54     }
 55     //绘制曲线
 56     //Egret 提供的曲线是一个二次贝塞尔曲线，绘图方法curveTo
 57     private drawCurve(evt: egret.Event) {
 58         var shp: egret.Shape = new egret.Shape();
 59         shp.graphics.lineStyle(2, 0xff0000);
 60         shp.graphics.moveTo(600, 600);
 61         shp.graphics.curveTo(0, 0, 200, 50);
 62         shp.graphics.endFill();
 63         this.addChild(shp);
 64     }
 65     //绘制圆弧
 66     //Egret 提供的弧形绘图方法drawArc
 67     private drawArc(evt: egret.Event) {
 68         var shp: egret.Shape = new egret.Shape();
 69         shp.graphics.beginFill(0x1122cc);
 70         shp.graphics.drawArc(500, 500, 100, 0, Math.PI, false);//圆心位置（x,y);radius;anticlockwise:true:逆时针绘制圆弧
 71         shp.graphics.endFill();
 72         this.addChild(shp);
 73     }
 74     //多个图形绘制
 75     //相互是独立的，每次绘制填充都必须以endfill结束，才能开始下次绘制
 76     //绘制4个正方形小格子
 77     private drawTest(evt: egret.Event) {
 78         var shp: egret.Shape = new egret.Shape();
 79          
 80         shp.graphics.beginFill(0xff0000, 0.8); 
 81         shp.graphics.drawRect(0, 0, 50, 50);  
 82         shp.graphics.endFill(); 
 83 
 84         shp.graphics.beginFill(0x00ff00, 0.8); 
 85         shp.graphics.drawRect(50, 50, 50, 50);  
 86         shp.graphics.endFill();   
 87 
 88         shp.graphics.beginFill(0x0000ff, 0.8); 
 89         shp.graphics.drawRect(50, 0, 50, 50);  
 90         shp.graphics.endFill();  
 91 
 92         shp.graphics.beginFill(0x0000cc, 0.8); 
 93         shp.graphics.drawRect(0, 50, 50, 50);  
 94         shp.graphics.endFill(); 
 95 
 96         this.addChild(shp);
 97 
 98     }
 99 
100 }