ActionScript
TypeScript
JavaScript

绘制圆形与扇形

发布时间:2017-02-10

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

blob.png

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

(function()
{
    var Sprite = Laya.Sprite;
    var Stage  = Laya.Stage;
 
    (function()
    {
        //初始化舞台
        Laya.init(500, 300);
        drawSomething();
    })();
 
    function drawSomething()
    {
        var sp = new Sprite();
        Laya.stage.addChild(sp);
        //画圆
        sp.graphics.drawCircle(80,80,50,"#ff0000");
     }
})();


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

blob.png


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

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

blob.png

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


blob.png

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

(function()
{
    var Sprite = Laya.Sprite;
    var Stage  = Laya.Stage;
 
    (function()
    {
        //初始化舞台
        Laya.init(500, 300);
        drawSomething();
    })();
 
    function drawSomething()
    {
        var sp = new Sprite();
        Laya.stage.addChild(sp);
        //画圆
        sp.graphics.drawPie(80,80,50,90,180,"#ff0000");
     }
})();

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