mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-01-31 23:21:42 +03:00
Code Issues Projects Releases Wiki Activity

Drawer creation now supports width or height rather than scale.

Browse Source
This commit is contained in:
Ian Gilman 2014-07-31 15:54:20 -07:00
parent 298bcc25fb
commit 48603ba260
4 changed files with 64 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/drawer.js
View File

@ -72,11 +72,33 @@ $.Drawer = function( options ) {
};
}
$.extend( true, this, {
this._worldX = options.x || 0;
delete options.x;
this._worldY = options.y || 0;
delete options.y;
x: 0,
y: 0,
scale: 1,
// Ratio of zoomable image height to width.
this.normHeight = options.source.dimensions.y / options.source.dimensions.x;
if ( options.width ) {
this._scale = options.width;
delete options.width;
if ( options.height ) {
$.console.error( "specifying both width and height to a drawer is not supported" );
delete options.height;
}
} else if ( options.height ) {
this._scale = options.height / this.normHeight;
delete options.height;
} else {
this._scale = 1;
}
this._worldWidth = this._scale;
this._worldHeight = this.normHeight * this._scale;
$.extend( true, this, {
//internal state properties
viewer: null,
@ -87,7 +109,7 @@ $.Drawer = function( options ) {
lastDrawn: [], // An unordered list of Tiles drawn last frame.
lastResetTime: 0, // Last time for which the drawer was reset.
midUpdate: false, // Is the drawer currently updating the viewport?
updateAgain: true, // Does the drawer need to update the viewort again?
updateAgain: true, // Does the drawer need to update the viewport again?
//internal state / configurable settings
@ -130,11 +152,6 @@ $.Drawer = function( options ) {
* @memberof OpenSeadragon.Drawer#
*/
this.context = this.useCanvas ? this.canvas.getContext( "2d" ) : null;
// Ratio of zoomable image height to width.
this.normHeight = this.source.dimensions.y / this.source.dimensions.x;
this.worldWidth = this.scale;
this.worldHeight = this.normHeight * this.scale;
/**
* @member {Element} element
@ -365,7 +382,7 @@ function updateViewport( drawer ) {
zeroRatioC = drawer.viewport.deltaPixelsFromPoints(
drawer.source.getPixelRatio( 0 ),
true
).x * drawer.scale,
).x * drawer._scale,
lowestLevel = Math.max(
drawer.source.minLevel,
Math.floor(
@ -388,10 +405,10 @@ function updateViewport( drawer ) {
levelOpacity,
levelVisibility;
viewportTL.x -= drawer.x;
viewportTL.y -= drawer.y;
viewportBR.x -= drawer.x;
viewportBR.y -= drawer.y;
viewportTL.x -= drawer._worldX;
viewportTL.y -= drawer._worldY;
viewportBR.x -= drawer._worldX;
viewportBR.y -= drawer._worldY;
// Reset tile's internal drawn state
while ( drawer.lastDrawn.length > 0 ) {
@ -419,22 +436,22 @@ function updateViewport( drawer ) {
//Don't draw if completely outside of the viewport
if ( !drawer.wrapHorizontal &&
( viewportBR.x < 0 || viewportTL.x > drawer.worldWidth ) ) {
( viewportBR.x < 0 || viewportTL.x > drawer._worldWidth ) ) {
return;
} else if
( !drawer.wrapVertical &&
( viewportBR.y < 0 || viewportTL.y > drawer.worldHeight ) ) {
( viewportBR.y < 0 || viewportTL.y > drawer._worldHeight ) ) {
return;
}
// Calculate viewport rect / bounds
if ( !drawer.wrapHorizontal ) {
viewportTL.x = Math.max( viewportTL.x, 0 );
viewportBR.x = Math.min( viewportBR.x, drawer.worldWidth );
viewportBR.x = Math.min( viewportBR.x, drawer._worldWidth );
}
if ( !drawer.wrapVertical ) {
viewportTL.y = Math.max( viewportTL.y, 0 );
viewportBR.y = Math.min( viewportBR.y, drawer.worldHeight );
viewportBR.y = Math.min( viewportBR.y, drawer._worldHeight );
}
// Calculations for the interval of levels to draw
@ -451,7 +468,7 @@ function updateViewport( drawer ) {
renderPixelRatioC = drawer.viewport.deltaPixelsFromPoints(
drawer.source.getPixelRatio( level ),
true
).x * drawer.scale;
).x * drawer._scale;
if ( ( !haveDrawn && renderPixelRatioC >= drawer.minPixelRatio ) ||
( level == lowestLevel ) ) {
@ -465,7 +482,7 @@ function updateViewport( drawer ) {
renderPixelRatioT = drawer.viewport.deltaPixelsFromPoints(
drawer.source.getPixelRatio( level ),
false
).x * drawer.scale;
).x * drawer._scale;
zeroRatioT = drawer.viewport.deltaPixelsFromPoints(
drawer.source.getPixelRatio(
@ -475,7 +492,7 @@ function updateViewport( drawer ) {
)
),
false
).x * drawer.scale;
).x * drawer._scale;
optimalRatio = drawer.immediateRender ?
1 :
@ -561,8 +578,8 @@ function updateLevel( drawer, haveDrawn, drawLevel, level, levelOpacity, levelVi
}
//OK, a new drawing so do your calculations
tileTL = drawer.source.getTileAtPoint( level, viewportTL.divide( drawer.scale ));
tileBR = drawer.source.getTileAtPoint( level, viewportBR.divide( drawer.scale ));
tileTL = drawer.source.getTileAtPoint( level, viewportTL.divide( drawer._scale ));
tileBR = drawer.source.getTileAtPoint( level, viewportBR.divide( drawer._scale ));
numberOfTiles = drawer.source.getNumTiles( level );
resetCoverage( drawer.coverage, level );
@ -606,8 +623,8 @@ function updateTile( drawer, drawLevel, haveDrawn, x, y, level, levelOpacity, le
drawer.tilesMatrix,
currentTime,
numberOfTiles,
drawer.worldWidth,
drawer.worldHeight
drawer._worldWidth,
drawer._worldHeight
),
drawTile = drawLevel;
@ -810,15 +827,15 @@ function onTileLoad( drawer, tile, time, image ) {
function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility, drawer ){
var boundsTL = tile.bounds.getTopLeft();
boundsTL.x *= drawer.scale;
boundsTL.y *= drawer.scale;
boundsTL.x += drawer.x;
boundsTL.y += drawer.y;
boundsTL.x *= drawer._scale;
boundsTL.y *= drawer._scale;
boundsTL.x += drawer._worldX;
boundsTL.y += drawer._worldY;
var boundsSize = tile.bounds.getSize();
boundsSize.x *= drawer.scale;
boundsSize.y *= drawer.scale;
boundsSize.x *= drawer._scale;
boundsSize.y *= drawer._scale;
var positionC = viewport.pixelFromPoint( boundsTL, true ),
positionT = viewport.pixelFromPoint( boundsTL, false ),

18
src/viewer.js
View File

@ -1114,9 +1114,10 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
source: tileSource,
viewport: _this.viewport,
element: _this.drawersContainer,
x: options.x !== undefined ? options.x : 0,
y: options.y !== undefined ? options.y : 0,
scale: options.scale || 1,
x: options.x,
y: options.y,
width: options.width,
height: options.height,
opacity: options.opacity !== undefined ?
options.opacity : _this.opacity,
maxImageCacheCount: _this.maxImageCacheCount,
@ -1916,6 +1917,8 @@ function openTileSource( viewer, source, options ) {
var i,
_this = viewer;
options = options || {};
if ( _this.source ) {
_this.close( );
}
@ -1980,6 +1983,10 @@ function openTileSource( viewer, source, options ) {
source: _this.source,
viewport: _this.viewport,
element: _this.drawersContainer,
x: options.x,
y: options.y,
width: options.width,
height: options.height,
opacity: _this.opacity,
maxImageCacheCount: _this.maxImageCacheCount,
imageLoaderLimit: _this.imageLoaderLimit,
@ -1993,10 +2000,7 @@ function openTileSource( viewer, source, options ) {
timeout: _this.timeout,
debugMode: _this.debugMode,
debugGridColor: _this.debugGridColor,
crossOriginPolicy: _this.crossOriginPolicy,
x: options.x || 0,
y: options.y || 0,
scale: options.scale || 1
crossOriginPolicy: _this.crossOriginPolicy
});
_this.drawers = [_this.drawer];

5
test/demo/collections/main.js
View File

@ -7,6 +7,7 @@
this.viewer = OpenSeadragon( {
debugMode: true,
zoomPerScroll: 1.02,
// showNavigator: true,
id: "contentDiv",
prefixUrl: "../../../build/openseadragon/images/"
} );
@ -18,7 +19,7 @@
this.viewer.open("../../data/tall.dzi", {
x: 1.5,
y: 0,
scale: 1
width: 1
});
},
@ -31,7 +32,7 @@
opacity: 1,
x: 0,
y: 1.5,
scale: 4
height: 1
};
var addLayerHandler = function( event ) {

2
test/test.html
View File

@ -14,7 +14,7 @@
<script src="/test/lib/jquery-1.9.1.min.js"></script>
<script src="/test/lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js"></script>
<script src="/test/lib/jquery.simulate.js"></script>
<script src="/build/openseadragon/openseadragon.min.js"></script>
<script src="/build/openseadragon/openseadragon.js"></script>
<script src="/test/legacy.mouse.shim.js"></script>
<script src="/test/test.js"></script>