Problems with interactivity

[STVR]

I'm working with PixiJS to create a web app with OS-like functionality (source here: https://github.com/steverichey/OpenGNOP) so I obviously need to have stuff related to mouse and touch events. I've tried stuff like this (based on the examples):

this.interactive = true;this.mousedown = this.touchstart = this.onClick.bind(this);this.mouseup = this.touchend = this.mouseupoutside = this.touchendoutside = this.onRelease.bind(this);

But it's hit or miss. BitmapText will function normally but DisplayObjectContainers may or may not, and Graphics seem to never register clicks. Is there something I'm missing? It appears that all of these elements should support mouse and touch events.

[giraluna]

All display objects expect sprites (bitmap text uses sprites for drawing) need to define a hitArea property for interactivity. For graphics objects consisting of a single primitive you could probably just define the same primitive as the hit area.

 

You have to account for the parent objects anchor point though. Not 100% sure on this, but I think the hitarea is defined with point (0, 0) being the parent's anchor point (which defaults to top left).

 

Haven't tested this but something like:

var circleButton = new PIXI.Graphics();circleButton.beginFill();circleButton.drawCircle(40, 40, 50);circleButton.endFill();circleButton.hitArea = new PIXI.Circle(0, 0, 50);circleButton.interactive = true;

[shabeerahmedshah]

I guess, PixiJS currently supports interactivity only for sprites. The above code did not work for me

[hubert]

I guess, PixiJS currently supports interactivity only for sprites. The above code did not work for me

 

If you want to use it with graphics you'll have to pass it with buttonMode = true;

 

A short snippet for graphics;

var slot = graphics.drawRect(slotData.X, slotData.Y, _square, slotData.sltHeight);                    slot.b_id = slotData._id;                    slot.b_number = slotData.b_number;                    slot.type = slotData.type;                    slot.interactive = true;                    slot.buttonMode = true;                    slot.hitArea = new PIXI.Rectangle(slotData.X, slotData.Y, _square, slotData.sltHeight);

http://www.sevenative.com

 

https://play.google.com/store/apps/details?id=pl.com.wojciak.kontakt.new_words

[V K]

 var coords = poly[0].map(function (point) {    return new PIXI.Point(point[0], point[1]);   });
 var drawing = new PIXI.Polygon(coords);
 drawing.hitArea = new PIXI.Polygon(coords);
 drawing.interactive = true;
 drawing.buttonMode = true;
 pixiContainer.beginFill(color);
 pixiContainer.drawPolygon(drawing);

Polygon is drawing but couldnt hit on hitarea 

Checked Click and mousedwon ...

Or is there any issues in my code ? 
Please help me