目錄

Graphic API 概述

直線繪製

折線繪製

曲線繪製

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的影響。