diff --git a/src/drawer.js b/src/drawer.js index fbf66a76..863f363b 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -300,12 +300,13 @@ $.Drawer.prototype = { * @param {Float} [scale=1] - Apply a scale to tile position and size. Defaults to 1. * @param {OpenSeadragon.Point} [translate] A translation vector to offset tile position */ - drawTile: function(tile, drawingHandler, useSketch, scale, translate) { + drawTile: function(tile, drawingHandler, useSketch, scale, translate, imageSmoothingEnabled) { $.console.assert(tile, '[Drawer.drawTile] tile is required'); $.console.assert(drawingHandler, '[Drawer.drawTile] drawingHandler is required'); if (this.useCanvas) { var context = this._getContext(useSketch); + context.imageSmoothingEnabled = imageSmoothingEnabled; scale = scale || 1; tile.drawCanvas(context, drawingHandler, scale, translate); } else { @@ -399,18 +400,22 @@ $.Drawer.prototype = { * @param {String} [options.compositeOperation] - How the image is * composited onto other images; see compositeOperation in * {@link OpenSeadragon.Options} for possible values. + * @param {Boolean} [options.imageSmoothingEnabled] - Wether or not the image is + * drawn smoothly on the canvas; see imageSmoothingEnabled in + * {@link OpenSeadragon.Options} for more explanation. * @param {OpenSeadragon.Rect} [options.bounds] The part of the sketch * canvas to blend in the main canvas. If specified, options.scale and * options.translate get ignored. */ - blendSketch: function(opacity, scale, translate, compositeOperation) { + blendSketch: function(opacity, scale, translate, compositeOperation, imageSmoothingEnabled) { var options = opacity; if (!$.isPlainObject(options)) { options = { opacity: opacity, scale: scale, translate: translate, - compositeOperation: compositeOperation + compositeOperation: compositeOperation, + imageSmoothingEnabled: imageSmoothingEnabled }; } if (!this.useCanvas || !this.sketchCanvas) { @@ -418,10 +423,12 @@ $.Drawer.prototype = { } opacity = options.opacity; compositeOperation = options.compositeOperation; + imageSmoothingEnabled = options.imageSmoothingEnabled; var bounds = options.bounds; this.context.save(); this.context.globalAlpha = opacity; + this.context.imageSmoothingEnabled = imageSmoothingEnabled; if (compositeOperation) { this.context.globalCompositeOperation = compositeOperation; } diff --git a/src/navigator.js b/src/navigator.js index c1bfc6f1..1e0836f4 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -377,10 +377,15 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* _this._matchCompositeOperation(myItem, original); } + function matchImageSmoothingEnabled() { + _this._matchImageSmoothingEnabled(myItem, original); + } + original.addHandler('bounds-change', matchBounds); original.addHandler('clip-change', matchBounds); original.addHandler('opacity-change', matchOpacity); original.addHandler('composite-operation-change', matchCompositeOperation); + original.addHandler('image-rendering-change', matchImageSmoothingEnabled); } }); @@ -418,6 +423,11 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /* // private _matchCompositeOperation: function(myItem, theirItem) { myItem.setCompositeOperation(theirItem.compositeOperation); + }, + + // private + _matchImageSmoothingEnabled: function(myItem, theirItem) { + myItem.setImageSmoothingEnabled(theirItem.imageSmoothingEnabled); } }); diff --git a/src/openseadragon.js b/src/openseadragon.js index 8f52b599..8a8ad9ad 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -198,6 +198,10 @@ * 'destination-over', 'destination-atop', 'destination-in', * 'destination-out', 'lighter', 'copy' or 'xor' * + * @property {Boolean} [imageSmoothingEnabled=true] + * Image smoothing for canvas rendering (only if canvas is used). Not every browser + * is compatible with this option. Valid values are true (default) and false. + * * @property {String|CanvasGradient|CanvasPattern|Function} [placeholderFillStyle=null] * Draws a colored rectangle behind the tile if it is not loaded yet. * You can pass a CSS color value like "#FF8800". @@ -1178,6 +1182,7 @@ function OpenSeadragon( options ){ opacity: 1, preload: false, compositeOperation: null, + imageSmoothingEnabled: true, placeholderFillStyle: null, //REFERENCE STRIP SETTINGS diff --git a/src/tiledimage.js b/src/tiledimage.js index 52012071..4e86b073 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -73,6 +73,7 @@ * @param {Number} [options.opacity=1] - Set to draw at proportional opacity. If zero, images will not draw. * @param {Boolean} [options.preload=false] - Set true to load even when the image is hidden by zero opacity. * @param {String} [options.compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible values. + * @param {Boolean} [options.imageSmoothingEnabled] - How the image is rendered on the canvas; see imageSmoothingEnabled in {@link OpenSeadragon.Options} for more explanation. * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}. * @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}. * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}. @@ -177,7 +178,8 @@ $.TiledImage = function( options ) { placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle, opacity: $.DEFAULT_SETTINGS.opacity, preload: $.DEFAULT_SETTINGS.preload, - compositeOperation: $.DEFAULT_SETTINGS.compositeOperation + compositeOperation: $.DEFAULT_SETTINGS.compositeOperation, + imageSmoothingEnabled: $.DEFAULT_SETTINGS.imageSmoothingEnabled }, options ); this._preload = this.preload; @@ -899,6 +901,39 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag }); }, + /** + * @returns {Boolean} Weather of not the current TiledImage is smoothed on the canvas. + */ + getImageSmoothingEnabled: function() { + return this.imageSmoothingEnabled; + }, + + /** + * @param {Boolean} imageSmoothingEnabled if the tiled image should be drawn smoothly or not. + * @fires OpenSeadragon.TiledImage.event:image-rendering-change + */ + setImageSmoothingEnabled: function(imageSmoothingEnabled) { + if (imageSmoothingEnabled === this.imageSmoothingEnabled) { + return; + } + + this.imageSmoothingEnabled = imageSmoothingEnabled; + this._needsDraw = true; + /** + * Raised when the TiledImage's rendering option has changed. + * @event image-rendering-change + * @memberOf OpenSeadragon.TiledImage + * @type {object} + * @property {Boolean} imageSmoothingEnabled - The new image smoothing value (true or false). + * @property {OpenSeadragon.TiledImage} eventSource - A reference to the + * TiledImage which raised the event. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.raiseEvent('image-rendering-change', { + imageSmoothingEnabled: this.imageSmoothingEnabled + }); + }, + // private _setScale: function(scale, immediately) { var sameTarget = (this._scaleSpring.target.value === scale); @@ -1945,8 +1980,8 @@ function drawTiles( tiledImage, lastDrawn ) { } for (var i = lastDrawn.length - 1; i >= 0; i--) { - tile = lastDrawn[ i ]; - tiledImage._drawer.drawTile( tile, tiledImage._drawingHandler, useSketch, sketchScale, sketchTranslate ); + tile = lastDrawn[i]; + tiledImage._drawer.drawTile(tile, tiledImage._drawingHandler, useSketch, sketchScale, sketchTranslate, tiledImage.imageSmoothingEnabled); tile.beingDrawn = true; if( tiledImage.viewer ){ @@ -2007,6 +2042,7 @@ function drawTiles( tiledImage, lastDrawn ) { scale: sketchScale, translate: sketchTranslate, compositeOperation: tiledImage.compositeOperation, + imageSmoothingEnabled: tiledImage.imageSmoothingEnabled, bounds: bounds }); if (sketchScale) { diff --git a/src/viewer.js b/src/viewer.js index c9bc2c99..3f299af9 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1265,6 +1265,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, * @param {Number} [options.degrees=0] Initial rotation of the tiled image around * its top left corner in degrees. * @param {String} [options.compositeOperation] How the image is composited onto other images. + * @param {String} [options.imageSmoothingEnabled] If the image is drawn smoothly or not on the canvas. * @param {String} [options.crossOriginPolicy] The crossOriginPolicy for this specific image, * overriding viewer.crossOriginPolicy. * @param {Boolean} [options.ajaxWithCredentials] Whether to set withCredentials on tile AJAX @@ -1314,6 +1315,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, if (options.compositeOperation === undefined) { options.compositeOperation = this.compositeOperation; } + if (options.imageSmoothingEnabled === undefined) { + options.imageSmoothingEnabled = this.imageSmoothingEnabled; + } if (options.crossOriginPolicy === undefined) { options.crossOriginPolicy = options.tileSource.crossOriginPolicy !== undefined ? options.tileSource.crossOriginPolicy : this.crossOriginPolicy; } @@ -1427,6 +1431,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, preload: queueItem.options.preload, degrees: queueItem.options.degrees, compositeOperation: queueItem.options.compositeOperation, + imageSmoothingEnabled: queueItem.options.imageSmoothingEnabled, springStiffness: _this.springStiffness, animationTime: _this.animationTime, minZoomImageRatio: _this.minZoomImageRatio,