227 lines
8.0 KiB
HTML
227 lines
8.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>
|
|
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">deepzoom.</a>
|
|
DeepZoom
|
|
</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>
|