<!doctype html> <html lang='en'> <head> <meta charset='UTF-8'> <title>Scatter</title> <link rel='stylesheet' href='../../3rdparty/highlight/styles/default.css'> <link rel='stylesheet' href='../../../css/doctest.css'> <script src='../../../dist/iwmlib.3rdparty.js'></script> <script src='../../../dist/iwmlib.pixi.js'></script> <script src='../../../dist/iwmlib.js'></script> <style> .inline-showcase { display: flex } .map-example { display: inline-block; width: 256px; margin: 5px; } </style> </head> <body> <h1>Scatter</h1> <p>The Scatter in Tüsch specifies some classes to make them more suitable for Map applications.</p> <h2>CoverScatter</h2> <p>Usually maps should cover the whole app, or a window inside the app. Therefore they support a cover option. This option allows prevents the scatter to move inside the window. </p> <p> <h3>Legend</h3> <ul> <li> <span style="color: deepskyblue">Bounds:</span> The bounds represent the bounding boxes of the elements. </li> <li> <span style="color:red;">Polygon:</span> The polygon property of scatters describe their actual extends and are used for e.g. calculating overlap with the scatter container. </li> <li> <span style="color:greenyellow;">Boundaries:</span> You can set boundaries in the options in the form of <code>opts = {..., boundaries: {min: {x:0,y:0}, max{x:1,y:1},...}}</code> these will be applied relatively to the image dimensions.</li> </ul> </p> <canvas id="map_01"> </canvas> <script> let app = new PIXIApp({ view: map_01, width: 512, height: 512 }) app.sceneFactory = () => { window.scatterContainer = new AdvancedScatterContainer(app.renderer, { showBounds: true, showPolygon: true, app }) return window.scatterContainer } app.setup().run() /* Create Rotated Container */ let pad = 128 let frame = new RigidContainer(app.width - 2 * pad, app.height - 2 * pad) frame.position.set(pad, pad) //Create Containers Scatter new CompactScatter(frame, app.renderer, { translatable: false, scalable: false, rotatable: false}) app.scene.addChild(frame) let oldCenter = new PIXI.Point() oldCenter.copy(frame.scatter.center) frame.scatter.rotation = Math.PI / 4 let offset = Points.subtract(frame.scatter.center, oldCenter) frame.scatter.position = Points.subtract(frame.scatter.position, offset) /* Create Regular Rect */ let map = new PIXI.Graphics() map.beginFill(0x00FFFF, 0.2) map.drawRect(0, 0, 100, 100) map.position.set(-10, -10) map.interactive = true new CoverScatter(map, app.renderer, { maxScale: Infinity, autoBringToFront:false, boundaries: { min: { x: 0.2, y: 0.2 }, max: { x: 0.8, y: 0.8 } }, alpha: 0.5, cover: true, debug:true }) frame.addChild(map) /* Create Rotated Rect */ let advancedScatter = new PIXI.Graphics() advancedScatter.interactive = true new CoverScatter(advancedScatter, app.renderer, { maxScale: Infinity, autoBringToFront: false, alpha: 0.3, cover:false, debug:true }) advancedScatter.beginFill(0x000000, 0.2) advancedScatter.drawRect(0, 0, 200, 200) app.scene.addChild(advancedScatter) </script> <h2>Note</h2> <ul> <li> Cover behaviour is not yet working on rotated elements. </li> </ul> </body> </html>