Jump to content

Dealing with groups of primitives


Recommended Posts

Hi everyone, I'm working on my first Pixi.js project and I have a question about handling groups of primitives, as well as clearing them out when I'm done with them.


As you can see in the attachment, I'm drawing a background of a guitar fretboard, and then drawing markers on it to indicate notes. However, right now I'm doing it in an incredibly naive way, just looping through my data and drawing a new marker at the calculated position. I'd like to have all markers of a certain color in a "layer" of sorts, so I can selectively make a layer visible or invisible. Additionally, the way I'm doing things right now doesn't work well because if the user selects a new scale to display, the old markers stay in place and make the output unusable (I haven't implemented any way to clear things yet). 


Any tips on how to accomplish what I'm looking for? Thanks!



Link to comment
Share on other sites

I feel very silly right now, because I somehow didn't realize that Graphics objects were an extension of DisplayObjectContainer. So I can use a handful of Graphics objects and toggle their visibility to act as layers and I can just call the clear() method to wipe everything once I'm done.


I thought it was going to be much harder to do what I wanted, should have read more carefully  :blink:


Thanks for the help, it put me on the right track!

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