<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Scatter Doctest</title> <link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css"> <link rel="stylesheet" href="../css/doctest.css"> <script src="./3rdparty/highlight/highlight.pack.js"></script> <script src="./3rdparty/all.js"></script> <script src="all.js"></script> <script> function drawPolygons() { debugCanvas.width = main.getBoundingClientRect().width let context = debugCanvas.getContext('2d') context.clearRect(0, 0, debugCanvas.width, debugCanvas.height) let stage = scatterContainer.polygon stage.draw(context, { stroke: '#FF0000'}) for(let scatter of scatterContainer.scatter.values()) { let polygon = scatter.polygon polygon.draw(context, { stroke: '#FF0000'}) } } function animatePolygons() { requestAnimationFrame((dt) => { drawPolygons() animatePolygons() }) } </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. Scatters come in two flavours: DOM Scatters are working with arbitrary DOM elements, wheras PIXI Scatter work with PIXI Containers and DisplayObjects within the PIXI scene graph. Here we describe the more basic DOM scatter. </p> <p>Let's look at an example.</p> <div id="main" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px;"> <!-- Note that we need to set draggable to false to avoid conflicts. The DOM elements must also be positioned absolutely. --> <img id="women" draggable="false" style="position: absolute;" src="examples/women.jpeg" /> <img id="king" draggable="false" style="position: absolute;" src="examples/king.jpeg" /> <canvas id="debugCanvas" height="280" style="z-index: 100000; pointer-events: none; position: absolute; border: 1px solid red;"> Canvas not supported. </canvas> </div> <script class="doctest"> let dx = 44 let app = new App() let scatterContainer = new DOMScatterContainer(main) let angle = 0 // 15 for(let key of ['women', 'king']) { let image = document.getElementById(key) // The DOMScatter needs initial width and height. Therefore we // define the scatter when the image size is known, i.e. after loading... image.onload = (e) => { let scatter = new DOMScatter(image, scatterContainer, { x: dx, y: 44, width: e.target.naturalWidth, height: e.target.naturalHeight, rotationDegrees: angle, throwVisibility: 88, minScale: 0.5, maxScale: 1.5}) dx += 300 angle = -angle } } app.run() animatePolygons() </script> </body>