iwmlib/lib/scatter.html

129 lines
5.0 KiB
HTML
Raw Normal View History

2019-03-21 09:57:27 +01:00
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scatter Doctest</title>
2019-05-22 16:03:19 +02:00
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
2019-03-21 09:57:27 +01:00
<link rel="stylesheet" href="../css/doctest.css">
<script src="./3rdparty/highlight/highlight.pack.js"></script>
<script src="../dist/iwmlib.3rdparty.js"></script>
2019-05-22 16:03:19 +02:00
<script src="../dist/iwmlib.js"></script>
2019-03-21 09:57:27 +01:00
<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
2019-07-05 14:11:43 +02:00
stage.draw(context, { stroke: "#0000FF"})
2019-03-21 09:57:27 +01:00
for(let scatter of scatterContainer.scatter.values()) {
let polygon = scatter.polygon
polygon.draw(context, { stroke: '#0000FF'})
2019-03-21 09:57:27 +01:00
}
}
function animatePolygons() {
requestAnimationFrame((dt) => {
drawPolygons()
animatePolygons()
2019-07-05 14:11:43 +02:00
2019-03-21 09:57:27 +01:00
})
}
</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 blue;">
2019-03-21 09:57:27 +01:00
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>
<h1>
Interactive Content
</h1>
<p>
Scatter objects may contain interactive HTML structures. There is one major flag that allows
to simulate click events by using taps. If the scatter detects a tap it looks for clickable
elements under or nearby the event position and calls the click handler. Thus gestures
can be disambiguated as moves, zooms. or taps.
2019-07-05 14:40:15 +02:00
2019-07-12 14:33:15 +02:00
Note that on touch devices you can tap beside the object if you use an object that implements the ITapDelegate interface.
2019-07-12 14:50:30 +02:00
An ITapDelegate allowes a distance that can be configured by allowClickDistance. The default value is 44px but here we
use 88px.
</p>
2019-07-05 14:11:43 +02:00
<div id="contentExample" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px;">
<div id="interactiveContent">
<img draggable="false" style="position: absolute;" src="examples/women.jpeg" />
2019-07-05 14:11:43 +02:00
<a style="position:absolute; top: 10px; right: 10px; color:white;" href="javascript:alert('test link')">A Link</a>
<div onclick="alert('div clicked')" style="position:absolute; top: 30px; right: 10px; color:white;">A Div with click handler</div>
<svg onclick="alert('svg clicked')" style="position: absolute; right: 0px; bottom: 0px; width: 32px; height: 32px;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle cx="50" cy="50" r="44" stroke="white" stroke-width="8" fill="gray" />
<circle cx="50" cy="32" r="7" fill="white" />
<line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
</svg>
</div>
</div>
<script class="doctest">
2019-07-05 14:11:43 +02:00
let contentContainer = new DOMScatterContainer(contentExample)
2019-07-12 14:33:15 +02:00
2019-07-12 14:50:30 +02:00
let tapDelegate = new CardWrapper(interactiveContent, { allowClickDistance: 88})
2019-07-05 14:11:43 +02:00
new DOMScatter(interactiveContent, contentContainer, {
x: 44,
y: 44,
width: 274,
height: 184,
2019-07-12 14:33:15 +02:00
tapDelegate,
throwVisibility: 88,
minScale: 0.5,
maxScale: 1.5})
2019-07-05 14:11:43 +02:00
</script>
2019-03-21 09:57:27 +01:00
</body>