Adding functionality for https://github.com/openseadragon/openseadragon/issues/127 - option for home button to fill rather than fit.

- Added a option to pass to the OpenSeadragon constructor called homeFillsViewer, which defaults to false. If true, the home button will fill the viewer with the image, centered on the image's center, zoomed to fill the viewer at the image's smallest dimension, and clipped at the image's largest dimension. For example, a very tall, thin image in a 4:3 aspect ratio viewer will zoom so that the width of the image fills the viewer, and most of the height of the image is clipped.
This commit is contained in:
nein09 2014-08-29 11:53:29 -07:00
parent e93578fa54
commit 2e4e187b21
2 changed files with 18 additions and 10 deletions

View File

@ -1937,7 +1937,8 @@ function openTileSource( viewer, source ) {
degrees: _this.degrees //, degrees: _this.degrees //,
//TODO: figure out how to support these in a way that makes sense //TODO: figure out how to support these in a way that makes sense
//minZoomLevel: this.minZoomLevel, //minZoomLevel: this.minZoomLevel,
//maxZoomLevel: this.maxZoomLevel //maxZoomLevel: this.maxZoomLevel,
//homeFillsViewer: this.homeFillsViewer
}); });
} else { } else {
if( source ){ if( source ){
@ -1958,7 +1959,8 @@ function openTileSource( viewer, source ) {
maxZoomLevel: _this.maxZoomLevel, maxZoomLevel: _this.maxZoomLevel,
viewer: _this, viewer: _this,
degrees: _this.degrees, degrees: _this.degrees,
navigatorRotate: _this.navigatorRotate navigatorRotate: _this.navigatorRotate,
homeFillsViewer: _this.homeFillsViewer
}); });
} }

View File

@ -84,7 +84,8 @@ $.Viewport = function( options ) {
defaultZoomLevel: $.DEFAULT_SETTINGS.defaultZoomLevel, defaultZoomLevel: $.DEFAULT_SETTINGS.defaultZoomLevel,
minZoomLevel: $.DEFAULT_SETTINGS.minZoomLevel, minZoomLevel: $.DEFAULT_SETTINGS.minZoomLevel,
maxZoomLevel: $.DEFAULT_SETTINGS.maxZoomLevel, maxZoomLevel: $.DEFAULT_SETTINGS.maxZoomLevel,
degrees: $.DEFAULT_SETTINGS.degrees degrees: $.DEFAULT_SETTINGS.degrees,
homeFillsViewer: $.DEFAULT_SETTINGS.homeFillsViewer
}, options ); }, options );
@ -148,16 +149,22 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
* @function * @function
*/ */
getHomeZoom: function() { getHomeZoom: function() {
if( this.defaultZoomLevel ){
return this.defaultZoomLevel;
} else {
var aspectFactor = var aspectFactor =
this.contentAspectX / this.getAspectRatio(); this.contentAspectX / this.getAspectRatio();
if( this.defaultZoomLevel ){ if( this.homeFillsViewer ){ // fill the viewer and clip the image
return this.defaultZoomLevel; return ( aspectFactor >= 1) ?
aspectFactor :
1;
} else { } else {
return ( aspectFactor >= 1 ) ? return ( aspectFactor >= 1 ) ?
1 : 1 :
aspectFactor; aspectFactor;
} }
}
}, },
/** /**
@ -167,7 +174,6 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
var center = this.homeBounds.getCenter( ), var center = this.homeBounds.getCenter( ),
width = 1.0 / this.getHomeZoom( ), width = 1.0 / this.getHomeZoom( ),
height = width / this.getAspectRatio(); height = width / this.getAspectRatio();
return new $.Rect( return new $.Rect(
center.x - ( width / 2.0 ), center.x - ( width / 2.0 ),
center.y - ( height / 2.0 ), center.y - ( height / 2.0 ),