代碼：

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 }

?

轉載于:https://www.cnblogs.com/allyh/p/10434722.html

總結

以上是生活随笔為你收集整理的egret.Shape渲染集合图形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。