71 lines
2.7 KiB
HTML
71 lines
2.7 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
|
||
|
|
<title>PIXI Scrollview</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>Scrollview</h1>
|
||
|
|
<p>A configurable scrollbox designed for pixi.js.</p>
|
||
|
|
<p><strong>Features:</strong></p>
|
||
|
|
<p>
|
||
|
|
<ul>
|
||
|
|
<li>Scrollview uses a mask to clip to desired boxWidth/boxHeight size</li>
|
||
|
|
<li>Scrollview scrolls with scrollbars (options.overflow=scroll)</li>
|
||
|
|
<li>Scrollview's scrollbars may be hidden when not needed (options.overflow=auto or hidden)</li>
|
||
|
|
<li>Scrollview may also be scrolled by dragging on the content window (options.dragScroll=true)</li>
|
||
|
|
</ul>
|
||
|
|
</p>
|
||
|
|
<p>See <a href="https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html">https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html</a> and <a href="https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html">https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html</a></p>
|
||
|
|
<p>Let's look at some switch examples:</p><br />
|
||
|
|
<canvas id="canvas" class="interactive"></canvas>
|
||
|
|
<p>
|
||
|
|
What you should see: Many switches with very different styling and behaviour.
|
||
|
|
</p>
|
||
|
|
<script class="doctest">
|
||
|
|
const app = new PIXIApp({
|
||
|
|
view: canvas,
|
||
|
|
width: 900,
|
||
|
|
height: 400,
|
||
|
|
transparent: false
|
||
|
|
}).setup().run()
|
||
|
|
|
||
|
|
app.loader
|
||
|
|
.add('elephant1', './assets/elephant-1.jpg')
|
||
|
|
.add('elephant2', './assets/elephant-2.jpg')
|
||
|
|
.add('elephant3', './assets/elephant-3.jpg')
|
||
|
|
.load((loader, resources) => {
|
||
|
|
const sprite1 = new PIXI.Sprite(resources.elephant1.texture)
|
||
|
|
const sprite2 = new PIXI.Sprite(resources.elephant2.texture)
|
||
|
|
const sprite3 = new PIXI.Sprite(resources.elephant3.texture)
|
||
|
|
|
||
|
|
const scrollview1 = new Scrollview({boxWidth: 400, boxHeight: 180})
|
||
|
|
scrollview1.content.addChild(sprite1)
|
||
|
|
app.scene.addChild(scrollview1)
|
||
|
|
|
||
|
|
const scrollview2 = new Scrollview({boxWidth: 300, boxHeight: 300})
|
||
|
|
scrollview2.x = 500
|
||
|
|
scrollview2.y = 30
|
||
|
|
sprite2.x = 40
|
||
|
|
sprite2.y = 40
|
||
|
|
sprite2.scale.set(.3, .3)
|
||
|
|
sprite3.x = 60
|
||
|
|
sprite3.y = 100
|
||
|
|
sprite3.alpha = .6
|
||
|
|
sprite3.scale.set(.5, .5)
|
||
|
|
scrollview2.content.addChild(sprite2, sprite3)
|
||
|
|
app.scene.addChild(scrollview2)
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</body>
|