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

定義一個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(大叫)