ActionScript
TypeScript
JavaScript

绘制圆形与扇形

发布时间:2017-02-10

圆形的绘制理解起来比较简单,通过圆形的中心点坐标与半径,即可方便的通过LayaAir引擎laya.display.Graphics这个API的“drawCircle();”方法实现。该方法的详细说明如下图所示:

blob.png

下面我们用LayaAir引擎绘制一个圆形,示例代码如下:

module laya {
    import Sprite = Laya.Sprite;
    import Stage = Laya.Stage;
    import WebGL = Laya.WebGL;
 
    export class Sprite_DrawShapes {
        private sp: Sprite;
 
        constructor()
        {
            Laya.init(500, 300, WebGL);
            this.drawSomething();
        }
 
        private drawSomething(): void {
            this.sp = new Sprite();
            Laya.stage.addChild(this.sp);
            //画圆
            this.sp.graphics.drawCircle(80,80,50,"#ff0000");
 
        }
    }
}
new laya.Sprite_DrawShapes();


代码运行效果如下图所示:

blob.png


        圆形绘制比较简单,“80,80”是圆形中心点坐标。50是半径,"#ff0000"是圆形填充颜色值。

        下面继续延伸,介绍一下比圆形稍复杂一点的扇形绘制方法“drawPie();”该方法的详细说明如下图所示:

blob.png

下面我们用LayaAir引擎绘制一个扇形,示例代码如下:


blob.png

代码运行效果如下图所示:

module laya {
    import Sprite = Laya.Sprite;
    import Stage = Laya.Stage;
    import WebGL = Laya.WebGL;
 
    export class Sprite_DrawShapes {
        private sp: Sprite;
 
        constructor()
        {
            Laya.init(500, 300, WebGL);
            this.drawSomething();
        }
 
        private drawSomething(): void {
            this.sp = new Sprite();
            Laya.stage.addChild(this.sp);
            //画圆
            this.sp.graphics.drawPie(80,80,50,90,180,"#ff0000");
 
        }
    }
}
new laya.Sprite_DrawShapes();

绘制扇形与圆形类似,前三个参数的用法也是一样的,只是增加了绘制开始与结束的角度。为了让大家更好的理解,扇形的绘制代码与参数沿用圆形代码示例,除了方法名的改变,只增加了90与180两个角度参数。大家可在编码过程中通过调整参数,再深入理解。