200 lines
8.0 KiB
HTML
200 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>PIXI Scatter Doctest</title>
|
|
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css" />
|
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
|
<script src=".././3rdparty/highlight/highlight.pack.js"></script>
|
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
|
|
|
<script src="../../dist/iwmlib.js"></script>
|
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
|
</head>
|
|
|
|
<body onload="Doctest.run()">
|
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>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>
|
|
|
|
<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']) {
|
|
let sprite = PIXI.Sprite.from('../examples/' + key + '.jpeg')
|
|
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
|
|
let sprite1 = PIXI.Sprite.from('../examples/women.jpeg')
|
|
sprite1.interactive = true
|
|
let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
|
|
x: 20,
|
|
y: 40,
|
|
startScale: 0.5
|
|
})
|
|
this.scatterContainerBack.addChild(sprite1)
|
|
|
|
// Add the king to ScatterContainer two
|
|
let sprite2 = PIXI.Sprite.from('../examples/king.jpeg')
|
|
sprite2.interactive = true
|
|
let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
|
|
x: 280,
|
|
y: 40,
|
|
startScale: 0.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
|
|
let woman = PIXI.Sprite.from('../examples/women.jpeg')
|
|
woman.interactive = true
|
|
new DisplayObjectScatter(woman, this.renderer, {
|
|
x: 20,
|
|
y: 40,
|
|
startScale: 2,
|
|
maxScale: 5
|
|
})
|
|
this.scene.addChild(woman)
|
|
|
|
let nestedKing = PIXI.Sprite.from('../examples/king.jpeg')
|
|
nestedKing.interactive = true
|
|
new DisplayObjectScatter(nestedKing, this.renderer, {
|
|
x: 20,
|
|
y: 20,
|
|
startScale: 0.3
|
|
})
|
|
woman.addChild(nestedKing)
|
|
|
|
let nestedQueen = PIXI.Sprite.from('../examples/women.jpeg')
|
|
nestedQueen.interactive = true
|
|
new DisplayObjectScatter(nestedQueen, this.renderer, {
|
|
x: 40,
|
|
y: 40,
|
|
startScale: 0.3
|
|
})
|
|
woman.addChild(nestedQueen)
|
|
|
|
let king = PIXI.Sprite.from('../examples/king.jpeg')
|
|
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>
|
|
</html>
|