<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PIXI Scatter Doctest</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> Scatter </h1> <p> Scatter objects are UI elements that can be rotated, scaled or moved around which typically leads to "scattered" layouts. The PIXI scatter defined here is a specialization of the <a href="../scatter.html">abstract scatter pattern</a>. </p> <p>PIXI scatter are organized in <code>ScatterContainer</code> parent nodes and <code>DisplayObjectScatter</code> child nodes. <p>Let's look at an example of a PIXI scatter. Since scatter objects are mainly used as main views it is a common use case that the scene itself is used as the <code>ScatterContainer</code>. The <code>DisplayObjectScatter</code> is simply used as a wrapper that makes any interative DisplayObject zoomable, rotatable and translatable.</p> <canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas> <script class="doctest"> class ScatterApp extends PIXIApp { sceneFactory() { return new ScatterContainer(this.renderer, { showBounds: true, showPolygon: true, app: this }) } setup() { super.setup() let x = 30 let y = 30 for (let key of ['women', 'king']) { let sprite = PIXI.Sprite.fromImage('../examples/' + key + '.jpeg') sprite.interactive = true let scatter = new DisplayObjectScatter(sprite, this.renderer, { x: x, y: y, startScale: 0.25, minScale: 0.2, maxScale: 1 }) this.scene.addChild(sprite) scatter.zoom(0.5, { animate: 1.0 }) x += 100 y += 30 } return this } } const app = new ScatterApp({ view: canvas, autoResize: false, width: 450, height: 250 }) .setup() .run() </script> <h1> Two ScatterContainers in one canvas-element </h1> <p> You see two ScatterContainers within the same HTML-canvas-element. The Queen is included in the first, the King in the second ScatterContainer. You should interact the two images independently of each other. </p> <canvas id="canvas2" class="grayBorder interactive">Canvas not supported</canvas> <script class="doctest"> class DoubleScatterApp extends PIXIApp { setup() { super.setup() // Obey order in which ScatterContainer are created because the // InteractionMapper register event handlers in a first come first serve // order this.scatterContainerFront = new ScatterContainer(this.renderer, { app: this }) this.scatterContainerBack = new ScatterContainer(this.renderer, { app: this }) // Note that the addChild order is different because later children // are placed in front of earlier children. this.scene.addChild(this.scatterContainerBack) this.scene.addChild(this.scatterContainerFront) // Add the queen to ScatterContainer one let sprite1 = PIXI.Sprite.fromImage('../examples/women.jpeg') sprite1.interactive = true let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, { x: 20, y: 40, startScale: .5 }) this.scatterContainerBack.addChild(sprite1) // Add the king to ScatterContainer two let sprite2 = PIXI.Sprite.fromImage('../examples/king.jpeg') sprite2.interactive = true let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, { x: 280, y: 40, startScale: .5 }) this.scatterContainerFront.addChild(sprite2) return this } } const doubleScatterApp = new DoubleScatterApp({ view: canvas2, autoResize: false, width: 450, height: 250 }).setup().run() </script> <h1> Nested Scatter </h1> <p> Sometimes it can be required, that multiple scatters are nested in one another. E.g. when a map is displayed as scatter and another scatter is displayed on the map. </p> <canvas id="canvas3" class="grayBorder interactive">Canvas not supported</canvas> <script class="doctest"> class NestedScatterApp extends PIXIApp { sceneFactory() { return new ScatterContainer(this.renderer, { application: this, showBounds: true, showPolygon: true, app: this }) } setup() { super.setup() // Add the queen to ScatterContainer one let woman = PIXI.Sprite.fromImage('../examples/women.jpeg') woman.interactive = true new DisplayObjectScatter(woman, this.renderer, { x: 20, y: 40, startScale: 2, maxScale: 5 }) this.scene.addChild(woman) let nestedKing = PIXI.Sprite.fromImage('../examples/king.jpeg') nestedKing.interactive = true new DisplayObjectScatter(nestedKing, this.renderer, { x: 20, y: 20, startScale: 0.3 }) woman.addChild(nestedKing) let nestedQueen = PIXI.Sprite.fromImage('../examples/women.jpeg') nestedQueen.interactive = true new DisplayObjectScatter(nestedQueen, this.renderer, { x: 40, y: 40, startScale: 0.3 }) woman.addChild(nestedQueen) let king = PIXI.Sprite.fromImage('../examples/king.jpeg') king.interactive = true new DisplayObjectScatter(king, this.renderer, { x: 200, y: 20, startScale: 1 }) this.scene.addChild(king) return this } } const nestedScatterApp = new NestedScatterApp({ view: canvas3, autoResize: false, width: 450, height: 250 }).setup().run() </script> </body>