iwmlib/lib/pixi/deepzoom/deepzoom.html

220 lines
7.0 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DeepZoomImage Doctests</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>
<style>
#app {
display: table;
margin: 0 auto;
}
#app > * {
margin-bottom: 5px;
}
</style>
</head>
<body onload="Doctest.run()">
<h1>Double DeepZoomImage</h1>
<p>
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
as possible.
</p>
<br />
<div id="div1" style="float: left;"></div>
<div id="div2" style="float: right;"></div>
<div style="clear: left; margin-top: 540px;" />
<script class="doctest">
// deepZoom
//--------------------
const deepZoomInfo = new DeepZoomInfo({
"tileSize": 128,
"format": "jpg",
"overlap": 0,
"type": "map",
"height": 4096,
"width": 4096,
"path": "../assets/maps/test",
"urlTileTemplate": "{path}/{level}/{column}/{row}.{format}"
})
// const deepZoomInfo = new DeepZoomInfo({
// compression: [
// "dds"
// ],
// clip: {
// minLevel: 12,
// maxLevel: 20,
// startCol: 275215,
// startRow: 181050,
// bounds: {
// min: [48.458353, 8.96484374976547],
// max: [48.5747899110263, 9.14062499976523]
// }
// },
// tileSize: 512,
// format: "png",
// overlap: 0,
// type: "map",
// height: 131072,
// width: 131072,
// path: "../../../var/tuesch/luftbild_2016_full",
// urlTileTemplate: "{path}/{level}/{row}/{column}.{format}"
// })
// app
//--------------------
window.app = new PIXIApp({
width: 400,
height: 500,
backgroundColor: 0xFFCCCCCC
}).setup().run()
div1.appendChild(app.view)
// create the ScatterContainer
//--------------------
const scatterContainer1 = new ScatterContainer(app.renderer, {showBounds: true, app: app})
app.scene.addChild(scatterContainer1)
// Create the DeepZoomImage
//--------------------
setTimeout(() => {
const deepZoomImage1 = new DeepZoomImage(deepZoomInfo, {app, world: scatterContainer1})
deepZoomImage1.scatter = new DisplayObjectScatter(deepZoomImage1, app.renderer, {
minScale: 0,
maxScale: 50,
onTransform: event => {
console.log('currentLevel', deepZoomImage1.currentLevel)
deepZoomImage1.transformed(event)
}
})
scatterContainer1.addChild(deepZoomImage1)
}, 1000)
// app2
//--------------------
const app2 = new PIXIApp({
width: 400,
height: 500,
backgroundColor: 0xFFCCCCCC
}).setup().run()
div2.appendChild(app2.view)
// create the ScatterContainer
//--------------------
const scatterContainer2 = new ScatterContainer(app2.renderer, {showBounds: true, app: app2})
app2.scene.addChild(scatterContainer2)
// Create the DeepZoomImage
//--------------------
const deepZoomImage2 = new DeepZoomImage(deepZoomInfo, {app: app2})
deepZoomImage2.scatter = new DisplayObjectScatter(deepZoomImage2, app2.renderer, {
minScale: 0,
maxScale: 100,
onTransform: (event) => {
deepZoomImage2.transformed(event)
}
})
scatterContainer2.addChild(deepZoomImage2)
</script>
<h1>DeepZoomImage in DeepZoomImage</h1>
<p>
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
as possible.
</p>
<br />
<div id="div3"></div>
<script class="doctest">
// app3
//--------------------
const app3 = new PIXIApp({
width: 900,
height: 500,
backgroundColor: 0xFFCCCCCC
}).setup().run()
window.app3 = app3
div3.appendChild(app3.view)
// create the ScatterContainer
//--------------------
const scatterContainer3 = new ScatterContainer(app3.renderer, {app: app3, showBounds: true, claimEvent: false, stopEvents: false})
app3.scene.addChild(scatterContainer3)
// Create the DeepZoomImage
//--------------------
const deepZoomImage3 = new DeepZoomImage(deepZoomInfo, {app: app3})
deepZoomImage3.scatter = new DisplayObjectScatter(deepZoomImage3, app3.renderer, {
minScale: 0,
maxScale: 100,
startScale: 2,
autoBringToFront: false,
onTransform: (event) => {
deepZoomImage3.transformed(event)
}
})
app3._deepZoomImage3 = deepZoomImage3
scatterContainer3.addChild(deepZoomImage3)
// Create the second DeepZoomImage
//--------------------
const border = new PIXI.Graphics()
border.beginFill(0x282828, 1)
border.drawRect(0, 0, 264, 244)
scatterContainer3.addChild(border)
const mask = new PIXI.Graphics()
mask.beginFill(0x282828, 1)
mask.drawRect(0, 0, 260, 240)
scatterContainer3.addChild(mask)
const deepZoomImage4 = new DeepZoomImage(deepZoomInfo, {app: app3})
deepZoomImage4.x = 4
deepZoomImage4.y = 4
deepZoomImage4.scatter = new DisplayObjectScatter(deepZoomImage4, app3.renderer, {
minScale: 0,
maxScale: 100,
onTransform: (event) => {
deepZoomImage4.transformed(event)
}
})
deepZoomImage4.mask = mask
app3._deepZoomImage4 = deepZoomImage4
scatterContainer3.addChild(deepZoomImage4)
</script>
</body>
</html>