Search the Community

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!