目錄

drawCircle 繪製圓形

drawPie 繪製扇形

鋸齒消除設定

drawCircle 繪製圓形

laya.display.Graphics 類的 drawCircle() 方法可以快捷的繪製圓形。

/**
 * 繪製圓形。
 * @param x         圓點X 軸位置。
 * @param y         圓點Y 軸位置。
 * @param radius    半徑。
 * @param fillColor 填充顏色，或者填充繪圖的漸變物件。

 * @param lineColor （可選，預設為null）邊框顏色，或者填充繪圖的漸變物件。
 * @param lineWidth （可選，預設為1）邊框寬度。
 */
drawCircle(x: number, y: number, radius: number, fillColor: any, lineColor?: any, lineWidth?: number): DrawCircleCmd;

//使用立即執行函式方式
(function(){
    //初始化舞臺,設定大小,當瀏覽器不支援 WebGL 時自動切換為 Canvas,
    Laya.init(1334, 750,Laya.WebGL);
    let sp = new Laya.Sprite();
    //可以先新增精靈，後設置精靈
    Laya.stage.addChild(sp);
 
    showCircle();
    showAudi();

    //繪製圓形---一個8字的形狀
    function showCircle(){
        //直接使用 Sprite 的 grapahics 屬性獲取 Graphics(繪圖)物件進行繪製
        //圓心座標(120,80)，半徑 60px，紅色填充
        sp.graphics.drawCircle(120,80,60,"#f00");
        //圓心座標(120,180)，半徑 60px，紅色填充，這樣兩個圓會有20px的重合
        sp.graphics.drawCircle(120,180,60,"#f00");
    }

    //繪製一個類似奧迪的4環圖示
    function showAudi(){
        //直接使用 Sprite 的 grapahics 屬性獲取 Graphics(繪圖)物件進行繪製
        //圓形的顏色與舞臺背景色(預設黑色)一致，邊框為白色
        sp.graphics.drawCircle(350,120,60,"#000","#fff",5);
        sp.graphics.drawCircle(450,120,60,"#000","#fff",5);
        sp.graphics.drawCircle(550,120,60,"#000","#fff",5);
        sp.graphics.drawCircle(650,120,60,"#000","#fff",5);
    }
})();
 

drawPie 繪製扇形

laya.display.Graphics 類的 drawPie() 方法可以快捷的繪製扇形。

/**
 * 繪製扇形。
 * @param x             開始繪製的 X 軸位置。
 * @param y             開始繪製的 Y 軸位置。
 * @param radius        扇形半徑。
 * @param startAngle    開始角度
 * @param endAngle      結束角度。
 * @param fillColor     填充顏色，或者填充繪圖的漸變物件。
 * @param lineColor     （可選）邊框顏色，或者填充繪圖的漸變物件。
 * @param lineWidth     （可選）邊框寬度。
 */
drawPie(x: number, y: number, radius: number, startAngle: number, endAngle: number, fillColor: any, lineColor?: any, lineWidth?: number): DrawPieCmd;

開始角度、結束角度直接使用數值，如 90,180 ...，而不要使用 Math.PI 來表示。

繪製扇形與圓形類似，前三個引數的用法也是一樣的，只是增加了繪製開始與結束的角度。

//使用立即執行函式方式
(function(){
    //初始化舞臺,設定大小,當瀏覽器不支援 WebGL 時自動切換為 Canvas,
    Laya.init(1334, 750,Laya.WebGL);
    let sp = new Laya.Sprite();
    //可以先新增精靈，後設置精靈
    Laya.stage.addChild(sp);
 
    showPie();
    showTrident();

    //繪製一把扇子的形狀
    function showPie(){
        //直接使用 Sprite 的 grapahics 屬性獲取 Graphics(繪圖)物件進行繪製
        //扇形的圓心為(150,200)、半徑為 120px，起始角度為 225度(第2象限中間)，終點為 315度(第1象限中間)
        sp.graphics.drawPie(150,200,120,225,315,"#f00","#ff0",3);
    }

    //繪製一把禪杖
    function showTrident(){
        //繪製左邊的扇形
        //圓形(400,120)、半徑 100，起始邊在第3象限中間、終點邊在第2象限中間
        sp.graphics.drawPie(400,120,100,135,225,"#fff");

        //繪製中間的橫杆，起點在(390,110)，剛好與上面的扇形保持10px的重合
        sp.graphics.drawRect(390,110,300,20,"#fff");

        //繪製右側的圓形，圓心為(700,120)，因為橫杆高是20，所以圓心要在橫杆y的基礎上+10，圓形半徑為30
        sp.graphics.drawCircle(700,120,30,"#fff");
    }
})();

鋸齒消除設定

     在 PC電 腦的瀏覽器上，經常發現 LayaAir 引擎繪製的向量圖會有一些鋸齒，這是由於 LayaAir 引擎基於效能的考慮，做的優化處理，由於移動手機端的畫素密度比較大，所以在 PC 上看起來明顯的鋸齒問題，其實在移動裝置上基本上看不出來。

    如果有追求完美的開發者，也可以通過在 "Laya.init();" 初始化舞臺的程式碼之前，加一行程式碼“Laya.Config.isAntialias=true;”開啟鋸齒消除設定，那麼在手機端，就完全看不到鋸齒了。當然，開啟這個設定後是會增加效能的消耗。因此，建議遊戲開發過程中儘可能少用向量圖形，即便使用後，基於效能考慮，儘可能不要開啟鋸齒消除設定。

//消除向量繪製的鋸齒，但會增加效能消耗
Laya.Config.isAntialias=true;
//初始化舞臺
Laya.init(500, 300, WebGL);

官網介紹地址：https://ldc.layabox.com/doc/?nav=zh-js-1-4-6