LayaAir graphics 矢量绘图之直线、折线、曲线

偏执的太偏执、 2022-04-08 12:41 545阅读 0赞

**目录**

Graphic API 概述

直线绘制

折线绘制

曲线绘制

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

# Graphic API 概述 #

1、[laya.display.Graphics 类][laya.display.Graphics]用于创建绘图显示对象，可以同时绘制多个位图或者矢量图

2、可以结合 save，restore，transform，scale，rotate，translate，alpha 等指令对绘图效果进行变化

3、Graphics 以命令流方式存储，可以通过 cmds 属性访问所有命令流

4、Graphics 是比 Sprite 更轻量级的对象，合理使用能提高应用性能(比如把大量的节点绘图改为一个节点的Graphics命令集合，能减少大量节点创建消耗)。

官方 API地址：[https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Graphics][laya.display.Graphics]

# 直线绘制 #

drawLine() 方法用于绘制矢量直线。

> /\*\*  
> ** \* 绘制一条线。**  
>  \* @param fromX        X轴开始位置。  
>  \* @param fromY        Y轴开始位置。  
>  \* @param toX        X轴结束位置。  
>  \* @param toY        Y轴结束位置。  
>  \* @param lineColor    颜色。  
>  \* @param lineWidth    （可选,默认为1）线条宽度。  
>  \*/  
> drawLine(fromX: number, fromY: number, toX: number, toY: number, lineColor: string, lineWidth?: number): DrawLineCmd;

//使用立即执行函数方式
    (function(){
        //初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
        Laya.init(1334, 750,Laya.WebGL);
        let sp = new Laya.Sprite();
        //可以先添加精灵，后设置精灵
        Laya.stage.addChild(sp);
    
        showError();
        showSuccess();
    
        //绘制一把×
        function showError(){
            //直线起点为(50,20)，终点为 (100,100)，颜色为红色，线宽默认为1px
            sp.graphics.drawLine(50,20,100,100,"#f00");
            //直线起点为(100,20)，终点为 (50,100)，颜色为红色，线宽默认为1px
            sp.graphics.drawLine(100,20,50,100,"#f00");
        }
    
        //绘制一把 √
        function showSuccess(){
            //颜色为白色，线宽3px
            sp.graphics.drawLine(150,70,170,100,"#fff",3);
            sp.graphics.drawLine(170,100,200,20,"#fff",3);
        }
    })();

![20181214095242896.png][]

# 折线绘制 #

drawLine() 方法用于绘制矢量直线，使用 drawLines() 方法绘制折线，注意结尾是 "s"，即一系列直线组成的折线。

> /\*\*  
> ** \* 绘制一系列线段。**  
>  \* @param x                     开始绘制的X轴位置。  
>  \* @param y                     开始绘制的Y轴位置。  
>  \* @param points        线段的点集合。格式:\[x1,y1,x2,y2,x3,y3...\]。  
>  \* @param lineColor     线段颜色，或者填充绘图的渐变对象。  
>  \* @param lineWidth     （可选，默认为1）线段宽度。  
>  \*/  
> drawLines(x: number, y: number, points: Array<any>, lineColor: any, lineWidth?: number): DrawLinesCmd;

//使用立即执行函数方式
    (function(){
        //初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
        Laya.init(1334, 750,Laya.WebGL);
        let sp = new Laya.Sprite();
        //可以先添加精灵，后设置精灵
        Laya.stage.addChild(sp);
    
        showFiveStar();
    
        //绘制一个五角星
        function showFiveStar(){
            //表示画笔从(30,110)开始，画到(170,105)，在画到(200,10)....最后再画到终点也是起点(30,110)
            let arr = [30,110,170,105,200,10,240,105,370,110,270,200,305,315,200,205,100,315,135,200,30,110];
            sp.graphics.drawLines(30,110,arr,"#f00",3);
        }
    })();

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

[官网][Link 1]说：第三位参数 array 中所有的坐标都是相对坐标，都是相对一位x和第二位参数y，只要 x,y变化，则整体折线都会受到影响，然而经过实测发现，整个图形只受array中的参数影响，而与 x,y参数无关。本文使用的 LayaAir2.0.0beta5版本。

# 曲线绘制 #

1、贝塞尔曲线是应用于二维图形应用程序的数学曲线。曲线的定义有四个点：起始点、终止点（也称锚点）以及两个相互分离的中间点。滑动两个中间点，贝塞尔曲线的形状会发生变化。

2、基于线性、二次方、三次方等公式的不同，贝塞尔曲线也被称为一次(阶)、二次(阶)……五次(阶)贝塞尔曲线

3、一般的矢量图形软件都是通过贝塞尔曲线来精确画出曲线，PS 上的钢笔工具就是来做这种矢量曲线的。

![20181214110826297.gif][]

4、LayaAir 引擎的曲线绘制采用的是**二次贝塞尔曲线。**

![2.gif][]

![blob.png][]

说明：为建构二次贝塞尔曲线，上图由 P0 至 P1 的连续点 Q0，描述一条线性贝塞尔曲线。由 P1 至 P2 的连续点 Q1，描述一条线性贝塞尔曲线。由 Q0 至 Q1 的连续点 B(t)，描述一条二次贝塞尔曲线。

更多理论知识可以参考官网：[https://ldc.layabox.com/doc/?nav=zh-js-1-4-2][https_ldc.layabox.com_doc_nav_zh-js-1-4-2]

laya.display.Graphics 类的 drawCurves() 方法用于绘制曲线。

> /\*\*  
> \* 绘制一系列曲线。  
> \* @param x                     开始绘制的 X 轴位置。  
> \* @param y                     开始绘制的 Y 轴位置。  
> \* @param points        线段的点集合，格式\[controlX, controlY, anchorX, anchorY...\]。  
> \* @param lineColor     线段颜色，或者填充绘图的渐变对象。  
> \* @param lineWidth     （可选,默认为1px）线段宽度。  
> \*/  
> drawCurves(x: number, y: number, points: Array<any>, lineColor: any, lineWidth?: number): DrawCurvesCmd;

//使用立即执行函数方式
    (function(){
        //初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
        Laya.init(1334, 750,Laya.WebGL);
        let sp = new Laya.Sprite();
        //可以先添加精灵，后设置精灵
        Laya.stage.addChild(sp);
     
        showM();
        showM2();
     
        //绘制一个麦当劳的LOGO "M"
        function showM(){
            //直接使用 Sprite 的 grapahics 属性获取 Graphics(绘图)对象
            //起点为(0,0)，数组中线段点位置都是相对起点(0,0)
            let arr = [14,150,66,10,109,138,150,10,193,150];
            sp.graphics.drawCurves(0,0,arr,"#ff0",8);
        }
    
        //绘制一个麦当劳的LOGO "M"
        function showM2(){
            //直接使用 Sprite 的 grapahics 属性获取 Graphics(绘图)对象
            //起点为(230,150)，数组中线段点位置都是相对起点(230,150),正数为在启动的基准上相加，负数为在起点的基准上相减
            let arr = [0,0,50,-140,100,-10,150,-140,200,0];
            sp.graphics.drawCurves(230,150,arr,"#fff",8);
        }
    })();

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

drawCurves 方法中第三位参数 arrar 中所有的坐标都是相对起点(x,y)，都会受到x,y的影响。

[laya.display.Graphics]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Graphics
[20181214095242896.png]: /images/20220405/e3d402f5a0944f91b503de1178ada87a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220405/e31d0079270143c7acc8f9cb43784a6c.png
[Link 1]: https://ldc.layabox.com/doc/?nav=zh-js-1-4-1
[20181214110826297.gif]: /images/20220405/5d7a9020c6de44e9922ec6755f2f6f42.png
[2.gif]: /images/20220405/f301be3c9c42411db9039eccbf0e6b3c.png
[blob.png]: /images/20220405/d83fc69bf5764df59672ae27ac4cf249.png
[https_ldc.layabox.com_doc_nav_zh-js-1-4-2]: https://ldc.layabox.com/doc/?nav=zh-js-1-4-2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220405/ce5e3a18711c4e60ba3e50b54ede638e.png