目录
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]
简单的理解就是圆角半径 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"});
}
})();