javascript - 使用 PixiJS 的交互式图形 - 鼠标悬停不会触发，而点击会触发

Question

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

这是带有 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/

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

谢谢!

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/