<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PIXI Scrollview</title> <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css"> <link rel="stylesheet" href="../../css/doctest.css"> <script src="../3rdparty/highlight/highlight.pack.js"></script> <script src="../../dist/iwmlib.3rdparty.js"></script> <script src="../../dist/iwmlib.js"></script> <script src="../../dist/iwmlib.pixi.js"></script> </head> <body onload="Doctest.run()"> <h1>Scrollview</h1> <p>A configurable scrollbox designed for pixi.js.</p> <p><strong>Features:</strong></p> <p> <ul> <li>Scrollview uses a mask to clip to desired boxWidth/boxHeight size</li> <li>Scrollview scrolls with scrollbars (options.overflow=scroll)</li> <li>Scrollview's scrollbars may be hidden when not needed (options.overflow=auto or hidden)</li> <li>Scrollview may also be scrolled by dragging on the content window (options.dragScroll=true)</li> </ul> </p> <p>See <a href="https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html">https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html</a> and <a href="https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html">https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html</a></p> <p>Let's look at some switch examples:</p><br /> <canvas id="canvas" class="interactive"></canvas> <p> What you should see: Many switches with very different styling and behaviour. </p> <script class="doctest"> const app = new PIXIApp({ view: canvas, width: 900, height: 400, transparent: false }).setup().run() app.loader .add('elephant1', './assets/elephant-1.jpg') .add('elephant2', './assets/elephant-2.jpg') .add('elephant3', './assets/elephant-3.jpg') .load((loader, resources) => { const sprite1 = new PIXI.Sprite(resources.elephant1.texture) const sprite2 = new PIXI.Sprite(resources.elephant2.texture) const sprite3 = new PIXI.Sprite(resources.elephant3.texture) const scrollview1 = new Scrollview({boxWidth: 400, boxHeight: 180}) scrollview1.content.addChild(sprite1) app.scene.addChild(scrollview1) const scrollview2 = new Scrollview({boxWidth: 300, boxHeight: 300}) scrollview2.x = 500 scrollview2.y = 30 sprite2.x = 40 sprite2.y = 40 sprite2.scale.set(.3, .3) sprite3.x = 60 sprite3.y = 100 sprite3.alpha = .6 sprite3.scale.set(.5, .5) scrollview2.content.addChild(sprite2, sprite3) app.scene.addChild(scrollview2) }) </script> </body>