iwmlib/lib/pixi/maps/scatter.html

151 lines
4.0 KiB
HTML
Raw Permalink Normal View History

<!doctype html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Scatter</title>
<link rel='stylesheet' href='../../3rdparty/highlight/styles/default.css'>
<link rel='stylesheet' href='../../../css/doctest.css'>
<script src='../../../dist/iwmlib.3rdparty.js'></script>
<script src='../../../dist/iwmlib.pixi.js'></script>
<script src='../../../dist/iwmlib.js'></script>
<style>
.inline-showcase {
display: flex
}
.map-example {
display: inline-block;
width: 256px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Scatter</h1>
<p>The Scatter in Tüsch specifies some classes to make them more suitable for Map applications.</p>
<h2>CoverScatter</h2>
<p>Usually maps should cover the whole app, or a window inside the app. Therefore they support a cover option. This option
allows prevents the scatter to move inside the window.
</p>
<p>
<h3>Legend</h3>
<ul>
<li>
<span style="color: deepskyblue">Bounds:</span> The bounds represent the bounding boxes of the elements.
</li>
<li>
<span style="color:red;">Polygon:</span> The polygon property of scatters describe their actual extends and are used for e.g. calculating
overlap with the scatter container.
</li>
<li>
<span style="color:greenyellow;">Boundaries:</span> You can set boundaries in the options in the form of
<code>opts = {..., boundaries: {min: {x:0,y:0},
max{x:1,y:1},...}}</code> these will be applied relatively to the image dimensions.</li>
</ul>
</p>
<canvas id="map_01">
</canvas>
<script>
let app = new PIXIApp({
view: map_01,
width: 512,
height: 512
})
app.sceneFactory = () => {
window.scatterContainer = new AdvancedScatterContainer(app.renderer, { showBounds: true, showPolygon: true, app })
return window.scatterContainer
}
app.setup().run()
/*
Create Rotated Container
*/
let pad = 128
let frame = new RigidContainer(app.width - 2 * pad, app.height - 2 * pad)
frame.position.set(pad, pad)
//Create Containers Scatter
new CompactScatter(frame, app.renderer, { translatable: false, scalable: false, rotatable: false})
app.scene.addChild(frame)
let oldCenter = new PIXI.Point()
oldCenter.copy(frame.scatter.center)
frame.scatter.rotation = Math.PI / 4
let offset = Points.subtract(frame.scatter.center, oldCenter)
frame.scatter.position = Points.subtract(frame.scatter.position, offset)
/*
Create Regular Rect
*/
let map = new PIXI.Graphics()
map.beginFill(0x00FFFF, 0.2)
map.drawRect(0, 0, 100, 100)
map.position.set(-10, -10)
map.interactive = true
new CoverScatter(map, app.renderer, { maxScale: Infinity,
autoBringToFront:false,
boundaries: {
min: { x: 0.2, y: 0.2 },
max: { x: 0.8, y: 0.8 }
},
alpha: 0.5,
cover: true,
debug:true
})
frame.addChild(map)
/*
Create Rotated Rect
*/
let advancedScatter = new PIXI.Graphics()
advancedScatter.interactive = true
new CoverScatter(advancedScatter, app.renderer, {
maxScale: Infinity,
autoBringToFront: false,
alpha: 0.3, cover:false,
debug:true
})
advancedScatter.beginFill(0x000000, 0.2)
advancedScatter.drawRect(0, 0, 200, 200)
app.scene.addChild(advancedScatter)
</script>
<h2>Note</h2>
<ul>
<li>
Cover behaviour is not yet working on rotated elements.
</li>
</ul>
</body>
</html>