javascript - Interactive Graphics with PixiJS - mouseover doesn't fire, while click does - Stack Overflow

admin管理员组

文章数量:1395408

Trying to fire events when hovering over Graphics element. click event works as expected, but mouseover does not seem to fire.

Here's excerpt with fiddlejs link:

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 link: /

Maybe I should use sprites instead of Graphics elements?

Thanks!

Trying to fire events when hovering over Graphics element. click event works as expected, but mouseover does not seem to fire.

Here's excerpt with fiddlejs link:

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 link: http://jsfiddle/anps0abt/

Maybe I should use sprites instead of Graphics elements?

Thanks!

• javascript
• pixi.js

Share Improve this question Follow edited Nov 20, 2014 at 18:56 alexy2k asked Nov 19, 2014 at 19:57 alexy2kalexy2k 56011 gold badge66 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

PIXI.InteractionManager handles mouseover and mouseout events in its update() function. You need to continuously update the renderer each frame in order to get a response from those events

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/anps0abt/3/

本文标签：