Multiple primitives (rects) and events

[tet]

Great community! 

 

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 rectangles object I can see in the graphicsData, but there is no id or anything for me to identify it by. How can I do this?

 

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

 

 

 

edit: cleaned up code block and line breaks.

[xerver]

> I want to get that single rectangles object I can see in the graphicsData, but there is no id or anything for me to identify it by. How can I do this?

 

The concept of shapes inside of a graphics object doesn't really exist. graphicsData is internally used for drawing the paths, but you can't "get" a specific rectangle in a graphics object that draws many rectangles.

[tet]

Okay. Do you have any suggestions on how I could achieve mouse events for the 20k+ primitives with good performance that would give information on what primitive was hovered, clicked etc?

[xerver]

Don't use primitives, use sprites. That is usually the answer.