CODEWITHSUNDEEP
javascriptpixi.js
Victor
Victor

Reputation: 489

event data in pixi.js

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.

Upvotes: 1

Views: 1695

Answers (1)

beeglebug
beeglebug

Reputation: 3552

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.Rectangles 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.

Upvotes: 2

Related Questions