iT邦幫忙

第 12 屆 iThome 鐵人賽

1
Modern Web

再談 PixiJS,那些先前不一定有提到的部分與地雷系列 第 33

[Re:PixiJS - Day33] 畫弧形時可能會有鋸齒的問圖

在畫弧形時可能遇到的問題:
使用一樣的 畫弧形API,在畫 較小的弧形時出現 鋸齒
[ Demo-1 ]

PIXI.Graphics#arc - PIXI.Graphics 的畫弧形API

const arc = new PIXI.Graphics();
arc
    .lineStyle(10, 0xffffff)
    .arc(
        0, // cx: 弧形中心點的 x 座標
        0, // cy: 弧形中心點的 y 座標
        90, // radius: 弧形半徑
        0, // startAngle: 開始弧度 - 值為 0 時在 3 點中的位置
        270 / (180 / Math.PI) // endAngle: 結束弧度
    );
app.stage.addChild(arc);

---
[]https://pixijs.download/dev/docs/PIXI.Graphics.html#arc
const arc2 = new PIXI.Graphics();
arc2
    .lineStyle(10, 0xffffff)
    .arc(
        0,
        0,
        15,
        0,
        270 / (180 / Math.PI)
    );
app.stage.addChild(arc2);

調整 PIXI.GRAPHICS_CURVES 設定:

與昨天 PIXI.settings 類似,但 GRAPHICS_CURVES 直接定義在 PIXI 類別裡

GRAPHICS_CURVESadaptive 值為true時,可以調整
maxLengthmaxSegmentsminSegments 的值,處理這篇討論的畫弧形時產生鋸齒的問題

adaptive 屬性預設值是 true,文件上目前是 false,已發 PR 待更新

[ Demo-2 ]

function drawArcs(){
    // 畫弧形
};

const gui = new dat.GUI();
gui.add(PIXI.GRAPHICS_CURVES, 'adaptive').onChange(guiHandler);
gui.add(PIXI.GRAPHICS_CURVES, 'maxLength', 0 , 100, 1).onChange(guiHandler);
gui.add(PIXI.GRAPHICS_CURVES, 'maxSegments', 0 , 8192, 1).onChange(guiHandler);
gui.add(PIXI.GRAPHICS_CURVES, 'minSegments', 0, 8192, 1).onChange(guiHandler);

function guiHandler() {
    console.log("PIXI.GRAPHICS_CURVES update:");
    console.log(PIXI.GRAPHICS_CURVES);
    
    // PIXI.GRAPHICS_CURVES 改動時需要重新繪製 Graphics 實體,
    // 因此重新呼叫畫弧形的方法
    drawArcs();
};

今日小結:小小雷,遇到這個問題時也許有幫助


相關討論:


上一篇
[Re:PixiJS - Day32] 使用濾鏡時解析度突然變差
下一篇
[Re:PixiJS - Day34] 不同手機使用 PixiJS 的各種問題
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45

尚未有邦友留言

立即登入留言