diff --git a/src/tile.js b/src/tile.js index 1ea7c5d9..701db750 100644 --- a/src/tile.js +++ b/src/tile.js @@ -176,6 +176,12 @@ $.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, aja * @memberof OpenSeadragon.Tile# */ this.size = null; + /** + * Whether to flip the tile when rendering. + * @member {Boolean} flipped + * @memberof OpenSeadragon.Tile# + */ + this.flipped = false; /** * The start time of this tile's blending. * @member {Number} blendStart @@ -296,6 +302,10 @@ $.Tile.prototype = { this.style.height = this.size.y + "px"; this.style.width = this.size.x + "px"; + if (this.flipped) { + this.style.transform = "scaleX(-1)"; + } + $.setElementOpacity( this.element, this.opacity ); }, @@ -376,13 +386,17 @@ $.Tile.prototype = { sourceHeight = rendered.canvas.height; } + context.translate(position.x + size.x / 2, 0); + if (this.flipped) { + context.scale(-1, 1); + } context.drawImage( rendered.canvas, 0, 0, sourceWidth, sourceHeight, - position.x, + -size.x / 2, position.y, size.x, size.y diff --git a/src/tiledimage.js b/src/tiledimage.js index b89a0d8e..2b9efd26 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -849,6 +849,13 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag this.raiseEvent('clip-change'); }, + /** + * @returns {Boolean} Whether the TiledImage should be flipped before rendering. + */ + getFlip: function() { + return !!this.flipped; + }, + /** * @returns {Number} The TiledImage's current opacity. */ @@ -1701,6 +1708,7 @@ function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility, tile.size = sizeC; tile.squaredDistance = tileSquaredDistance; tile.visibility = levelVisibility; + tile.flipped = tiledImage.getFlip(); } /** diff --git a/src/viewer.js b/src/viewer.js index 29b2054a..9592abf9 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1301,6 +1301,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, * @param {Boolean} [options.preload=false] Default switch for loading hidden images (true loads, false blocks) * @param {Number} [options.degrees=0] Initial rotation of the tiled image around * its top left corner in degrees. + * @param {Boolean} [options.flipped=false] Whether to horizontally flip the image. * @param {String} [options.compositeOperation] How the image is composited onto other images. * @param {String} [options.crossOriginPolicy] The crossOriginPolicy for this specific image, * overriding viewer.crossOriginPolicy. @@ -1463,6 +1464,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, opacity: queueItem.options.opacity, preload: queueItem.options.preload, degrees: queueItem.options.degrees, + flipped: queueItem.options.flipped, compositeOperation: queueItem.options.compositeOperation, springStiffness: _this.springStiffness, animationTime: _this.animationTime,