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

最新推荐文章于 2023-12-05 17:43:46 发布

蚩尤后裔-汪茂雄

最新推荐文章于 2023-12-05 17:43:46 发布

阅读量4.5k

点赞数 3

分类专栏： Layabox(JS)

本文链接：https://blog.csdn.net/wangmx1993328/article/details/85001873

版权

Layabox(JS) 专栏收录该内容

41 篇文章

订阅专栏

drawpoly

laya.display.Graphics 类的 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");
    }
})();

官网说 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;

//使用立即执行函数方式
(function(){
    //初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
    Laya.init(1334, 750,Laya.WebGL);
    let sp = new Laya.Sprite();
    //可以先添加精灵，后设置精灵
    Laya.stage.addChild(sp);
 
    showRect();
    showRect2();

    //绘制一个矩形------drawRect 方式
    function showRect(){
        //直接使用 Sprite 的 grapahics 属性获取 Graphics(绘图)对象进行绘制，使用红色填充三角形
        sp.graphics.drawRect(20,20,200,100,"#ff0","#fff",3);

    }

    //绘制一个矩形---drawPoly 方式
    function showRect2(){
        let arr = [300,120,300,20,500,20,500,120];
        sp.graphics.drawPoly(0,0,arr,"#ff0","#fff",3);
    }
})();

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"});
    }
})();

绘制圆角矩形

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

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

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

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

//使用立即执行函数方式
(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"});
    }
})();