<!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>