iwmlib/lib/pixi/scatter.html

199 lines
7.6 KiB
HTML
Raw Permalink 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>PIXI 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">
2019-05-22 16:03:19 +02:00
<script src=".././3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
2019-03-21 09:57:27 +01:00
2019-05-22 16:03:19 +02:00
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
2019-03-21 09:57:27 +01:00
</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.
The PIXI scatter defined here is a specialization of the
<a href="../scatter.html">abstract scatter pattern</a>.
</p>
<p>PIXI scatter are organized in
<code>ScatterContainer</code> parent nodes and
<code>DisplayObjectScatter</code> child nodes.
<p>Let's look at an example of a PIXI scatter. Since scatter objects are mainly used as main views it is a common use
case that the scene itself is used as the
<code>ScatterContainer</code>. The
<code>DisplayObjectScatter</code> is simply used as a wrapper that makes any interative DisplayObject zoomable, rotatable and translatable.</p>
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
<script class="doctest">
class ScatterApp extends PIXIApp {
sceneFactory() {
return new ScatterContainer(this.renderer, { showBounds: true, showPolygon: true, app: this })
}
setup() {
super.setup()
let x = 30
let y = 30
for (let key of ['women', 'king']) {
2019-09-10 16:34:59 +02:00
let sprite = PIXI.Sprite.from('../examples/' + key + '.jpeg')
2019-03-21 09:57:27 +01:00
sprite.interactive = true
let scatter = new DisplayObjectScatter(sprite, this.renderer,
{
x: x, y: y,
startScale: 0.25,
minScale: 0.2,
maxScale: 1
})
this.scene.addChild(sprite)
scatter.zoom(0.5, { animate: 1.0 })
x += 100
y += 30
}
return this
}
}
const app = new ScatterApp({
view: canvas,
autoResize: false,
width: 450,
height: 250
})
.setup()
.run()
</script>
<h1>
Two ScatterContainers in one canvas-element
</h1>
<p>
You see two ScatterContainers within the same HTML-canvas-element. The Queen is included in the first, the King in the second
ScatterContainer. You should interact the two images independently of each other.
</p>
<canvas id="canvas2" class="grayBorder interactive">Canvas not supported</canvas>
<script class="doctest">
class DoubleScatterApp extends PIXIApp {
setup() {
super.setup()
// Obey order in which ScatterContainer are created because the
// InteractionMapper register event handlers in a first come first serve
// order
this.scatterContainerFront = new ScatterContainer(this.renderer, { app: this })
this.scatterContainerBack = new ScatterContainer(this.renderer, { app: this })
// Note that the addChild order is different because later children
// are placed in front of earlier children.
this.scene.addChild(this.scatterContainerBack)
this.scene.addChild(this.scatterContainerFront)
// Add the queen to ScatterContainer one
2019-09-10 16:34:59 +02:00
let sprite1 = PIXI.Sprite.from('../examples/women.jpeg')
2019-03-21 09:57:27 +01:00
sprite1.interactive = true
let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
x: 20,
y: 40,
startScale: .5
})
this.scatterContainerBack.addChild(sprite1)
// Add the king to ScatterContainer two
2019-09-10 16:34:59 +02:00
let sprite2 = PIXI.Sprite.from('../examples/king.jpeg')
2019-03-21 09:57:27 +01:00
sprite2.interactive = true
let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
x: 280,
y: 40,
startScale: .5
})
this.scatterContainerFront.addChild(sprite2)
return this
}
}
const doubleScatterApp = new DoubleScatterApp({
view: canvas2,
autoResize: false,
width: 450,
height: 250
}).setup().run()
</script>
<h1>
Nested Scatter
</h1>
<p>
Sometimes it can be required, that multiple scatters are nested in one another. E.g. when a map is displayed as scatter and
another scatter is displayed on the map.
</p>
<canvas id="canvas3" class="grayBorder interactive">Canvas not supported</canvas>
<script class="doctest">
class NestedScatterApp extends PIXIApp {
sceneFactory() {
return new ScatterContainer(this.renderer, { application: this, showBounds: true, showPolygon: true, app: this })
}
setup() {
super.setup()
// Add the queen to ScatterContainer one
2019-09-10 16:34:59 +02:00
let woman = PIXI.Sprite.from('../examples/women.jpeg')
2019-03-21 09:57:27 +01:00
woman.interactive = true
new DisplayObjectScatter(woman, this.renderer, {
x: 20,
y: 40,
startScale: 2,
maxScale: 5
})
this.scene.addChild(woman)
2019-09-10 16:34:59 +02:00
let nestedKing = PIXI.Sprite.from('../examples/king.jpeg')
2019-03-21 09:57:27 +01:00
nestedKing.interactive = true
new DisplayObjectScatter(nestedKing, this.renderer, {
x: 20, y: 20, startScale: 0.3
})
woman.addChild(nestedKing)
2019-09-10 16:34:59 +02:00
let nestedQueen = PIXI.Sprite.from('../examples/women.jpeg')
2019-03-21 09:57:27 +01:00
nestedQueen.interactive = true
new DisplayObjectScatter(nestedQueen, this.renderer, {
x: 40, y: 40, startScale: 0.3
})
woman.addChild(nestedQueen)
2019-09-10 16:34:59 +02:00
let king = PIXI.Sprite.from('../examples/king.jpeg')
2019-03-21 09:57:27 +01:00
king.interactive = true
new DisplayObjectScatter(king, this.renderer, {
x: 200, y: 20, startScale: 1
})
this.scene.addChild(king)
return this
}
}
const nestedScatterApp = new NestedScatterApp({
view: canvas3,
autoResize: false,
width: 450,
height: 250
}).setup().run()
</script>
</body>