From be79249c9cf81f9f08e81b9c7a8be8c0fc91f77f Mon Sep 17 00:00:00 2001 From: Grant Echols Date: Thu, 27 Feb 2014 14:39:18 -0700 Subject: [PATCH] Added pre-draw event for tiles to allow applications to alter the image just prior to its rendering. This should enable invert, brightness, contrast, sharpen and other transformations to occur naturally through the 'tile-drawing' event listener. The listener is given the 'rendered' object which is the pre-drawn image on a canvas context object. By altering the 'rendered' object the listener can alter the display results. Since this event gets fired multiple times for the tile, it is wise for the handler to track what their desired modifications are and to tag the 'tile' element to keep track of the modifications already applied. --- src/drawer.js | 21 +++++++++++++++++++-- src/tile.js | 7 ++++++- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index a53d0d3b..3055feda 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -1228,6 +1228,23 @@ function drawTiles( drawer, lastDrawn ){ tileSource, collectionTileSource; + // We need a callback to give image manipulation a chance to happen + var drawingHandler = function(args) { + if (drawer.viewer) { + /** + * This event is fired just before the tile is drawn giving the application a chance to alter the image. + * + * @event tile-drawing + * @memberof OpenSeadragon.Viewer + * @type {object} + * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. + * @property {OpenSeadragon.Tile} tile + * @property {?Object} userData - 'context', 'tile' and 'rendered'. + */ + drawer.viewer.raiseEvent('tile-drawing', args); + } + }; + for ( i = lastDrawn.length - 1; i >= 0; i-- ) { tile = lastDrawn[ i ]; @@ -1299,10 +1316,10 @@ function drawTiles( drawer, lastDrawn ){ // specifically, don't save,rotate,restore every time we draw a tile if( drawer.viewport.degrees !== 0 ) { offsetForRotation( tile, drawer.canvas, drawer.context, drawer.viewport.degrees ); - tile.drawCanvas( drawer.context ); + tile.drawCanvas( drawer.context, drawingHandler ); restoreRotationChanges( tile, drawer.canvas, drawer.context ); } else { - tile.drawCanvas( drawer.context ); + tile.drawCanvas( drawer.context, drawingHandler ); } } else { tile.drawHTML( drawer.canvas ); diff --git a/src/tile.js b/src/tile.js index d818c010..9aa4bde4 100644 --- a/src/tile.js +++ b/src/tile.js @@ -231,8 +231,10 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{ * Renders the tile in a canvas-based context. * @function * @param {Canvas} context + * @param {Function} method for firing the drawing event. drawingHandler({context, tile, rendered}) + * where rendered is the context with the pre-drawn image. */ - drawCanvas: function( context ) { + drawCanvas: function( context, drawingHandler ) { var position = this.position, size = this.size, @@ -280,6 +282,9 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{ rendered = TILE_CACHE[ this.url ]; + // This gives the application a chance to make image manipulation changes as we are rendering the image + drawingHandler({context: context, tile: this, rendered: rendered}); + //rendered.save(); context.drawImage( rendered.canvas,