ActionScript
TypeScript
JavaScript

绘制圆形与扇形

发布时间:2017-02-10

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

blob.png

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

package
{
    import laya.display.Sprite;
    import laya.display.Stage;
     
    public class Sprite_DrawShapes
    {
        private var sp:Sprite;
         
        public function Sprite_DrawShapes()
        {
            Laya.init(500, 300);
            drawSomething();
        }
 
        private function drawSomething():void
        {
            sp = new Sprite();
            Laya.stage.addChild(sp);
            //画圆
            sp.graphics.drawCircle(80,80,50,"#ff0000");
             
        }
    }
}

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

blob.png


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

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

blob.png

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

package
{
    import laya.display.Sprite;
    import laya.display.Stage;
     
    public class Sprite_DrawShapes
    {
        private var sp:Sprite;
         
        public function Sprite_DrawShapes()
        {
            Laya.init(500, 300);
            drawSomething();
        }
 
        private function drawSomething():void
        {
            sp = new Sprite();
            Laya.stage.addChild(sp);
            //画扇形
            sp.graphics.drawCircle(80,80,50,90,180,"#ff0000");
             
        }
    }
}

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

blob.png

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