1. 程式人生 > >egret 示例實戰四:圓弧遮罩

egret 示例實戰四:圓弧遮罩

mas draw 技術分享 info set add sha 繪制 ole

1.繪制圓弧

1 private initGraphics(){
2         this.shape = new egret.Shape();
3         this.shape.x = Main.instance.stage.stageWidth/2;
4         this.shape.y = Main.instance.stage.stageHeight/2;
5         this.addChild(this.shape);
6 }

2.計時修改弧度

 1 private changeGraphics(){
 2         let shape = this
.shape; 3 let angle = 0; 4 let i = 1; 5 egret.startTick(function(timeStamp:number):boolean{ 6 changeGraphics(angle); 7 angle += 1; 8 if(angle >= 360){ 9 angle = angle/360; 10 i *= -1; 11 } 12
return false; 13 },this); 14 function changeGraphics(angle){ 15 shape.graphics.clear(); 16 shape.graphics.beginFill(0xB0E2FF,1); 17 shape.graphics.moveTo(0,0); 18 shape.graphics.lineTo(200,0); 19 shape.graphics.drawArc(0,0,200,0,angle*Math.PI/180,i == -1); 20
shape.graphics.lineTo(0,0); 21 shape.graphics.endFill(); 22 } 23 }

3.效果

技術分享圖片

4.添加一個愛心圖片對象

1         let img = CommonFun.creatBitmapByName(‘love_png‘);
2         img.x = Main.instance.stage.stageWidth/2;
3         img.y = Main.instance.stage.stageHeight/2;
4         img.anchorOffsetX = img.width/2;
5         img.anchorOffsetY = img.height/2;
6         this.addChild(img);

5.效果

技術分享圖片

6.設置圓弧為愛心圖片的遮罩

1 img.mask = this.shape;

7.效果

技術分享圖片

egret 示例實戰四:圓弧遮罩