mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-25 22:56:11 +03:00
Code Issues Projects Releases Wiki Activity

Add option to define the fillStyle of the placeholder

Browse Source
This commit is contained in:
Philip Giuliani 2015-04-09 13:44:55 +02:00
parent 50e46b104e
commit 4523454ff1
4 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/drawer.js
View File

@ -288,13 +288,13 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
}, },
// private // private
drawPlaceholder: function(rect) { drawPlaceholder: function(rect, fillStyle) {
if (!this.useCanvas) { if (!this.useCanvas) {
return; return;
} }
this.context.fillStyle = fillStyle || "#FFFFFF";
this.context.fillRect(rect.x, rect.y, rect.width, rect.height); this.context.fillRect(rect.x, rect.y, rect.width, rect.height);
this.context.fillStyle = "#000000";
}, },
// private // private

6
src/openseadragon.js
View File

@ -206,6 +206,9 @@
* @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]
* Draws a colored rectangle behind the tile if it is not loaded yet.
*
* @property {Number} [degrees=0] * @property {Number} [degrees=0]
* Initial rotation. * Initial rotation.
* *
@ -262,7 +265,7 @@
* Possible subproperties (Numbers, in screen coordinates): left, top, right, bottom. * Possible subproperties (Numbers, in screen coordinates): left, top, right, bottom.
* *
* @property {Number} [imageLoaderLimit=0] * @property {Number} [imageLoaderLimit=0]
* The maximum number of image requests to make concurrently. By default * The maximum number of image requests to make concurrently. By default
* it is set to 0 allowing the browser to make the maximum number of * it is set to 0 allowing the browser to make the maximum number of
* image requests in parallel as allowed by the browsers policy. * image requests in parallel as allowed by the browsers policy.
* *
@ -1017,6 +1020,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
// APPEARANCE // APPEARANCE
opacity: 1, opacity: 1,
placeholderFillStyle: null,
//REFERENCE STRIP SETTINGS //REFERENCE STRIP SETTINGS
showReferenceStrip: false, showReferenceStrip: false,

34
src/tiledimage.js
View File

@ -65,6 +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|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}. * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}.
*/ */
$.TiledImage = function( options ) { $.TiledImage = function( options ) {
@ -126,21 +127,22 @@ $.TiledImage = function( options ) {
coverage: {}, // A '3d' dictionary [level][x][y] --> Boolean. coverage: {}, // A '3d' dictionary [level][x][y] --> Boolean.
lastDrawn: [], // An unordered list of Tiles drawn last frame. lastDrawn: [], // An unordered list of Tiles drawn last frame.
lastResetTime: 0, // Last time for which the tiledImage was reset. lastResetTime: 0, // Last time for which the tiledImage was reset.
_midDraw: false, // Is the tiledImage currently updating the viewport? _midDraw: false, // Is the tiledImage currently updating the viewport?
_needsDraw: true, // Does the tiledImage need to update the viewport again? _needsDraw: true, // Does the tiledImage need to update the viewport again?
//configurable settings //configurable settings
springStiffness: $.DEFAULT_SETTINGS.springStiffness, springStiffness: $.DEFAULT_SETTINGS.springStiffness,
animationTime: $.DEFAULT_SETTINGS.animationTime, animationTime: $.DEFAULT_SETTINGS.animationTime,
minZoomImageRatio: $.DEFAULT_SETTINGS.minZoomImageRatio, minZoomImageRatio: $.DEFAULT_SETTINGS.minZoomImageRatio,
wrapHorizontal: $.DEFAULT_SETTINGS.wrapHorizontal, wrapHorizontal: $.DEFAULT_SETTINGS.wrapHorizontal,
wrapVertical: $.DEFAULT_SETTINGS.wrapVertical, wrapVertical: $.DEFAULT_SETTINGS.wrapVertical,
immediateRender: $.DEFAULT_SETTINGS.immediateRender, immediateRender: $.DEFAULT_SETTINGS.immediateRender,
blendTime: $.DEFAULT_SETTINGS.blendTime, blendTime: $.DEFAULT_SETTINGS.blendTime,
alwaysBlend: $.DEFAULT_SETTINGS.alwaysBlend, alwaysBlend: $.DEFAULT_SETTINGS.alwaysBlend,
minPixelRatio: $.DEFAULT_SETTINGS.minPixelRatio, minPixelRatio: $.DEFAULT_SETTINGS.minPixelRatio,
debugMode: $.DEFAULT_SETTINGS.debugMode, debugMode: $.DEFAULT_SETTINGS.debugMode,
crossOriginPolicy: $.DEFAULT_SETTINGS.crossOriginPolicy crossOriginPolicy: $.DEFAULT_SETTINGS.crossOriginPolicy,
placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle
}, options ); }, options );
@ -1148,7 +1150,7 @@ function compareTiles( previousBest, tile ) {
return previousBest; return previousBest;
} }
function drawTiles( tiledImage, lastDrawn ){ function drawTiles( tiledImage, lastDrawn ) {
var i, var i,
tile, tile,
tileKey, tileKey,
@ -1180,11 +1182,11 @@ function drawTiles( tiledImage, lastDrawn ){
needsRestore = true; needsRestore = true;
} }
if ( lastDrawn.length === 0 ) { if ( tiledImage.placeholderFillStyle && lastDrawn.length === 0 ) {
tiledImage._drawer.saveContext(); tiledImage._drawer.saveContext();
var placeholderRect = boxToDrawerRectangle( tiledImage.getBounds(true) ); var placeholderRect = boxToDrawerRectangle( tiledImage.getBounds(true) );
tiledImage._drawer.drawPlaceholder(placeholderRect); tiledImage._drawer.drawPlaceholder(placeholderRect, tiledImage.placeholderFillStyle);
needsRestore = true; needsRestore = true;
} }

3
src/viewer.js
View File

@ -1294,7 +1294,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
alwaysBlend: _this.alwaysBlend, alwaysBlend: _this.alwaysBlend,
minPixelRatio: _this.minPixelRatio, minPixelRatio: _this.minPixelRatio,
crossOriginPolicy: _this.crossOriginPolicy, crossOriginPolicy: _this.crossOriginPolicy,
debugMode: _this.debugMode debugMode: _this.debugMode,
placeholderFillStyle: _this.placeholderFillStyle
}); });
_this.world.addItem( tiledImage, { _this.world.addItem( tiledImage, {