<!DOCTYPE html> <html> <head> <title>OpenSeadragon fitBoundsWithConstraints() Demo</title> <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script> <style type="text/css"> .openseadragon1 { width: 800px; height: 600px; } #highlights li { cursor: pointer; } </style> </head> <body> <div> Simple demo page to show 'viewport.fitBounds().applyConstraints()' issue. </div> <div id="contentDiv" class="openseadragon1"></div> <div id="highlights"></div> <select onchange="changeMethod(this.value);"> <option value=0>viewport.fitBoundsWithConstraints(bounds);</option> <option value=1>viewport.fitBounds(bounds);</option> <option value=2>viewport.fitBounds(bounds).applyConstraints();</option> </select> <input type="button" value="Go home" onclick="goHome()"/> <script type="text/javascript"> var _viewer; var _fittingMethod = 0; var _highlights = [ {"queryPoint":[0.13789887359998443,0.43710575899579285], "radius":0.004479581945070337,"text":"Pipe"}, {"queryPoint":[0.5923298766583593,0.6461653354541856], "radius":0.013175241014912752,"text":"Fuel here"}, {"queryPoint":[0.43920338711232304,0.7483181389302148], "radius":0.09222668710438928, "text":"Wheel"}, {"queryPoint":[0.07341677959486298,0.9028719921872319], "radius":0.08996845561083797, "text":"Nothing special"} ]; var generateUniqueHash = (function() { var counter = 0; return function() { return "openseadragon_" + (counter++); }; })(); var _viewer = OpenSeadragon({ element: document.getElementById("contentDiv"), showNavigationControl: false, prefixUrl: "../../build/openseadragon/images/", hash: generateUniqueHash(), //this is only needed if you want to instantiate more than one viewer at a time. tileSources: { Image: { xmlns: "http://schemas.microsoft.com/deepzoom/2008", Url: 'http://cdn.photosynth.net/ps2/19d5cf2b-77ed-439f-ac21-d3046320384c/packet/undistorted/img0043/', Format: "jpg", Overlap: 1, TileSize: 510, Size: { Width: 4592, Height: 3448 } } } }); _viewer.addHandler("open", function() { var str = "<ul>"; for (var i=0; i<_highlights.length; ++i) { var highlight = _highlights[i]; str += "<li onclick='gotoHighlight("+i+")'>"+highlight.text+"</li>"; } str += "</ul>"; document.getElementById("highlights").innerHTML = str; }); function gotoHighlight(index) { var highlight = _highlights[index]; var viewport = _viewer.viewport; var contentSize = viewport.contentSize; var scaling = 1.0 / viewport.viewportToImageZoom(viewport.getZoom()); var radius = highlight.radius*Math.min(contentSize.x, contentSize.y);/*annotation.accurateRadius*scaling;*/ var center = new OpenSeadragon.Point(contentSize.x*highlight.queryPoint[0], contentSize.y*highlight.queryPoint[1]); var bounds = viewport.imageToViewportRectangle(new OpenSeadragon.Rect(center.x-radius, center.y-radius, radius*2, radius*2)); if (_fittingMethod === 0) { viewport.fitBoundsWithConstraints(bounds, false); } else if (_fittingMethod === 1) { viewport.fitBounds(bounds, false); } else if (_fittingMethod === 2) { viewport.fitBounds(bounds, false).applyConstraints(); } } function changeMethod(value) { _fittingMethod = parseInt(value, 10); } function goHome() { _viewer.viewport.goHome(); } </script> </body> </html>