iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0

延續上篇,這篇主要在於互動這塊

定義一個Graphics,並且要設定成白色,作為筆刷
因為mask的設定是黑色為透空,白色不透空,renderTexture目前是黑色,筆刷則設定成白色
被刷成白色的部分就會顯示出來

var brush = new PIXI.Graphics();
brush.beginFill(0xffffff);
brush.drawCircle(0, 0, 50);
brush.endFill();

先將stage設定為可互動

    app.stage.interactive = true;
    // ...接續

監聽drag/touch事件

    app.stage.on('pointerdown', pointerDown);
    app.stage.on('pointerup', pointerUp);
    app.stage.on('pointermove', pointerMove);

    var dragging = false;

在pointerMove時,設定brush的位置,並且渲染更新
app.renderer.render參數(渲染更改的來源,renderTexture,是否清除之前的渲染)

    function pointerMove(event) {
        if (dragging) {
            brush.position.copy(event.data.global);
            app.renderer.render(brush, renderTexture, false);
        }
    }

    function pointerDown(event) {
        dragging = true;
        pointerMove(event);
    }

    function pointerUp(event) {
        dragging = false;
    }
} //setup()結束

還有兩天RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR(大叫)


上一篇
Day27 用mask做刮刮樂效果(1) RenderTexture
下一篇
Day29 簡易版打地鼠小遊戲(1) 畫出場景
系列文
30天Pixi帶你飛上天30

1 則留言

0
King Tzeng
iT邦新手 5 級 ‧ 2018-11-12 09:49:34

想看刮刮樂可以刮出什麼來XDDDD

在前一篇有放XDD
原本想刮出大棕熊 但我懶了直接用現有的圖(咦

XDDDDDD

我要留言

立即登入留言