<!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>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="app"> <button id="change_dpr">Change Pixel Ratio</button> <div id="canvas_container"></div> <div id="info"></div> </div> <script class="doctest"> // When an element is added, the ScatterApp wrapps it in it's own Scatter Container. // Just as in the doctest: scatter.html class ScatterApp extends PIXIApp { sceneFactory() { return new ScatterContainer(this.renderer, { showBounds: true, app: this }) } } let app let state = 0 //Destroys the PIXIApp element and the corresponding canvas, //to reinstantiate the entire application. changePIXI() function changePIXI() { if (typeof app != 'undefined') { //The parameter destroys the canvas, when destroying the app. // Not deleting a new canvas resulted in some // weird PIXI error. app.destroy(true) } //A new canvas has to be created //for the new view. var canvas = document.createElement("canvas") canvas_container.appendChild(canvas); app = new ScatterApp({ resolution: state + 1, //Default parameters view: canvas, autoResize: false, width: 128, height: 128, backgroundColor: 0xFFCCCCCC }).setup().run() // To create a DeepZoomImage, a DeepZoomInfo has to // be provided. It contains all the necessary informations // for the DeepZoomImage, to behave as intended. // (E.g. that it displays the right level of tiles for the current view distance.) 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}" }); // Create the DeepZoomImage deepZoomImage = new DeepZoomImage(deepZoomInfo, { highResolution: !!state, app }); deepZoomImage.scatter = new DisplayObjectScatter(deepZoomImage, app.renderer, { // Allow more flexible scaling for debugging purposes. minScale: 0, maxScale: 100, // Notify the DeepZoomImage, when it's container has // been transformed (translated, scaled, rotated, ...) onTransform: (event) => { deepZoomImage.transformed(event) } }); // Add the DeepZoomImage to the scene. app.scene.addChild(deepZoomImage) //Set info text. info.innerHTML = "resolution: " + app.renderer.resolution + "<br>high resolution: " + !!state; } // Add functionality to the button. change_dpr.addEventListener("click", (event) => { state = (state + 1) % 2 changePIXI() }) </script> </body> </html>