event data in pixi.js

Question

I just started playing around with pixi and have drawn multiple rectangles from an array with pixel coordinates like this:

var rectangle = [....];
....


var stage = new PIXI.Stage();
var renderer = PIXI.autoDetectRenderer(wrapper.getWidth(), wrapper.getHeight(), { transparent: true });
....


var graphics = new PIXI.Graphics();
graphics.interactive = true;


graphics.on("mouseover", function(e) {
   this.alpha = 0.5;

}).on("mouseout", function() {
   this.alpha = 1;

});


graphics.beginFill(0xFFFFFF);
graphics.lineStyle(2, 0x000000);


for (var i = 0; i < rectangle.length; i++) {
   graphics.drawRect(rectangle[i][0], rectangle[i][1], 10, 10);

}


graphics.endFill();


stage.addChild(graphics);
renderer.render(stage);

The events are triggered but the object I get by "e" or "this" inside the callback is the object for all graphics. I want to get that single "mouseovered" rectangles object I can see in the graphicsData, but there is no id or anything to identify it by. How can I do this?

Performance is of essence as I'm going to render 20k+ rectangles or circles.

Answer 1

Without drawing each rectangle onto it's own PIXI.Graphics object you won't be able to get individual mouseover events. This is because as far as PIXI is concerned the Graphics object is a single bitmap image.

I would suggest performing your own hit tests inside the mouseover function to detect which rectangle the cursor is over.

If you are using PIXI.Rectangle s you can take advantage of the built in Rectangle.Contains function to check if a point (in this case the mouse position) is inside the bounds.