2014-06-21 03:18:04 +04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2014-06-24 03:10:01 +04:00
|
|
|
<title>OpenSeadragon fitBoundsWithConstraints() Demo</title>
|
2014-06-21 03:18:04 +04:00
|
|
|
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
|
2022-12-07 00:42:13 +03:00
|
|
|
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
|
2014-06-21 03:18:04 +04:00
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
.openseadragon1 {
|
|
|
|
|
width: 800px;
|
2022-12-07 00:42:13 +03:00
|
|
|
height: 500px;
|
|
|
|
|
border:thin black solid;
|
|
|
|
|
margin-right:20px;
|
2014-06-21 03:18:04 +04:00
|
|
|
}
|
2022-12-07 01:21:03 +03:00
|
|
|
#buttons button{
|
|
|
|
|
width:10em;
|
|
|
|
|
text-align:center;
|
|
|
|
|
margin:5px;
|
2014-06-21 03:18:04 +04:00
|
|
|
}
|
2022-12-07 00:42:13 +03:00
|
|
|
.layout{
|
|
|
|
|
display:grid;
|
|
|
|
|
grid-template-columns:auto 1fr;
|
|
|
|
|
padding:10px;
|
|
|
|
|
}
|
|
|
|
|
.method{
|
|
|
|
|
border:medium gray solid;
|
|
|
|
|
margin:2px;
|
|
|
|
|
background-color:rgb(240, 240, 240)
|
|
|
|
|
}
|
|
|
|
|
.method.selected{
|
|
|
|
|
border:medium red solid;
|
|
|
|
|
background-color: lightgoldenrodyellow;
|
|
|
|
|
}
|
2014-06-21 03:18:04 +04:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2022-12-07 00:42:13 +03:00
|
|
|
<div class="layout">
|
|
|
|
|
<div id="contentDiv" class="openseadragon1"></div>
|
|
|
|
|
<div id="controls">
|
|
|
|
|
<div>
|
|
|
|
|
Simple demo page to show viewport.fitBounds() with and without constraints. The viewer
|
|
|
|
|
is set up with visibilityRatio = 1 and constrainDuringPan = true to clearly demonstrate the
|
|
|
|
|
constraints.
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h3>Pick a method to use:</h3>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="method selected" data-value="0">
|
|
|
|
|
<pre>viewport.fitBounds(bounds); //Ignores constraints</pre>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="method" data-value="1">
|
|
|
|
|
<pre>viewport.fitBoundsWithConstraints(bounds);</pre>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="method" data-value="4">
|
|
|
|
|
<pre>viewport.fitBoundsWithConstraints(bounds, true); //immediate</pre>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="method" data-value="2">
|
|
|
|
|
<pre>//Initially ignore constraints
|
|
|
|
|
viewport.fitBounds(bounds);
|
|
|
|
|
|
|
|
|
|
//Apply constraints after 1 second delay
|
|
|
|
|
setTimeout(() => viewport.applyConstraints(), 1000);</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<button id="rotate">Rotate the viewer</button>
|
|
|
|
|
<h3>Click to fit overlay bounds:</h3>
|
2022-12-07 01:21:03 +03:00
|
|
|
<div id="buttons"></div>
|
2022-12-07 00:42:13 +03:00
|
|
|
<h4>overlay.getBounds(viewer.viewport):</h4>
|
|
|
|
|
<pre class="bounds">Pick an overlay above to show the bounds</pre>
|
|
|
|
|
</div>
|
2014-06-21 03:18:04 +04:00
|
|
|
</div>
|
|
|
|
|
|
2014-08-13 03:44:53 +04:00
|
|
|
|
2014-06-21 03:18:04 +04:00
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
2022-12-07 00:42:13 +03:00
|
|
|
var viewer;
|
2014-06-21 03:18:04 +04:00
|
|
|
var _fittingMethod = 0;
|
2022-12-07 00:42:13 +03:00
|
|
|
viewer = window.viewer = OpenSeadragon({
|
|
|
|
|
id: "contentDiv",
|
2014-06-21 03:18:04 +04:00
|
|
|
prefixUrl: "../../build/openseadragon/images/",
|
2022-12-07 00:42:13 +03:00
|
|
|
tileSources: "../data/testpattern.dzi",
|
|
|
|
|
minZoomImageRatio: 0,
|
|
|
|
|
maxZoomPixelRatio: 10,
|
2022-12-10 14:57:53 +03:00
|
|
|
visibilityRatio:1,
|
2022-12-07 00:42:13 +03:00
|
|
|
constrainDuringPan:true,
|
2022-12-10 14:57:53 +03:00
|
|
|
// showNavigationControl:false,
|
2022-12-07 00:42:13 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
viewer.addHandler("open", function(event) {
|
|
|
|
|
var elt = document.createElement("div");
|
|
|
|
|
elt.className = "runtime-overlay";
|
|
|
|
|
elt.style.background = "green";
|
|
|
|
|
elt.style.outline = "3px solid red";
|
|
|
|
|
elt.style.opacity = "0.7";
|
|
|
|
|
elt.textContent = "Within the image";
|
|
|
|
|
viewer.addOverlay({
|
|
|
|
|
element: elt,
|
|
|
|
|
location: new OpenSeadragon.Rect(0.21, 0.21, 0.099, 0.299),
|
|
|
|
|
rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
elt = document.createElement("div");
|
|
|
|
|
elt.className = "runtime-overlay";
|
|
|
|
|
elt.style.background = "white";
|
|
|
|
|
elt.style.opacity = "0.5";
|
|
|
|
|
elt.style.outline = "5px solid pink";
|
|
|
|
|
elt.textContent = "Left edge rectangle";
|
|
|
|
|
viewer.addOverlay({
|
|
|
|
|
element: elt,
|
|
|
|
|
location: new OpenSeadragon.Rect(-0.4, 0.7, 0.7, 0.15)
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var elt = document.createElement("div");
|
|
|
|
|
elt.className = "runtime-overlay";
|
|
|
|
|
elt.style.background = "lightblue";
|
|
|
|
|
elt.style.outline = "3px solid purple";
|
|
|
|
|
elt.style.opacity = "0.7";
|
|
|
|
|
elt.textContent = "Top right square";
|
|
|
|
|
viewer.addOverlay({
|
|
|
|
|
element: elt,
|
|
|
|
|
location: new OpenSeadragon.Rect(0.9, -0.1, 0.2, 0.2),
|
|
|
|
|
rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
viewer.currentOverlays.forEach(overlay=>{
|
|
|
|
|
var text = $(overlay.element).text();
|
2022-12-07 01:21:03 +03:00
|
|
|
var div=$('<div>').appendTo('#buttons');
|
|
|
|
|
var buttons=$('<button>').text(text).appendTo(div).on('click',()=>{
|
2022-12-07 00:42:13 +03:00
|
|
|
|
|
|
|
|
var bounds = overlay.getBounds(viewer.viewport);
|
|
|
|
|
$('.bounds').text(JSON.stringify(bounds,null,2));
|
|
|
|
|
|
|
|
|
|
var _fittingMethod = parseInt($('.method.selected').data('value'));
|
|
|
|
|
|
|
|
|
|
if (_fittingMethod === 0) {
|
|
|
|
|
viewer.viewport.fitBounds(bounds, false);
|
|
|
|
|
}
|
|
|
|
|
else if (_fittingMethod === 1) {
|
|
|
|
|
viewer.viewport.fitBoundsWithConstraints(bounds, false);
|
|
|
|
|
}
|
|
|
|
|
else if (_fittingMethod === 4) {
|
|
|
|
|
viewer.viewport.fitBoundsWithConstraints(bounds, true);
|
|
|
|
|
}
|
|
|
|
|
else if (_fittingMethod === 2) {
|
|
|
|
|
viewer.viewport.fitBounds(bounds, false);
|
|
|
|
|
setTimeout(()=>viewer.viewport.applyConstraints(), 1000);
|
2014-06-21 03:18:04 +04:00
|
|
|
}
|
2022-12-07 00:42:13 +03:00
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
|
2022-12-10 14:57:53 +03:00
|
|
|
viewer.viewport.zoomTo(1/2, null, true);
|
|
|
|
|
|
|
|
|
|
// viewer.viewport.panBy(new OpenSeadragon.Point(0.5, 0.5).minus(viewer.viewport.pointFromPixel(new OpenSeadragon.Point(0, 0))))
|
|
|
|
|
// setTimeout(()=>viewer.viewport.contentCoords(),1500);
|
|
|
|
|
// // setTimeout(()=>{
|
|
|
|
|
// // viewer.viewport.rotateBy(-90, new OpenSeadragon.Point(0.5, 0.5));
|
|
|
|
|
// // console.log('Rotated by -90')
|
|
|
|
|
// // viewer.viewport.contentCoords();
|
|
|
|
|
// // setTimeout(()=>{
|
|
|
|
|
// // console.log('After rotation');
|
|
|
|
|
// // viewer.viewport.contentCoords();
|
|
|
|
|
// // },1500);
|
|
|
|
|
// // }, 2000)
|
|
|
|
|
|
|
|
|
|
// setTimeout(()=>{
|
|
|
|
|
// viewer.viewport.zoomBy(2, new OpenSeadragon.Point(0.5, 0.5));
|
|
|
|
|
// console.log('Zoomed by 2')
|
|
|
|
|
// viewer.viewport.contentCoords();
|
|
|
|
|
// setTimeout(()=>{
|
|
|
|
|
// console.log('After zoom');
|
|
|
|
|
// viewer.viewport.contentCoords();
|
|
|
|
|
// },1500);
|
|
|
|
|
// }, 4500)
|
2022-12-07 00:42:13 +03:00
|
|
|
|
2014-06-21 03:18:04 +04:00
|
|
|
});
|
2022-12-07 00:42:13 +03:00
|
|
|
$('.method').on('click',function(){
|
|
|
|
|
$('.method').removeClass('selected');
|
|
|
|
|
$(this).addClass('selected');
|
|
|
|
|
})
|
|
|
|
|
$("#rotate").click(function() {
|
|
|
|
|
viewer.viewport.setRotation(viewer.viewport.getRotation() - 22.5);
|
|
|
|
|
$("#degrees").text(viewer.viewport.getRotation() + "deg");
|
2014-06-21 03:18:04 +04:00
|
|
|
});
|
2014-08-13 03:44:53 +04:00
|
|
|
|
2014-06-21 03:18:04 +04:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
