LayaAir graphics 矢量绘图之多边形、矩形

淡淡的烟草味﹌ 2022-04-08 13:26 599阅读 0赞

**目录**

drawpoly

多边形绘制

drawRect  矩形绘制

drawPath 路径绘制

绘制直角矩形

绘制圆角矩形

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

# drawpoly  #

laya.display.Graphics 类的 [drawpoly() 方法][drawpoly_]可以实现绘制三角形、多边形以及根据指定的路径数据绘制出图案。

> /\*\*  
> ** \* 绘制多边形。**  
>  \* @param x                     开始绘制的 X 轴位置。  
>  \* @param y                     开始绘制的 Y 轴位置。  
>  \* @param points        多边形的点集合。  
>  \* @param fillColor     填充颜色，或者填充绘图的渐变对象。  
>  \* @param lineColor     （可选,默认为 Null）边框颜色，或者填充绘图的渐变对象。  
>  \* @param lineWidth     （可选,默认为1）边框宽度。  
>  \*/  
> drawPoly(x: number, y: number, points: Array<any>, fillColor: any, lineColor?: any, lineWidth?: number): DrawPolyCmd;

# 多边形绘制 #

//使用立即执行函数方式
    (function(){
        //初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
        Laya.init(1334, 750,Laya.WebGL);
        let sp = new Laya.Sprite();
        //可以先添加精灵，后设置精灵
        Laya.stage.addChild(sp);
     
        showTriangle();
        showSquare();
        showH();
    
        //绘制一个等边三角形
        function showTriangle(){
            //三角形的三个点(20,150)、(70,64)、(120,150)
            let arr = [20,150,70,64,120,150];
    
            //直接使用 Sprite 的 grapahics 属性获取 Graphics(绘图)对象进行绘制，使用红色填充三角形
            sp.graphics.drawPoly(100,100,arr,"#f00");
        }
    
        //绘制一个正方形
        function showSquare(){
            //正方形的四个顶点坐标(200,150)、(200,50)、(300,50)、(300,150)，可见边长为 100px
            //注意顶点的顺序如同画笔绘图的顺序，必须按顺时针或者逆时针，不能错乱
            let arr = [200,150,200,50,300,50,300,150];
            sp.graphics.drawPoly(100,100,arr,"#ff0","#fff",3);
        }
    
        //绘制一个 H 形状的图案
        function showH(){
            //多边形顶点必须按顺序排列
            let arr = [400,150,400,50,420,50,420,90,480,90,480,50,500,50,500,150,480,150,480,110,420,110,420,150];
            sp.graphics.drawPoly(100,100,arr,"#fff");
        }
    })();

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

[官网 ][Link 1]说 drawPoly 方法的第三位参数(arr)中所有的坐标都是相对起点 x,y 坐标的，但是本文 LayaAir2.0.0bea5 版本亲测，图像坐标并没有相对起点，而是直接相对原点(0,0)。

# drawRect  矩形绘制 #

laya.display.Graphics 类的 drawRect() 方法用于绘制矢量矩形。上面可以看到 drawPoly 也是可以绘制矩形的。

> /\*\*  
> ** \* 绘制矩形。**  
>  \* @param x             开始绘制的 X 轴位置。  
>  \* @param y             开始绘制的 Y 轴位置。  
>  \* @param width         矩形宽度。  
>  \* @param height        矩形高度。  
>  \* @param fillColor     填充颜色，或者填充绘图的渐变对象。  
>  \* @param lineColor     （可选，默认为null）边框颜色，或者填充绘图的渐变对象。  
>  \* @param lineWidth     （可选，默认为1px）边框宽度。  
>  \*/  
> drawRect(x: number, y: number, width: number, height: number, fillColor: any, lineColor?: any, lineWidth?: number): DrawRectCmd;

![20181214142729845.png][]

# drawPath 路径绘制 #

laya.display.Graphics 类的 drawPath() 方法可以根据路径绘制矢量图形，包括矩形和圆角矩形等。可以代替上面的 drawPoly与 drawRect方法。

>  /\*\*  
>  \* 绘制路径。  
>  \* @param x             开始绘制的 X 轴位置。  
>  \* @param y             开始绘制的 Y 轴位置。  
>  \* @param paths 路径集合，路径支持以下格式：\[\["moveTo",x,y\],\["lineTo",x,y\],\["arcTo",x1,y1,x2,y2,r\],\["closePath"\]\]。  
>  \* @param brush （可选,，默认为null）刷子定义，支持以下设置\{fillStyle\}  
>  \* @param pen   （可选,默认为null）画笔定义，支持以下设置\{strokeStyle,lineWidth,lineJoin,lineCap,miterLimit\}  
>  \*/  
> drawPath(x: number, y: number, paths: Array<any>, brush?: any, pen?: any): DrawPathCmd;

参数 paths 是一个数组，其中的元素也是子数组：

\["moveTo", x, y\]：指定绘制路径的起始点

\["lineTo", x, y\]：绘制一条水平直线、

\["arcTo", p1.x, p1.y, p2.x, p2.y, r\]：绘制弧线，绘制曲线时使用

\["closePath"\]：/闭合路径

**参数 brush** 是一个 json ：fillStyle 表示图形填充的颜色

参数 pen 是一个 json：样式用于描边

## 绘制直角矩形 ##

同样先绘制一个矩形即可掌握它的用法，

//使用立即执行函数方式
    (function(){
        //初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
        Laya.init(1334, 750,Laya.WebGL);
        let sp = new Laya.Sprite();
        //可以先添加精灵，后设置精灵
        Laya.stage.addChild(sp);
     
        showRect();
    
        //绘制一个矩形------drawPath 方式
        function showRect(){
            //直接使用 Sprite 的 grapahics 属性获取 Graphics(绘图)对象进行绘制，使用红色填充三角形
    
            //LayaAir2.0.0beta5实测集合中的坐标都是相对起点坐标(x,y)
            let arr = [
                ["moveTo",20,20],//画笔移动到矩形的左上点
                ["lineTo",220,20],//画笔画到矩形右上角
                ["lineTo",220,120],//再画到右下角
                ["lineTo",20,120],//再画到左下角
                ["closePath"]//闭合路径
            ];
            
            //arr中的坐标都是相对起点坐标，第四个参数为填充样式，第五个为描边样式，都采用json格式
            sp.graphics.drawPath(20,10,arr,{"fillStyle":"#f00"});
        }
    })();

![20181214145204157.png][]

## 绘制圆角矩形 ##

drwaPath 方法不仅可以绘制多边形，也可以绘制弧线，具体的操作需要三步：

1、指定绘制路径的起始点 \["moveTo", x, y\]，如 \["moveTo", 50, 50\]

2、绘制一条水平直线 \["lineTo", x, y\]，如 \["lineTo", 150, 50\]

3、绘制弧线 \["arcTo", p1.x, p1.y, p2.x, p2.y, r\]，如 \["arcTo", 200, 50, 200, 100, 50\]

![图5-1][5-1]

简单的理解就是圆角半径 r 的值为多大，则端点1、端点2相应的坐标也加上 r 即可。

画笔的起始点必须存在，但是绘制直线的 lineTo 可以去掉，如果`["lineTo", 150, 50] `被注释掉，那么arcTo绘制弧线的时候，会视起始点为当前端点，arcTo找不到 lineTo 绘制的直线时，会自动添加一条由起始点到弧线起点的直线，因此，绘制圆角矩形时，lineTo可以省略。

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 2][]

//使用立即执行函数方式
    (function(){
        //初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
        Laya.init(1334, 750,Laya.WebGL);
        let sp = new Laya.Sprite();
        //可以先添加精灵，后设置精灵
        Laya.stage.addChild(sp);
     
        showRect();
    
        //绘制一个圆角矩形------drawPath 方式
        function showRect(){
            //直接使用 Sprite 的 grapahics 属性获取 Graphics(绘图)对象进行绘制，使用红色填充三角形
    
            //LayaAir2.0.0beta5实测集合中的坐标都是相对起点坐标(x,y)
            let arr = [
                ["moveTo",60,20],//画笔移动到矩形的左上点
                ["lineTo",260,20],//画到右上角
                ["arcTo",290,20,290,50,30],//设置圆角，半径为30
                ["lineTo",290,90],//画到右下角
                ["arcTo",290,120,260,120,30],//设置圆角，半径为30，后面依次类推
                ["lineTo",60,120],//
                ["arcTo",30,120,30,90,30],
                ["lineTo",30,50],
                ["arcTo",30,20,60,20,30],
                ["closePath"]//闭合路径
            ];
            
            //arr中的坐标都是相对起点坐标，第四个参数为填充样式，第五个为描边样式，都采用json格式
            // sp.graphics.drawPath(20,10,arr,{"fillStyle":"#f00"},{"strokeStyle":"#ffffff","lineWidth":"5"});
            sp.graphics.drawPath(20,10,arr,{"fillStyle":"#f00"});
        }
    })();

![20181214154335442.png][]

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

[drawpoly_]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Graphics#drawPoly%28%29
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220405/c535ec6914bc4f1aae687445a3d12625.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220405/ef4b0171842744b2b01ade19f01ec7a5.png
[Link 1]: https://ldc.layabox.com/doc/?nav=zh-js-1-4-3
[20181214142729845.png]: /images/20220405/855eb04f1d314cb992d50ddf7d2fff14.png
[20181214145204157.png]: /images/20220405/2b729e32daf44ef5924546733c3b7ec8.png
[5-1]: /images/20220405/1c58d23363644493aeeb4249e2fd2196.png
[https_ldc.layabox.com_doc_nav_zh-js-1-4-5]: https://ldc.layabox.com/doc/?nav=zh-js-1-4-5
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 2]: /images/20220405/1dd52346645a48e08beee2c434296481.png
[20181214154335442.png]: /images/20220405/647dd764ed3e4e25ae15a5d23345589c.png