mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-25 14:46:10 +03:00
122 lines
4.4 KiB
HTML
122 lines
4.4 KiB
HTML
<!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
|
|
}
|
|
}
|
|
},
|
|
placeholderFillStyle: "#FF0000",
|
|
placeholderFillStyle: function(context) {
|
|
var gradient = context.createLinearGradient(0,0,1000,0);
|
|
gradient.addColorStop(0,"black");
|
|
gradient.addColorStop(1,"red");
|
|
|
|
return gradient;
|
|
}
|
|
});
|
|
_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>
|