pixi Infinite Scrollbar

Question

Is there a way to allow the canvas object to be scrolled beyond content. Example: A canvas created with 1000*1000. And Enabled PAN and Zoom on the canvas. Draw a rectangle on the canvas and move the rectangle with mouse to the edge of the boundaries( top,right, bottom, left) it should scroll the the rectangle to the end of the canvas.

Right now my issue is I can drag the rectangle till the browser boundaries. I need to allow the rectangle to drag beyond the content so that I can use the full canvas. I can PAN the canvas to move around the browser.

Thanks

Answer 1

PIXI is just a rendering engine that draws things on canvas. PIXI does not have any mechanics to control canvas position on the web page.

Probably the most efficient way to address your use case is to:

• Make canvas fit on the screen entirely (do not extend it beyond the screen bondary, never pan nor zoom canvas as DOM object).
• Make "content" PIXI.Container that holds your content (stage -> content -> rectangles), and change "content" container position as needed to scroll the content inside the canvas.

If you insist on manipulating canvas position, you can position it absolutely on the webpage and manipulate it as DOM object.

Whatever approach you take, you will have to detect that drag and drop approaches the edge and do panning manually in your code. There's nothing in PIXI, as far as I am aware, that would facilitate this.