75 lines
2.6 KiB
HTML
75 lines
2.6 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>
|
||
|
|
<!-- <script src="./scrollbox.min.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: 250,
|
||
|
|
transparent: false
|
||
|
|
}).setup().run()
|
||
|
|
|
||
|
|
// let scrollview1 = new Scrollview({
|
||
|
|
// x: 10,
|
||
|
|
// y: 20
|
||
|
|
// })
|
||
|
|
|
||
|
|
// let scrollview2 = new Scrollview({
|
||
|
|
// x: 90,
|
||
|
|
// y: 20,
|
||
|
|
// fill: 0xfd355a,
|
||
|
|
// fillActive: 0x5954d3,
|
||
|
|
// controlFill: 0xfecd2d,
|
||
|
|
// controlFillActive: 0xfd413b,
|
||
|
|
// strokeActiveWidth: 4,
|
||
|
|
// controlStrokeActive: 0x50d968,
|
||
|
|
// controlStrokeActiveWidth: 12,
|
||
|
|
// controlStrokeActiveAlpha: .8,
|
||
|
|
// tooltip: 'Dies ist ein Switch'
|
||
|
|
// })
|
||
|
|
|
||
|
|
// const scrollbox = new PIXI.extras.Scrollbox({boxWidth: 500, boxHeight: 200})
|
||
|
|
// scrollbox.x = 70
|
||
|
|
// scrollbox.y = 30
|
||
|
|
|
||
|
|
// const sprite = new PIXI.Sprite(resources.fulda.texture)
|
||
|
|
// sprite.scale.set(.5, .5)
|
||
|
|
// scrollbox.content.addChild(sprite)
|
||
|
|
// app.stage.addChild(scrollbox)
|
||
|
|
|
||
|
|
// app.scene.addChild(switch1, switch2)
|
||
|
|
</script>
|
||
|
|
</body>
|