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/

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

谢谢！

- alexy2k

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/

- Karmacon

---

似乎经过了几年之后，它发生了变化。 - Sérgio S. Filho