Restructured library.

2019-03-22 12:54:57 +01:00
parent 1bc2deb4d3
commit d1efeeffa6
1912 changed files with 21424 additions and 21383 deletions
@@ -0,0 +1,84 @@
+<!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>