带有 PixiJS 的交互式图形 - 鼠标悬停不会触发，而单击会触发

Question

将鼠标悬停在 Graphics 元素上时尝试触发事件。click 事件按预期工作，但鼠标悬停似乎没有触发。

这是带有 fiddlejs 链接的摘录：

var renderer = PIXI.autoDetectRenderer(500, 500, null, true);
var stage = new PIXI.Stage(0xFFFFFF);
stage.interactive = true;

document.getElementById("canvas").appendChild(renderer.view);

var rect = new PIXI.Graphics();
rect.lineStyle(1, 0x000);

rect.interactive = true;
rect.hitArea = new PIXI.Rectangle(0,0, 200, 200);
rect.drawRect(0,0, 200,200);
rect.click = function(ev) { console.log("clicked"); }
rect.mouseover = function(ev) { console.log("over"); }
stage.addChild(rect);

renderer.render(stage);

FiddleJS 链接：http : //jsfiddle.net/anps0abt/

也许我应该使用精灵而不是图形元素？

谢谢！

Answer 1

PIXI.InteractionManager 在它的 update() 函数中处理 mouseover 和 mouseout 事件。您需要在每一帧中不断更新渲染器，以便从这些事件中获得响应

var renderer = PIXI.autoDetectRenderer(500, 500, null, true);
var stage = new PIXI.Stage(0xFFFFFF);
stage.interactive = true;

document.getElementById("canvas").appendChild(renderer.view);

var rect = new PIXI.Graphics();
rect.lineStyle(1, 0x000);

rect.interactive = true;
rect.hitArea = new PIXI.Rectangle(0,0, 200, 200);
rect.drawRect(0,0, 200,200);
rect.click = function(ev) { console.log("clicked"); }
rect.mouseover = function(ev) { console.log("over"); }
stage.addChild(rect);

update();
function update(){
    requestAnimFrame(update);
    renderer.render(stage);
};

http://jsfiddle.net/anps0abt/3/