Jump to content

Problems with interactivity


Recommended Posts

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.

Link to comment
Share on other sites

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;
Link to comment
Share on other sites

  • 6 months later...

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);




Link to comment
Share on other sites

  • 3 years later...

 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;

Polygon is drawing but couldnt hit on hitarea 

Checked Click and mousedwon ...

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...