mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-21 20:56:09 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #423 from henri-astre-msft/fitBoundsWithConstraints

Browse Source 
add fitBoundsWithConstraints() to the viewport.
This commit is contained in:
iangilman 2014-07-24 09:28:53 -07:00
commit 1e4288f770
2 changed files with 238 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
src/viewport.js
View File

@ -319,41 +319,37 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
return this.zoomSpring.target.value;
}
},
/**
* @function
* @return {OpenSeadragon.Viewport} Chainable.
* @fires OpenSeadragon.Viewer.event:constrain
*/
applyConstraints: function( immediately ) {
var actualZoom = this.getZoom(),
constrainedZoom = Math.max(
Math.min( actualZoom, this.getMaxZoom() ),
this.getMinZoom()
),
bounds,
horizontalThreshold,
* @private
* @param {OpenSeadragon.Rect} bounds
* @param {Boolean} immediately
* @return {OpenSeadragon.Rect} constrained bounds.
*/
_applyBoundaryConstraints: function( bounds, immediately ) {
var horizontalThreshold,
verticalThreshold,
left,
right,
top,
bottom,
dx = 0,
dy = 0;
dy = 0,
newBounds = new $.Rect(
bounds.x,
bounds.y,
bounds.width,
bounds.height
);
horizontalThreshold = this.visibilityRatio * newBounds.width;
verticalThreshold = this.visibilityRatio * newBounds.height;
if ( actualZoom != constrainedZoom ) {
this.zoomTo( constrainedZoom, this.zoomPoint, immediately );
}
bounds = this.getBounds();
horizontalThreshold = this.visibilityRatio * bounds.width;
verticalThreshold = this.visibilityRatio * bounds.height;
left = bounds.x + bounds.width;
right = 1 - bounds.x;
top = bounds.y + bounds.height;
bottom = this.contentAspectY - bounds.y;
left = newBounds.x + newBounds.width;
right = 1 - newBounds.x;
top = newBounds.y + newBounds.height;
bottom = this.contentAspectY - newBounds.y;
if ( this.wrapHorizontal ) {
//do nothing
@ -382,17 +378,16 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
}
if ( dx || dy || immediately ) {
bounds.x += dx;
bounds.y += dy;
if( bounds.width > 1 ){
bounds.x = 0.5 - bounds.width/2;
newBounds.x += dx;
newBounds.y += dy;
if( newBounds.width > 1 ){
newBounds.x = 0.5 - newBounds.width/2;
}
if( bounds.height > this.contentAspectY ){
bounds.y = this.contentAspectY/2 - bounds.height/2;
if( newBounds.height > this.contentAspectY ){
newBounds.y = this.contentAspectY/2 - newBounds.height/2;
}
this.fitBounds( bounds, immediately );
}
if( this.viewer ){
/**
* Raised when the viewport constraints are applied (see {@link OpenSeadragon.Viewport#applyConstraints}).
@ -407,8 +402,37 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
this.viewer.raiseEvent( 'constrain', {
immediately: immediately
});
}
return newBounds;
},
/**
* @function
* @return {OpenSeadragon.Viewport} Chainable.
* @fires OpenSeadragon.Viewer.event:constrain
*/
applyConstraints: function( immediately ) {
var actualZoom = this.getZoom(),
constrainedZoom = Math.max(
Math.min( actualZoom, this.getMaxZoom() ),
this.getMinZoom()
),
bounds,
constrainedBounds;
if ( actualZoom != constrainedZoom ) {
this.zoomTo( constrainedZoom, this.zoomPoint, immediately );
}
bounds = this.getBounds();
constrainedBounds = this._applyBoundaryConstraints( bounds, immediately );
if ( bounds.x !== constrainedBounds.x || bounds.y !== constrainedBounds.y || immediately ){
this.fitBounds( constrainedBounds, immediately );
}
return this;
},
@ -419,14 +443,19 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
ensureVisible: function( immediately ) {
return this.applyConstraints( immediately );
},
/**
* @function
* @private
* @param {OpenSeadragon.Rect} bounds
* @param {Boolean} immediately
* @param {Object} options (immediately=false, constraints=false)
* @return {OpenSeadragon.Viewport} Chainable.
*/
fitBounds: function( bounds, immediately ) {
_fitBounds: function( bounds, options ) {
options = options || {};
var immediately = options.immediately || false;
var constraints = options.constraints || false;
var aspect = this.getAspectRatio(),
center = bounds.getCenter(),
newBounds = new $.Rect(
@ -438,8 +467,10 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
oldBounds,
oldZoom,
newZoom,
referencePoint;
referencePoint,
newBoundsAspectRatio,
newConstrainedZoom;
if ( newBounds.getAspectRatio() >= aspect ) {
newBounds.height = bounds.width / aspect;
newBounds.y = center.y - newBounds.height / 2;
@ -447,17 +478,39 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
newBounds.width = bounds.height * aspect;
newBounds.x = center.x - newBounds.width / 2;
}
if ( constraints ) {
newBoundsAspectRatio = newBounds.getAspectRatio();
}
this.panTo( this.getCenter( true ), true );
this.zoomTo( this.getZoom( true ), null, true );
oldBounds = this.getBounds();
oldZoom = this.getZoom();
newZoom = 1.0 / newBounds.width;
if ( newZoom == oldZoom || newBounds.width == oldBounds.width ) {
return this.panTo( center, immediately );
if ( constraints ) {
newConstrainedZoom = Math.max(
Math.min(newZoom, this.getMaxZoom() ),
this.getMinZoom()
);
if (newZoom !== newConstrainedZoom) {
newZoom = newConstrainedZoom;
newBounds.width = 1.0 / newZoom;
newBounds.x = center.x - newBounds.width / 2;
newBounds.height = newBounds.width / newBoundsAspectRatio;
newBounds.y = center.y - newBounds.height / 2;
}
newBounds = this._applyBoundaryConstraints( newBounds, immediately );
}
if ( newZoom == oldZoom || newBounds.width == oldBounds.width ) {
return this.panTo( constraints ? newBounds.getCenter() : center, immediately );
}
referencePoint = oldBounds.getTopLeft().times(
this.containerSize.x / oldBounds.width
).minus(
@ -468,11 +521,36 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
this.containerSize.x / oldBounds.width -
this.containerSize.x / newBounds.width
);
return this.zoomTo( newZoom, referencePoint, immediately );
},
/**
* @function
* @param {OpenSeadragon.Rect} bounds
* @param {Boolean} immediately
* @return {OpenSeadragon.Viewport} Chainable.
*/
fitBounds: function( bounds, immediately ) {
return this._fitBounds( bounds, {
immediately: immediately,
constraints: false
} );
},
/**
* @function
* @param {OpenSeadragon.Rect} bounds
* @param {Boolean} immediately
* @return {OpenSeadragon.Viewport} Chainable.
*/
fitBoundsWithConstraints: function( bounds, immediately ) {
return this._fitBounds( bounds, {
immediately: immediately,
constraints: true
} );
},
/**
* @function
* @param {Boolean} immediately

113
test/demo/fitboundswithconstraints.html Normal file
View File

@ -0,0 +1,113 @@
<!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>