Add possibility to draw gradients and images

This commit is contained in:
Philip Giuliani 2015-04-09 14:25:07 +02:00
parent 4523454ff1
commit da819ac15a
4 changed files with 17 additions and 3 deletions

View File

@ -293,7 +293,13 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
return; return;
} }
this.context.fillStyle = fillStyle || "#FFFFFF"; if ( typeof fillStyle === "function" ) {
this.context.fillStyle = fillStyle(this.context);
}
else {
this.context.fillStyle = fillStyle;
}
this.context.fillRect(rect.x, rect.y, rect.width, rect.height); this.context.fillRect(rect.x, rect.y, rect.width, rect.height);
}, },

View File

@ -206,7 +206,7 @@
* @property {Number} [opacity=1] * @property {Number} [opacity=1]
* Opacity of the drawer (1=opaque, 0=transparent) * Opacity of the drawer (1=opaque, 0=transparent)
* *
* @property {String|Object} [placeholderFillStyle=null] * @property {String|Function} [placeholderFillStyle=null]
* Draws a colored rectangle behind the tile if it is not loaded yet. * Draws a colored rectangle behind the tile if it is not loaded yet.
* *
* @property {Number} [degrees=0] * @property {Number} [degrees=0]

View File

@ -65,7 +65,7 @@
* @param {Boolean} [options.alwaysBlend] - See {@link OpenSeadragon.Options}. * @param {Boolean} [options.alwaysBlend] - See {@link OpenSeadragon.Options}.
* @param {Number} [options.minPixelRatio] - See {@link OpenSeadragon.Options}. * @param {Number} [options.minPixelRatio] - See {@link OpenSeadragon.Options}.
* @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}. * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}.
* @param {String|Object} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}. * @param {String|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}.
* @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}. * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}.
*/ */
$.TiledImage = function( options ) { $.TiledImage = function( options ) {

View File

@ -67,6 +67,14 @@
Height: 3448 Height: 3448
} }
} }
},
placeholderFillStyle: "#FF0000",
placeholderFillStyle: function(context) {
var gradient = context.createLinearGradient(0,0,1000,0);
gradient.addColorStop(0,"black");
gradient.addColorStop(1,"red");
return gradient;
} }
}); });
_viewer.addHandler("open", function() { _viewer.addHandler("open", function() {