mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-02-08 02:49:22 +03:00
Code Issues Projects Releases Wiki Activity

Add support for viewing custom tile sources with non-square tiles

Browse Source
This commit is contained in:
Conner Wingard 2015-06-26 14:17:40 -04:00
parent ad2940d897
commit 7e950fda2b
3 changed files with 36 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/iiiftilesource.js
View File

@ -192,7 +192,7 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
if (this.tileSizePerScaleFactor && this.tileSizePerScaleFactor[scaleFactor]) { if (this.tileSizePerScaleFactor && this.tileSizePerScaleFactor[scaleFactor]) {
this.tileSize = this.tileSizePerScaleFactor[scaleFactor]; this.tileSize = this.tileSizePerScaleFactor[scaleFactor];
} }
return this.tileSize; return new $.Point(this.tileSize, this.tileSize);
}, },
/** /**
@ -229,8 +229,9 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
uri; uri;
tileSize = this.getTileSize(level); tileSize = this.getTileSize(level);
iiifTileSizeWidth = Math.ceil( tileSize / scale );
iiifTileSizeHeight = iiifTileSizeWidth; iiifTileSizeWidth = Math.ceil( tileSize.x / scale );
iiifTileSizeHeight = Math.ceil( tileSize.y / scale );
if ( this['@context'].indexOf('/1.0/context.json') > -1 || if ( this['@context'].indexOf('/1.0/context.json') > -1 ||
this['@context'].indexOf('/1.1/context.json') > -1 || this['@context'].indexOf('/1.1/context.json') > -1 ||
@ -240,7 +241,7 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
iiifQuality = "default.jpg"; iiifQuality = "default.jpg";
} }
if ( levelWidth < tileSize && levelHeight < tileSize ){ if ( levelWidth < tileSize.x && levelHeight < tileSize.y ){
iiifSize = levelWidth + ","; iiifSize = levelWidth + ",";
iiifRegion = 'full'; iiifRegion = 'full';
} else { } else {

2
src/tiledimage.js
View File

@ -1036,7 +1036,7 @@ function onTileLoad( tiledImage, tile, time, image ) {
var finish = function() { var finish = function() {
var cutoff = Math.ceil( Math.log( var cutoff = Math.ceil( Math.log(
tiledImage.source.getTileSize(tile.level) ) / Math.log( 2 ) ); tiledImage.source.getTileSize(tile.level).x ) / Math.log( 2 ) );
setTileLoaded(tiledImage, tile, image, cutoff); setTileLoaded(tiledImage, tile, image, cutoff);
}; };

43
src/tilesource.js
View File

@ -73,6 +73,11 @@
* The size of the tiles to assumed to make up each pyramid layer in pixels. * The size of the tiles to assumed to make up each pyramid layer in pixels.
* Tile size determines the point at which the image pyramid must be * Tile size determines the point at which the image pyramid must be
* divided into a matrix of smaller images. * divided into a matrix of smaller images.
* Use options.tileWidth and options.tileHeight to support non-square tiles.
* @param {Number} [options.tileWidth]
* The width of the tiles to assumed to make up each pyramid layer in pixels.
* @param {Number} [options.tileHeight]
* The height of the tiles to assumed to make up each pyramid layer in pixels.
* @param {Number} [options.tileOverlap] * @param {Number} [options.tileOverlap]
* The number of pixels each tile is expected to overlap touching tiles. * The number of pixels each tile is expected to overlap touching tiles.
* @param {Number} [options.minLevel] * @param {Number} [options.minLevel]
@ -191,7 +196,10 @@ $.TileSource = function( width, height, tileSize, tileOverlap, minLevel, maxLeve
this.aspectRatio = ( options.width && options.height ) ? this.aspectRatio = ( options.width && options.height ) ?
( options.width / options.height ) : 1; ( options.width / options.height ) : 1;
this.dimensions = new $.Point( options.width, options.height ); this.dimensions = new $.Point( options.width, options.height );
this.tileSize = options.tileSize ? options.tileSize : 0; this.tileSize = new $.Point(
( options.tileSize ? options.tileSize : options.tileWidth ),
( options.tileSize ? options.tileSize : options.tileHeight )
);
this.tileOverlap = options.tileOverlap ? options.tileOverlap : 0; this.tileOverlap = options.tileOverlap ? options.tileOverlap : 0;
this.minLevel = options.minLevel ? options.minLevel : 0; this.minLevel = options.minLevel ? options.minLevel : 0;
this.maxLevel = ( undefined !== options.maxLevel && null !== options.maxLevel ) ? this.maxLevel = ( undefined !== options.maxLevel && null !== options.maxLevel ) ?
@ -219,6 +227,7 @@ $.TileSource.prototype = /** @lends OpenSeadragon.TileSource.prototype */{
* from .tileSize directly. tileSize may be deprecated in a future release. * from .tileSize directly. tileSize may be deprecated in a future release.
* @function * @function
* @param {Number} level * @param {Number} level
* @returns {OpenSeadragon.Point} The dimensions of tiles in level
*/ */
getTileSize: function( level ) { getTileSize: function( level ) {
return this.tileSize; return this.tileSize;
@ -250,8 +259,8 @@ $.TileSource.prototype = /** @lends OpenSeadragon.TileSource.prototype */{
*/ */
getNumTiles: function( level ) { getNumTiles: function( level ) {
var scale = this.getLevelScale( level ), var scale = this.getLevelScale( level ),
x = Math.ceil( scale * this.dimensions.x / this.getTileSize(level) ), x = Math.ceil( scale * this.dimensions.x / this.getTileSize(level).x ),
y = Math.ceil( scale * this.dimensions.y / this.getTileSize(level) ); y = Math.ceil( scale * this.dimensions.y / this.getTileSize(level).y );
return new $.Point( x, y ); return new $.Point( x, y );
}, },
@ -276,11 +285,19 @@ $.TileSource.prototype = /** @lends OpenSeadragon.TileSource.prototype */{
getClosestLevel: function( rect ) { getClosestLevel: function( rect ) {
var i, var i,
tilesPerSide, tilesPerSide,
tiles; tiles,
tileSize;
for( i = this.minLevel; i < this.maxLevel; i++ ){ for( i = this.minLevel; i < this.maxLevel; i++ ){
tiles = this.getNumTiles( i ); tiles = this.getNumTiles( i );
tilesPerSide = Math.floor( Math.max( rect.x, rect.y ) / this.getTileSize(i) ); tileSize = this.getTileSize(i);
if( Math.max( tiles.x, tiles.y ) + 1 >= tilesPerSide ){
tilesPerSide = new $.Point(
Math.floor( rect.x / tileSize.x ),
Math.floor( rect.y / tileSize.y )
);
if( tiles.x + 1 >= tilesPerSide.x && tiles.y + 1 >= tilesPerSide.y ){
break; break;
} }
} }
@ -293,9 +310,9 @@ $.TileSource.prototype = /** @lends OpenSeadragon.TileSource.prototype */{
* @param {OpenSeadragon.Point} point * @param {OpenSeadragon.Point} point
*/ */
getTileAtPoint: function( level, point ) { getTileAtPoint: function( level, point ) {
var pixel = point.times( this.dimensions.x ).times( this.getLevelScale(level ) ), var pixel = point.times( this.dimensions.x ).times( this.getLevelScale(level) ),
tx = Math.floor( pixel.x / this.getTileSize(level) ), tx = Math.floor( pixel.x / this.getTileSize(level).x ),
ty = Math.floor( pixel.y / this.getTileSize(level) ); ty = Math.floor( pixel.y / this.getTileSize(level).y );
return new $.Point( tx, ty ); return new $.Point( tx, ty );
}, },
@ -309,10 +326,10 @@ $.TileSource.prototype = /** @lends OpenSeadragon.TileSource.prototype */{
getTileBounds: function( level, x, y ) { getTileBounds: function( level, x, y ) {
var dimensionsScaled = this.dimensions.times( this.getLevelScale( level ) ), var dimensionsScaled = this.dimensions.times( this.getLevelScale( level ) ),
tileSize = this.getTileSize(level), tileSize = this.getTileSize(level),
px = ( x === 0 ) ? 0 : tileSize * x - this.tileOverlap, px = ( x === 0 ) ? 0 : tileSize.x * x - this.tileOverlap,
py = ( y === 0 ) ? 0 : tileSize * y - this.tileOverlap, py = ( y === 0 ) ? 0 : tileSize.y * y - this.tileOverlap,
sx = tileSize + ( x === 0 ? 1 : 2 ) * this.tileOverlap, sx = tileSize.x + ( x === 0 ? 1 : 2 ) * this.tileOverlap,
sy = tileSize + ( y === 0 ? 1 : 2 ) * this.tileOverlap, sy = tileSize.y + ( y === 0 ? 1 : 2 ) * this.tileOverlap,
scale = 1.0 / dimensionsScaled.x; scale = 1.0 / dimensionsScaled.x;
sx = Math.min( sx, dimensionsScaled.x - px ); sx = Math.min( sx, dimensionsScaled.x - px );