LayaAir graphics 矢量绘图之圆形与扇形

谁践踏了优雅 2022-04-04 03:17 561阅读 0赞

**目录**

drawCircle 绘制圆形

drawPie 绘制扇形

锯齿消除设置

--------------------

# drawCircle 绘制圆形 #

[laya.display.Graphics 类的 drawCircle() ][laya.display.Graphics _ drawCircle_]方法可以快捷的绘制圆形。

> /\*\*  
>  \* 绘制圆形。  
>  \* @param x         圆点X 轴位置。  
>  \* @param y         圆点Y 轴位置。  
>  \* @param radius    半径。  
>  \* @param fillColor 填充颜色，或者填充绘图的渐变对象。  
>  \* @param lineColor （可选，默认为null）边框颜色，或者填充绘图的渐变对象。  
>  \* @param lineWidth （可选，默认为1）边框宽度。  
>  \*/  
> drawCircle(x: number, y: number, radius: number, fillColor: any, lineColor?: any, lineWidth?: number): DrawCircleCmd;

//使用立即执行函数方式
    (function(){
        //初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
        Laya.init(1334, 750,Laya.WebGL);
        let sp = new Laya.Sprite();
        //可以先添加精灵，后设置精灵
        Laya.stage.addChild(sp);
     
        showCircle();
        showAudi();
    
        //绘制圆形---一个8字的形状
        function showCircle(){
            //直接使用 Sprite 的 grapahics 属性获取 Graphics(绘图)对象进行绘制
            //圆心坐标(120,80)，半径 60px，红色填充
            sp.graphics.drawCircle(120,80,60,"#f00");
            //圆心坐标(120,180)，半径 60px，红色填充，这样两个圆会有20px的重合
            sp.graphics.drawCircle(120,180,60,"#f00");
        }
    
        //绘制一个类似奥迪的4环图标
        function showAudi(){
            //直接使用 Sprite 的 grapahics 属性获取 Graphics(绘图)对象进行绘制
            //圆形的颜色与舞台背景色(默认黑色)一致，边框为白色
            sp.graphics.drawCircle(350,120,60,"#000","#fff",5);
            sp.graphics.drawCircle(450,120,60,"#000","#fff",5);
            sp.graphics.drawCircle(550,120,60,"#000","#fff",5);
            sp.graphics.drawCircle(650,120,60,"#000","#fff",5);
        }
    })();

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

# drawPie 绘制扇形 #

[laya.display.Graphics 类的 drawPie() ][laya.display.Graphics _ drawCircle_]方法可以快捷的绘制扇形。

> /\*\*  
>  \* 绘制扇形。  
>  \* @param x             开始绘制的 X 轴位置。  
>  \* @param y             开始绘制的 Y 轴位置。  
>  \* @param radius        扇形半径。  
>  \* @param startAngle    开始角度  
>  \* @param endAngle      结束角度。  
>  \* @param fillColor     填充颜色，或者填充绘图的渐变对象。  
>  \* @param lineColor     （可选）边框颜色，或者填充绘图的渐变对象。  
>  \* @param lineWidth     （可选）边框宽度。  
>  \*/  
> drawPie(x: number, y: number, radius: number, startAngle: number, endAngle: number, fillColor: any, lineColor?: any, lineWidth?: number): DrawPieCmd;

![20181214163651679.png][]

开始角度、结束角度直接使用数值，如 90,180 ...，而不要使用 Math.PI 来表示。

绘制扇形与圆形类似，前三个参数的用法也是一样的，只是增加了绘制开始与结束的角度。

//使用立即执行函数方式
    (function(){
        //初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
        Laya.init(1334, 750,Laya.WebGL);
        let sp = new Laya.Sprite();
        //可以先添加精灵，后设置精灵
        Laya.stage.addChild(sp);
     
        showPie();
        showTrident();
    
        //绘制一把扇子的形状
        function showPie(){
            //直接使用 Sprite 的 grapahics 属性获取 Graphics(绘图)对象进行绘制
            //扇形的圆心为(150,200)、半径为 120px，起始角度为 225度(第2象限中间)，终点为 315度(第1象限中间)
            sp.graphics.drawPie(150,200,120,225,315,"#f00","#ff0",3);
        }
    
        //绘制一把禅杖
        function showTrident(){
            //绘制左边的扇形
            //圆形(400,120)、半径 100，起始边在第3象限中间、终点边在第2象限中间
            sp.graphics.drawPie(400,120,100,135,225,"#fff");
    
            //绘制中间的横杆，起点在(390,110)，刚好与上面的扇形保持10px的重合
            sp.graphics.drawRect(390,110,300,20,"#fff");
    
            //绘制右侧的圆形，圆心为(700,120)，因为横杆高是20，所以圆心要在横杆y的基础上+10，圆形半径为30
            sp.graphics.drawCircle(700,120,30,"#fff");
        }
    })();

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

# 锯齿消除设置 #

在 PC电 脑的浏览器上，经常发现 LayaAir 引擎绘制的矢量图会有一些锯齿，这是由于 LayaAir 引擎基于性能的考虑，做的优化处理，由于移动手机端的像素密度比较大，所以在 PC 上看起来明显的锯齿问题，其实在移动设备上基本上看不出来。

如果有追求完美的开发者，也可以通过在 "Laya.init();" 初始化舞台的代码之前，加一行代码“Laya.Config.isAntialias=true;”开启锯齿消除设置，那么在手机端，就完全看不到锯齿了。当然，开启这个设置后是会增加性能的消耗。因此，建议游戏开发过程中尽可能少用矢量图形，即便使用后，基于性能考虑，尽可能不要开启锯齿消除设置。

> //消除矢量绘制的锯齿，但会增加性能消耗  
> Laya.Config.isAntialias=true;  
> //初始化舞台  
> Laya.init(500, 300, WebGL);

官网介绍地址：[https://ldc.layabox.com/doc/?nav=zh-js-1-4-6][https_ldc.layabox.com_doc_nav_zh-js-1-4-6]

[laya.display.Graphics _ drawCircle_]: https://ldc.layabox.com/doc/?nav=zh-js-1-4-4
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220404/e40c681927274090bd08eaec3edae6e8.png
[20181214163651679.png]: /images/20220404/adeabdfe4c1b45cd9bd283bf0d9c6e1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220404/f240bd57480744a28b9ca9fa2772086d.png
[https_ldc.layabox.com_doc_nav_zh-js-1-4-6]: https://ldc.layabox.com/doc/?nav=zh-js-1-4-6