151 lines
4.0 KiB
HTML
151 lines
4.0 KiB
HTML
|
<!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>
|