学习笔记：一起进入 PixiJS 的世界 (三)

来点互动效果吧!

除了绘图外，PixiJS也能设定互动体验，像是上一篇使用PIXI.Graphics()所建构出来的物件，就属於可以设定互动效果的PixiJS定义的DisplayObject的一项。使用方法很简单，首先，先物件的interactive属性设定为true值，就能使加上监听事件并执行对应的互动效果。

let app = new PIXI.Application({ width:800, height: 400 })
document.body.appendChild(app.view);

let myObj = new PIXI.Graphics();
app.stage.addChild(myObj);
myObj.beginFill(0xff0000);
myObj.drawRect(0, 0, 200, 100);

//将物件的互动效果打开
myObj.interactive = true;
//监听'pointerdown'点击事件，执行对应function()
myObj.on('pointerdown', () => { alert('按钮点击'); });

另外，也可以将buttonMode属性设定为true值，被指定的物件的游标将会转成手指符号，有互动的暗示效果。

myObj.buttonMode = true;