From a3973a25e7fcd8c2096c9bb461c1368026f0c7d2 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Tue, 22 Jul 2014 11:13:22 -0700 Subject: [PATCH] Added scaling to drawer. --- Gruntfile.js | 7 ++++++ src/drawer.js | 44 ++++++++++++++++++++++------------- src/viewer.js | 12 ++++++---- test/demo/collections/main.js | 17 ++++++++++---- 4 files changed, 55 insertions(+), 25 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 0cd48304..a79b23e3 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -222,6 +222,13 @@ module.exports = function(grunt) { "uglify", "replace:cleanPaths", "copy:build" ]); + // ---------- + // Minimal build task. + // For use during development as desired. + grunt.registerTask("minbuild", [ + "git-describe", "concat", "copy:build" + ]); + // ---------- // Test task. // Builds and runs unit tests. diff --git a/src/drawer.js b/src/drawer.js index 6f7af45c..70d5e28b 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -76,6 +76,7 @@ $.Drawer = function( options ) { x: 0, y: 0, + scale: 1, //internal state properties viewer: null, @@ -131,6 +132,10 @@ $.Drawer = function( options ) { 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 * @memberof OpenSeadragon.Drawer# @@ -360,7 +365,7 @@ function updateViewport( drawer ) { zeroRatioC = drawer.viewport.deltaPixelsFromPoints( drawer.source.getPixelRatio( 0 ), true - ).x, + ).x * drawer.scale, lowestLevel = Math.max( drawer.source.minLevel, Math.floor( @@ -414,22 +419,22 @@ function updateViewport( drawer ) { //Don't draw if completely outside of the viewport if ( !drawer.wrapHorizontal && - ( viewportBR.x < 0 || viewportTL.x > 1 ) ) { + ( viewportBR.x < 0 || viewportTL.x > drawer.worldWidth ) ) { return; } else if ( !drawer.wrapVertical && - ( viewportBR.y < 0 || viewportTL.y > drawer.normHeight ) ) { + ( 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, 1 ); + 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.normHeight ); + viewportBR.y = Math.min( viewportBR.y, drawer.worldHeight ); } // Calculations for the interval of levels to draw @@ -446,7 +451,7 @@ function updateViewport( drawer ) { renderPixelRatioC = drawer.viewport.deltaPixelsFromPoints( drawer.source.getPixelRatio( level ), true - ).x; + ).x * drawer.scale; if ( ( !haveDrawn && renderPixelRatioC >= drawer.minPixelRatio ) || ( level == lowestLevel ) ) { @@ -460,7 +465,7 @@ function updateViewport( drawer ) { renderPixelRatioT = drawer.viewport.deltaPixelsFromPoints( drawer.source.getPixelRatio( level ), false - ).x; + ).x * drawer.scale; zeroRatioT = drawer.viewport.deltaPixelsFromPoints( drawer.source.getPixelRatio( @@ -470,7 +475,7 @@ function updateViewport( drawer ) { ) ), false - ).x; + ).x * drawer.scale; optimalRatio = drawer.immediateRender ? 1 : @@ -556,8 +561,8 @@ function updateLevel( drawer, haveDrawn, drawLevel, level, levelOpacity, levelVi } //OK, a new drawing so do your calculations - tileTL = drawer.source.getTileAtPoint( level, viewportTL ); - tileBR = drawer.source.getTileAtPoint( level, viewportBR ); + 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 ); @@ -601,7 +606,8 @@ function updateTile( drawer, drawLevel, haveDrawn, x, y, level, levelOpacity, le drawer.tilesMatrix, currentTime, numberOfTiles, - drawer.normHeight + drawer.worldWidth, + drawer.worldHeight ), drawTile = drawLevel; @@ -671,7 +677,7 @@ function updateTile( drawer, drawLevel, haveDrawn, x, y, level, levelOpacity, le return best; } -function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, normHeight ) { +function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, worldWidth, worldHeight ) { var xMod, yMod, bounds, @@ -693,8 +699,8 @@ function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, normHeig exists = tileSource.tileExists( level, xMod, yMod ); url = tileSource.getTileUrl( level, xMod, yMod ); - bounds.x += 1.0 * ( x - xMod ) / numTiles.x; - bounds.y += normHeight * ( y - yMod ) / numTiles.y; + bounds.x += worldWidth * ( x - xMod ) / numTiles.x; + bounds.y += worldHeight * ( y - yMod ) / numTiles.y; tilesMatrix[ level ][ x ][ y ] = new $.Tile( level, @@ -805,11 +811,17 @@ 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; - var boundsSize = tile.bounds.getSize(), - positionC = viewport.pixelFromPoint( boundsTL, true ), + var boundsSize = tile.bounds.getSize(); + + boundsSize.x *= drawer.scale; + boundsSize.y *= drawer.scale; + + var positionC = viewport.pixelFromPoint( boundsTL, true ), positionT = viewport.pixelFromPoint( boundsTL, false ), sizeC = viewport.deltaPixelsFromPoints( boundsSize, true ), sizeT = viewport.deltaPixelsFromPoints( boundsSize, false ), diff --git a/src/viewer.js b/src/viewer.js index 8be09980..ffcc0b1b 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -497,13 +497,13 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, * @fires OpenSeadragon.Viewer.event:open * @fires OpenSeadragon.Viewer.event:open-failed */ - open: function ( tileSource ) { + open: function ( tileSource, options ) { var _this = this; _this._hideMessage(); getTileSourceImplementation( _this, tileSource, function( tileSource ) { - openTileSource( _this, tileSource ); + openTileSource( _this, tileSource, options ); }, function( event ) { /** * Raised when an error occurs loading a TileSource. @@ -1116,6 +1116,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, element: _this.drawersContainer, x: options.x !== undefined ? options.x : 0, y: options.y !== undefined ? options.y : 0, + scale: options.scale || 1, opacity: options.opacity !== undefined ? options.opacity : _this.opacity, maxImageCacheCount: _this.maxImageCacheCount, @@ -1911,7 +1912,7 @@ function getTileSourceImplementation( viewer, tileSource, successCallback, * @function * @private */ -function openTileSource( viewer, source ) { +function openTileSource( viewer, source, options ) { var i, _this = viewer; @@ -1992,7 +1993,10 @@ function openTileSource( viewer, source ) { timeout: _this.timeout, debugMode: _this.debugMode, debugGridColor: _this.debugGridColor, - crossOriginPolicy: _this.crossOriginPolicy + crossOriginPolicy: _this.crossOriginPolicy, + x: options.x || 0, + y: options.y || 0, + scale: options.scale || 1 }); _this.drawers = [_this.drawer]; diff --git a/test/demo/collections/main.js b/test/demo/collections/main.js index 2a8bf50a..7b6bfb81 100644 --- a/test/demo/collections/main.js +++ b/test/demo/collections/main.js @@ -5,15 +5,21 @@ var self = this; this.viewer = OpenSeadragon( { - // debugMode: true, + debugMode: true, + zoomPerScroll: 1.02, id: "contentDiv", - prefixUrl: "../../../build/openseadragon/images/", - tileSources: "../../data/tall.dzi" + prefixUrl: "../../../build/openseadragon/images/" } ); this.viewer.addHandler( "open", function() { self.addLayer(); }); + + this.viewer.open("../../data/tall.dzi", { + x: 1.5, + y: 0, + scale: 1 + }); }, // ---------- @@ -23,8 +29,9 @@ var options = { tileSource: '../../data/wide.dzi', opacity: 1, - x: 0.5, - y: 0.5 + x: 0, + y: 1.5, + scale: 4 }; var addLayerHandler = function( event ) {