Jump to content

Multiple Containers or Renderers?


Recommended Posts

Hi All - I am brand new to the framework but am loving it already. Kudos to all the devs for the lengthy and complete documentation as well as all the great tutorials.


I'm just getting to grips with pixi.js v3 (my first experience with pixi) and I am using it to build another "library/framework" that can be used to display floor plans of buildings. These floor plans should be displayed on a canvas and be navigable as well as zoomable i.e. you can drag/pan up/down/left/right as well as zoom in/out. I have been extending the various PIXI objects with extra properties to achieve this and so far its working out great. I have just hit a design and implementation issue. I want to be able to show multiple floor plans on the same canvas. Think of having a single rectangle canvas. If I have 3 floor plans it will be divided into 3, 6 divided into 6 sub canvases and so on. Each subdivision should be separately navigable and zoomable - and this is my issue!


I have the following objects:


View - Basically an extension of PIXI.Container that also contains a PIXI.renderer to render itself.

Plan - An Extension of PIXI.Container again that represents a floor plan and contains the floor plan texture and miscellaneous other objects.


A plan contains a floor-plan texture and other miscellaneous objects. The view is basically the canvas and takes in a number of plans N and then renders each Plan in a subdivision of the View. I have a neat algorithm that divides the canvas so I can obtain the x,y,width,height of each compartment. Unfortunately though when I set each Plans width/height - everything within the Plan also scales horribly. As far as I can see from the documentation there is no way to adjust only the "viewport" of the container/plan.


So my question is should I have a separate renderer for each Plan or stick with my current implementation and have some sort of callback when the Plans resize that then adjusts their inner objects?


Any help on this would be greatly appreciated!

Link to comment
Share on other sites

You can accomplish this all in one renderer. Use containers for each sub division and translate/scale/rotated them all separately.


Setting width/height of an object scales it to match the width/height that you set. You likely do not want to set the width/height manually. There shouldn't be a reason to do this anyway, just add objects to the plan and let the container size to the objects within it. If you place the objects in the right places it should just look right, no need to manually set sizes.

Link to comment
Share on other sites

I see now - the containers are just free flowing. They expand to their contents and their repositioning effects the objects. I do have one issue left though.


The floor plans themselves are large images that you can zoom in/out of and so in essence you can zoom in further than than the reaches of the canvas i.e. the image will overflow the canvas - but this will be hidden of course. That wouldn't be an issue if I was trying to only have a single floor plan but I actually desire to have multiple. Due to the containers themselves not having 'viewports' the floor plans will then end up overflowing each other. I am trying to achieve the following effect if that helps:




Each of those images are actually larger than what the subdivision shows but we can pan/zoom to see as much/little as we want.

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