From 21d32b59f5f6e57cc6d5620f10c189bec334a5aa Mon Sep 17 00:00:00 2001 From: Philip Giuliani Date: Wed, 15 Apr 2015 13:32:41 +0200 Subject: [PATCH] Pass tiledImage and context to the placeholderFillStyle function --- src/drawer.js | 12 +++--------- src/openseadragon.js | 2 +- src/tiledimage.js | 11 ++++++++++- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index bfbc38c4..a38aed0a 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -310,16 +310,10 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ return; } - - this.saveContext(); - if ( typeof fillStyle === "function" ) { - this.context.fillStyle = fillStyle(this.context); - } - else { - this.context.fillStyle = fillStyle; - } + this.context.save(); + this.context.fillStyle = fillStyle; this.context.fillRect(rect.x, rect.y, rect.width, rect.height); - this.restoreContext(); + this.context.restore(); }, // private diff --git a/src/openseadragon.js b/src/openseadragon.js index a73295a8..3e3cffbd 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -209,7 +209,7 @@ * @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". - * When passing a function the canvas context is available as argument which is useful when you draw a gradient or pattern. + * When passing a function the tiledImage and canvas context are available as argument which is useful when you draw a gradient or pattern. * * @property {Number} [degrees=0] * Initial rotation. diff --git a/src/tiledimage.js b/src/tiledimage.js index 94c87cb1..88f7857c 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1172,7 +1172,16 @@ function drawTiles( tiledImage, lastDrawn ) { if ( tiledImage.placeholderFillStyle && lastDrawn.length === 0 ) { var placeholderRect = tiledImage._drawer.viewportToDrawerRectangle(tiledImage.getBounds(true)); - tiledImage._drawer.drawPlaceholder(placeholderRect, tiledImage.placeholderFillStyle); + + var fillStyle = null; + if ( typeof tiledImage.placeholderFillStyle === "function" ) { + fillStyle = tiledImage.placeholderFillStyle(tiledImage, tiledImage._drawer.context); + } + else { + fillStyle = tiledImage.placeholderFillStyle; + } + + tiledImage._drawer.drawPlaceholder(placeholderRect, fillStyle); } for ( i = lastDrawn.length - 1; i >= 0; i-- ) {