Graphic API 概述

1、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

直线绘制

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

折线绘制

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

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

曲线绘制

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

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

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

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

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

更多理论知识可以参考官网：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);
    }
})();

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

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

Graphic API 概述

直线绘制

折线绘制

曲线绘制

猜你喜欢