85 lines
3.0 KiB
HTML
85 lines
3.0 KiB
HTML
|
<!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>
|