【从0开始学Laya】12-绘制各种形状

2020-05-02  本文已影响0人  会奔跑的蘑菇

1.线条
参数(起始点x,y,终点x,y,线条颜色,线条宽度)
drawLine(fromX:number,fromY:number,toX:number,toY:number,lineColor:string,lineWidth?:number):laya.display.cmd.DrawLineCmd;


    let sp = new Laya.Sprite();
    Laya.stage.addChild(sp);
    //画线
    sp.graphics.drawLine(10, 58, 146, 58, "#ff0000", 3);
线条

2.连续直线
参数(起始点x,y,线段点集合(至少3个点,格式:[x1,y1,x2,y2,x3,y3...]),线条颜色,线条宽度)
drawLines(x:number,y:number,points:any[],lineColor:any,lineWidth?:number):laya.display.cmd.DrawLinesCmd;

 //画连续直线
sp.graphics.drawLines(176, 58, [0, 0, 39, -50, 78, 0, 117, 50, 156, 0], "#ff0000", 5);
连续直线

3.曲线,贝塞尔曲线
参数(起始点x,y,线段点集合(至少3个点,格式[controlX, controlY, anchorX, anchorY...]),线条颜色,线条宽度)
drawCurves(x:number,y:number,points:any[],lineColor:any,lineWidth?:number):laya.display.cmd.DrawCurvesCmd;

 //画曲线
 sp.graphics.drawCurves(352, 58, [0, 0, 19, -100, 39, 0, 58, 100, 78, 0, 97, -100, 117, 0, 136, 100, 156, 0], "#ff0000", 5);
贝塞尔曲线

4.矩形
参数(起始点x,y,宽度,高度,边框色,边框宽度)
drawRect(x:number,y:number,width:number,height:number,fillColor:any,lineColor?:any,lineWidth?:number):laya.display.cmd.DrawRectCmd;

    //画矩形
    sp.graphics.drawRect(10, 166, 166, 90, "#ffff00");
矩形

5.多边形
参数(起始点x,y,点集合(至少3个点,[x1,y1,x2,y2,x3,y3...]),填充颜色,线条颜色,线条宽度)
drawPoly(x:number,y:number,points:any[],fillColor:any,lineColor?:any,lineWidth?:number):laya.display.cmd.DrawPolyCmd;

    //画多边形
    sp.graphics.drawPoly(264, 166, [0, 0, 60, 0, 78.48, 57, 30, 93.48, -18.48, 57], "#ffff00");
多边形

6.圆形
参数(圆点x,y,半径,填充颜色,边框颜色,边框宽度) drawCircle(x:number,y:number,radius:number,fillColor:any,lineColor?:any,lineWidth?:number):laya.display.cmd.DrawCircleCmd;

    //画圆
    sp.graphics.drawCircle(98, 332, 50, "#00ffff");
圆形

7.扇形
参数(圆心x,y,扇形半径,开始角度,结束角度,填充颜色,边框颜色,边框宽度)
drawPie(x:number,y:number,radius:number,startAngle:number,endAngle:number,fillColor:any,lineColor?:any,lineWidth?:number):laya.display.cmd.DrawPieCmd;

    //画扇形
    sp.graphics.drawPie(240, 290, 100, 10, 60, "#00ffff");
扇形

8.圆角矩形,自定义绘制
参数(起始点x,y,
路径点集合(支持格式:格式:[["moveTo",x,y],["lineTo",x,y],["arcTo",x1,y1,x2,y2,r],["closePath"]]),
刷子定义(支持格式:{fillStyle:"#FF0000"}),
画笔定义(支持格式:{strokeStyle,lineWidth,lineJoin:"bevel|round|miter",lineCap:"butt|round|square",miterLimit}))
drawPath(x:number,y:number,paths:any[],brush?:any,pen?:any):laya.display.cmd.DrawPathCmd;

    //绘制圆角矩形,自定义路径
    sp.graphics.drawPath(400, 310, [
        ["moveTo", 5, 0],
        ["lineTo", 105, 0],
        ["arcTo", 110, 0, 110, 5, 5],
        ["lineTo", 110, 55],
        ["arcTo", 110, 60, 105, 60, 5],
        ["lineTo", 5, 60],
        ["arcTo", 0, 60, 0, 55, 5],
        ["lineTo", 0, 5],
        ["arcTo", 0, 0, 5, 0, 5],
        ["closePath"]
    ],
    {
        fillStyle: "#00ffff"
    });
自定义图形
上一篇下一篇

猜你喜欢

热点阅读