From ea833a780c579c95e22c76ec22ffdf47ad4a7ea1 Mon Sep 17 00:00:00 2001 From: Mei-Hui Su Date: Wed, 6 Jan 2016 07:58:36 -0800 Subject: [PATCH 1/9] Update to allow setting of globalCompositeOperation when html is used to process multiple tiledImages to blend is a specific way. (special handling, when compositeOperation is 'source-over' and opacity is 1, useSketch is false, otherwise useSketch is true ) Valid values are 'source-atop', 'source-in', 'source-out', 'destination-over', 'destination-atop', 'destination-in', 'destination-out', 'lighter', 'copy' or 'xor' http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp --- src/drawer.js | 3 ++- src/openseadragon.js | 6 ++++++ src/tile.js | 1 + src/tiledimage.js | 25 +++++++++++++++++++++---- src/viewer.js | 5 +++++ 5 files changed, 35 insertions(+), 5 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 9b74b981..919057d7 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -373,13 +373,14 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ * @param {Float} opacity The opacity of the blending. * @returns {undefined} */ - blendSketch: function(opacity) { + blendSketch: function(opacity, compositeOperation) { if (!this.useCanvas || !this.sketchCanvas) { return; } this.context.save(); this.context.globalAlpha = opacity; + this.context.globalCompositeOperation = compositeOperation; this.context.drawImage(this.sketchCanvas, 0, 0); this.context.restore(); }, diff --git a/src/openseadragon.js b/src/openseadragon.js index c0111b2b..16e0e86f 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -206,6 +206,11 @@ * @property {Number} [opacity=1] * Default opacity of the tiled images (1=opaque, 0=transparent) * + * @property {String} [compositeOperation='source-over'] + * Valid values are 'source-atop', 'source-in', 'source-out', + * 'destination-over', 'destination-atop', 'destination-in', + * 'destination-out', 'lighter', 'copy' or 'xor'.
+ * * @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". @@ -1044,6 +1049,7 @@ if (typeof define === 'function' && define.amd) { // APPEARANCE opacity: 1, + compositeOperation: 'source-over', placeholderFillStyle: null, //REFERENCE STRIP SETTINGS diff --git a/src/tile.js b/src/tile.js index ad018ba7..1adbad13 100644 --- a/src/tile.js +++ b/src/tile.js @@ -268,6 +268,7 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{ context.save(); context.globalAlpha = this.opacity; + context.globalCompositeOperation = this.compositeOperation; //if we are supposed to be rendering fully opaque rectangle, //ie its done fading or fading is turned off, and if we are drawing diff --git a/src/tiledimage.js b/src/tiledimage.js index 1731d472..e858cf56 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -65,6 +65,7 @@ * @param {Boolean} [options.alwaysBlend] - See {@link OpenSeadragon.Options}. * @param {Number} [options.minPixelRatio] - See {@link OpenSeadragon.Options}. * @param {Number} [options.opacity=1] - Opacity the tiled image should be drawn at. + * @param {String} [options.compositeOperation='source-over'] - How a tiled source image are drawn onto an existing image. * @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}. @@ -131,7 +132,6 @@ $.TiledImage = function( options ) { _midDraw: false, // Is the tiledImage currently updating the viewport? _needsDraw: true, // Does the tiledImage need to update the viewport again? _hasOpaqueTile: false, // Do we have even one fully opaque tile? - //configurable settings springStiffness: $.DEFAULT_SETTINGS.springStiffness, animationTime: $.DEFAULT_SETTINGS.animationTime, @@ -145,7 +145,8 @@ $.TiledImage = function( options ) { debugMode: $.DEFAULT_SETTINGS.debugMode, crossOriginPolicy: $.DEFAULT_SETTINGS.crossOriginPolicy, placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle, - opacity: $.DEFAULT_SETTINGS.opacity + opacity: $.DEFAULT_SETTINGS.opacity, + compositeOperation: $.DEFAULT_SETTINGS.compositeOperation }, options ); @@ -583,6 +584,21 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag this._needsDraw = true; }, + /** + * @returns {String} The TiledImage's current compositeOperation. + */ + getCompositeOperation: function() { + return this.compositeOperation; + }, + + /** + * @param {String} compositeOperation the tiled image should be drawn with this globalCompositeOperation. + */ + setCompositeOperation: function(compositeOperation) { + this.compositeOperation = compositeOperation; + this._needsDraw = true; + }, + // private _setScale: function(scale, immediately) { var sameTarget = (this._scaleSpring.target.value === scale); @@ -1301,7 +1317,8 @@ function drawTiles( tiledImage, lastDrawn ) { drawDebugInfo( tiledImage, lastDrawn ); return; } - var useSketch = tiledImage.opacity < 1; + var useSketch = (tiledImage.compositeOperation == 'source-over') ? (tiledImage.opacity < 1):true; + if ( useSketch ) { tiledImage._drawer._clear( true ); } @@ -1360,7 +1377,7 @@ function drawTiles( tiledImage, lastDrawn ) { } if ( useSketch ) { - tiledImage._drawer.blendSketch( tiledImage.opacity ); + tiledImage._drawer.blendSketch( tiledImage.opacity, tiledImage.compositeOperation ); } drawDebugInfo( tiledImage, lastDrawn ); } diff --git a/src/viewer.js b/src/viewer.js index 0890a55d..c916acd6 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1207,6 +1207,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, * (portions of the image outside of this area will not be visible). Only works on * browsers that support the HTML5 canvas. * @param {Number} [options.opacity] Opacity the tiled image should be drawn at by default. + * @param {String} [options.compositeOperation] How a tiled source image are drawn onto an existing image. * @param {Function} [options.success] A function that gets called when the image is * successfully added. It's passed the event object which contains a single property: * "item", the resulting TiledImage. @@ -1239,6 +1240,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, if (options.opacity === undefined) { options.opacity = this.opacity; } + if (options.compositeOperation === undefined) { + options.compositeOperation = this.compositeOperation; + } var myQueueItem = { options: options @@ -1335,6 +1339,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, clip: queueItem.options.clip, placeholderFillStyle: queueItem.options.placeholderFillStyle, opacity: queueItem.options.opacity, + compositeOperation: queueItem.options.compositeOperation, springStiffness: _this.springStiffness, animationTime: _this.animationTime, minZoomImageRatio: _this.minZoomImageRatio, From 087507c823c2ff587f94b15a23a4f1184e92a7d6 Mon Sep 17 00:00:00 2001 From: Mei-Hui Su Date: Thu, 7 Jan 2016 12:47:17 -0800 Subject: [PATCH 2/9] 1) update according to comments from openseadragon's --- src/openseadragon.js | 2 +- src/tile.js | 1 - src/tiledimage.js | 4 ++-- src/viewer.js | 2 +- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 16e0e86f..f3f14c79 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -209,7 +209,7 @@ * @property {String} [compositeOperation='source-over'] * Valid values are 'source-atop', 'source-in', 'source-out', * 'destination-over', 'destination-atop', 'destination-in', - * 'destination-out', 'lighter', 'copy' or 'xor'.
+ * 'destination-out', 'lighter', 'copy' or 'xor' * * @property {String|CanvasGradient|CanvasPattern|Function} [placeholderFillStyle=null] * Draws a colored rectangle behind the tile if it is not loaded yet. diff --git a/src/tile.js b/src/tile.js index 1adbad13..ad018ba7 100644 --- a/src/tile.js +++ b/src/tile.js @@ -268,7 +268,6 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{ context.save(); context.globalAlpha = this.opacity; - context.globalCompositeOperation = this.compositeOperation; //if we are supposed to be rendering fully opaque rectangle, //ie its done fading or fading is turned off, and if we are drawing diff --git a/src/tiledimage.js b/src/tiledimage.js index e858cf56..4bdeb634 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -65,7 +65,7 @@ * @param {Boolean} [options.alwaysBlend] - See {@link OpenSeadragon.Options}. * @param {Number} [options.minPixelRatio] - See {@link OpenSeadragon.Options}. * @param {Number} [options.opacity=1] - Opacity the tiled image should be drawn at. - * @param {String} [options.compositeOperation='source-over'] - How a tiled source image are drawn onto an existing image. + * @param {String} [options.compositeOperation='source-over'] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible values. * @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}. @@ -1317,7 +1317,7 @@ function drawTiles( tiledImage, lastDrawn ) { drawDebugInfo( tiledImage, lastDrawn ); return; } - var useSketch = (tiledImage.compositeOperation == 'source-over') ? (tiledImage.opacity < 1):true; + var useSketch = tiledImage.opacity < 1 || tiledImage.compositeOperation !== 'source-over'; if ( useSketch ) { tiledImage._drawer._clear( true ); diff --git a/src/viewer.js b/src/viewer.js index c916acd6..20748429 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1207,7 +1207,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, * (portions of the image outside of this area will not be visible). Only works on * browsers that support the HTML5 canvas. * @param {Number} [options.opacity] Opacity the tiled image should be drawn at by default. - * @param {String} [options.compositeOperation] How a tiled source image are drawn onto an existing image. + * @param {String} [options.compositeOperation] How the image is composited onto other images. * @param {Function} [options.success] A function that gets called when the image is * successfully added. It's passed the event object which contains a single property: * "item", the resulting TiledImage. From e89d1f4c976176b6976f524cab079320d4272d4f Mon Sep 17 00:00:00 2001 From: Mei-Hui Su Date: Thu, 14 Jan 2016 12:42:02 -0800 Subject: [PATCH 3/9] fix couple of typos --- src/drawer.js | 1 - src/tiledimage.js | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 633d6086..abb432f3 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -395,7 +395,6 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ this.canvas.width, this.canvas.height ); ->>>>>>> a0a44dbeb5e3030e0acecf108efc19dbd53aaec2 this.context.restore(); }, diff --git a/src/tiledimage.js b/src/tiledimage.js index 3e084ad1..7caa17c9 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -147,7 +147,7 @@ $.TiledImage = function( options ) { debugMode: $.DEFAULT_SETTINGS.debugMode, crossOriginPolicy: $.DEFAULT_SETTINGS.crossOriginPolicy, placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle, - opacity: $.DEFAULT_SETTINGS.opacity + opacity: $.DEFAULT_SETTINGS.opacity, compositeOperation: $.DEFAULT_SETTINGS.compositeOperation }, options ); @@ -1342,7 +1342,6 @@ function drawTiles( tiledImage, lastDrawn ) { sketchScale = tile.getScaleForEdgeSmoothing(); sketchTranslate = tile.getTranslationForEdgeSmoothing(sketchScale); } ->>>>>>> a0a44dbeb5e3030e0acecf108efc19dbd53aaec2 if ( useSketch ) { tiledImage._drawer._clear( true ); From efc9098ce4eb2f442b5405982a0c06f03e1d4202 Mon Sep 17 00:00:00 2001 From: Mei-Hui Su Date: Tue, 19 Jan 2016 11:49:04 -0800 Subject: [PATCH 4/9] Make setting of globalCompositeOperation optional in drawer.js --- src/drawer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/drawer.js b/src/drawer.js index abb432f3..d3867806 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -370,6 +370,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ * @param {Float} [scale=1] The scale at which tiles were drawn on the sketch. Default is 1. * Use scale to draw at a lower scale and then enlarge onto the main canvas. * @param OpenSeadragon.Point} [translate] A translation vector that was used to draw the tiles + * @param {String} [options.compositeOperation='source-over'] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible values. * @returns {undefined} */ blendSketch: function(opacity, scale, translate, compositeOperation) { @@ -383,7 +384,9 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ this.context.save(); this.context.globalAlpha = opacity; - this.context.globalCompositeOperation = compositeOperation; + if (compositeOperation !== undefined) { + this.context.globalCompositeOperation = compositeOperation; + } this.context.drawImage( this.sketchCanvas, position.x, From c214e2f0c4ad1b6ca6fb0beae6b45dae668476a8 Mon Sep 17 00:00:00 2001 From: Mei-Hui Su Date: Tue, 19 Jan 2016 14:17:52 -0800 Subject: [PATCH 5/9] change option compositeOperation default to null instead of 'source-over' --- src/drawer.js | 4 ++-- src/openseadragon.js | 6 +++--- src/tiledimage.js | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index d3867806..a9174d2c 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -369,8 +369,8 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ * @param {Float} opacity The opacity of the blending. * @param {Float} [scale=1] The scale at which tiles were drawn on the sketch. Default is 1. * Use scale to draw at a lower scale and then enlarge onto the main canvas. - * @param OpenSeadragon.Point} [translate] A translation vector that was used to draw the tiles - * @param {String} [options.compositeOperation='source-over'] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible values. + * @param {OpenSeadragon.Point} [translate] A translation vector that was used to draw the tiles + * @param {String} [compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible values. * @returns {undefined} */ blendSketch: function(opacity, scale, translate, compositeOperation) { diff --git a/src/openseadragon.js b/src/openseadragon.js index 16587057..a129f083 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -206,8 +206,8 @@ * @property {Number} [opacity=1] * Default opacity of the tiled images (1=opaque, 0=transparent) * - * @property {String} [compositeOperation='source-over'] - * Valid values are 'source-atop', 'source-in', 'source-out', + * @property {String} [compositeOperation=null] + * Valid values are 'source-over', 'source-atop', 'source-in', 'source-out', * 'destination-over', 'destination-atop', 'destination-in', * 'destination-out', 'lighter', 'copy' or 'xor' * @@ -1072,7 +1072,7 @@ if (typeof define === 'function' && define.amd) { // APPEARANCE opacity: 1, - compositeOperation: 'source-over', + compositeOperation: null, placeholderFillStyle: null, //REFERENCE STRIP SETTINGS diff --git a/src/tiledimage.js b/src/tiledimage.js index 7caa17c9..aa3b56be 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -66,7 +66,7 @@ * @param {Number} [options.minPixelRatio] - See {@link OpenSeadragon.Options}. * @param {Number} [options.smoothTileEdgesMinZoom] - See {@link OpenSeadragon.Options}. * @param {Number} [options.opacity=1] - Opacity the tiled image should be drawn at. - * @param {String} [options.compositeOperation='source-over'] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible values. + * @param {String} [options.compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible values. * @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}. From 41ee1e27fd6c6c220d6532c3b05318cad7763869 Mon Sep 17 00:00:00 2001 From: Mei-Hui Su Date: Tue, 19 Jan 2016 14:29:15 -0800 Subject: [PATCH 6/9] put back the 'options.' --- src/drawer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/drawer.js b/src/drawer.js index a9174d2c..4190bbea 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -370,7 +370,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ * @param {Float} [scale=1] The scale at which tiles were drawn on the sketch. Default is 1. * Use scale to draw at a lower scale and then enlarge onto the main canvas. * @param {OpenSeadragon.Point} [translate] A translation vector that was used to draw the tiles - * @param {String} [compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible values. + * @param {String} [options.compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible values. * @returns {undefined} */ blendSketch: function(opacity, scale, translate, compositeOperation) { From ac0438e07b390f06fe53b2375ba9ea461361b805 Mon Sep 17 00:00:00 2001 From: Mei-Hui Su Date: Tue, 19 Jan 2016 22:36:19 -0800 Subject: [PATCH 7/9] Fix the optional check to include null --- src/drawer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/drawer.js b/src/drawer.js index 4190bbea..7567e354 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -384,7 +384,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ this.context.save(); this.context.globalAlpha = opacity; - if (compositeOperation !== undefined) { + if (compositeOperation !== undefined && compositeOperation !== null) { this.context.globalCompositeOperation = compositeOperation; } this.context.drawImage( From 91ecd80a4f339f6716e3c8f4f14c094e703fdb35 Mon Sep 17 00:00:00 2001 From: Mei-Hui Su Date: Wed, 20 Jan 2016 09:14:10 -0800 Subject: [PATCH 8/9] Add check for null compositeOperation option when setting useSketch --- src/tiledimage.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index aa3b56be..f3400ab3 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1329,7 +1329,9 @@ function drawTiles( tiledImage, lastDrawn ) { drawDebugInfo( tiledImage, lastDrawn ); return; } - var useSketch = tiledImage.opacity < 1 || tiledImage.compositeOperation !== 'source-over'; + var useSketch = tiledImage.opacity < 1 || + (tiledImage.compositeOperation !== null && tiledImage.compositeOperation !== 'source-over'); + var sketchScale; var sketchTranslate; From 69cce5770cc91a7ac783a7c383c6b990202b6c42 Mon Sep 17 00:00:00 2001 From: Mei-Hui Su Date: Wed, 20 Jan 2016 09:48:15 -0800 Subject: [PATCH 9/9] simplify the checks on compositeOperation --- src/drawer.js | 2 +- src/tiledimage.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 7567e354..f4ed36a6 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -384,7 +384,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ this.context.save(); this.context.globalAlpha = opacity; - if (compositeOperation !== undefined && compositeOperation !== null) { + if (compositeOperation) { this.context.globalCompositeOperation = compositeOperation; } this.context.drawImage( diff --git a/src/tiledimage.js b/src/tiledimage.js index f3400ab3..bb432dd9 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1330,7 +1330,7 @@ function drawTiles( tiledImage, lastDrawn ) { return; } var useSketch = tiledImage.opacity < 1 || - (tiledImage.compositeOperation !== null && tiledImage.compositeOperation !== 'source-over'); + (tiledImage.compositeOperation && tiledImage.compositeOperation !== 'source-over'); var sketchScale; var sketchTranslate;