【從0開始學(xué)Laya】12-繪制各種形狀

1.線條
參數(shù)(起始點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ù)直線
參數(shù)(起始點x,y,線段點集合(至少3個點,格式:[x1,y1,x2,y2,x3,y3...]),線條顏色,線條寬度)
drawLines(x:number,y:number,points:any[],lineColor:any,lineWidth?:number):laya.display.cmd.DrawLinesCmd;

 //畫連續(xù)直線
sp.graphics.drawLines(176, 58, [0, 0, 39, -50, 78, 0, 117, 50, 156, 0], "#ff0000", 5);
連續(xù)直線

3.曲線,貝塞爾曲線
參數(shù)(起始點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.矩形
參數(shù)(起始點x,y,寬度,高度,邊框色,邊框?qū)挾龋?br> 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.多邊形
參數(shù)(起始點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.圓形
參數(shù)(圓點x,y,半徑,填充顏色,邊框顏色,邊框?qū)挾龋? 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.扇形
參數(shù)(圓心x,y,扇形半徑,開始角度,結(jié)束角度,填充顏色,邊框顏色,邊框?qū)挾龋?br> 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.圓角矩形,自定義繪制
參數(shù)(起始點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"
    });
自定義圖形
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容