From 8c4fcc9ca9289b54f3dd77155ff0b3888a3847e7 Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Wed, 4 Nov 2015 17:04:50 +0200 Subject: [PATCH 1/5] tile edge smoothing at high zoom - #755 --- src/drawer.js | 24 ++++++++++++++---- src/openseadragon.js | 6 +++++ src/tile.js | 59 +++++++++++++++++++++++++++++++++++--------- src/tiledimage.js | 44 ++++++++++++++++++++++----------- src/viewer.js | 3 ++- 5 files changed, 104 insertions(+), 32 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 9b74b981..5666370d 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -290,8 +290,9 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ * drawingHandler({context, tile, rendered}) * @param {Boolean} useSketch - Whether to use the sketch canvas or not. * where rendered is the context with the pre-drawn image. + * @param {Float} scale - Apply a scale to tile position and size */ - drawTile: function( tile, drawingHandler, useSketch ) { + drawTile: function( tile, drawingHandler, useSketch, scale ) { $.console.assert(tile, '[Drawer.drawTile] tile is required'); $.console.assert(drawingHandler, '[Drawer.drawTile] drawingHandler is required'); @@ -301,10 +302,10 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ // specifically, don't save,rotate,restore every time we draw a tile if( this.viewport.degrees !== 0 ) { this._offsetForRotation( tile, this.viewport.degrees, useSketch ); - tile.drawCanvas( context, drawingHandler ); + tile.drawCanvas( context, drawingHandler, scale ); this._restoreRotationChanges( tile, useSketch ); } else { - tile.drawCanvas( context, drawingHandler ); + tile.drawCanvas( context, drawingHandler, scale ); } } else { tile.drawHTML( this.canvas ); @@ -371,16 +372,29 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ /** * Blends the sketch canvas in the main canvas. * @param {Float} opacity The opacity of the blending. + * @param {Float} sketchScale The scale at which tiles were drawn on the sketch. Default is 1. + * Use sketchScale to draw at a lower scale and then enlarge onto the main canvas. * @returns {undefined} */ - blendSketch: function(opacity) { + blendSketch: function(opacity, sketchScale) { if (!this.useCanvas || !this.sketchCanvas) { return; } + sketchScale = sketchScale || 1; this.context.save(); this.context.globalAlpha = opacity; - this.context.drawImage(this.sketchCanvas, 0, 0); + this.context.drawImage( + this.sketchCanvas, + 0, + 0, + this.sketchCanvas.width * sketchScale, + this.sketchCanvas.height * sketchScale, + 0, + 0, + this.canvas.width, + this.canvas.height + ); this.context.restore(); }, diff --git a/src/openseadragon.js b/src/openseadragon.js index 6b36327b..df4dd55f 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -249,6 +249,11 @@ * image though it is less effective visually if the HTML5 Canvas is not * availble on the viewing device. * + * @property {Number} [smoothTileEdgesMinZoom=1.1] + * A zoom percentage ( expressed as a number between 0 and 1 ) of the highest + * resolution level. When zoomed in beyond this value alternative compositing will + * be used to smooth out the edges between tiles. This WILL have a performance impact. + * * @property {Boolean} [autoResize=true] * Set to false to prevent polling for viewer size changes. Useful for providing custom resize behavior. * @@ -1000,6 +1005,7 @@ if (typeof define === 'function' && define.amd) { immediateRender: false, minZoomImageRatio: 0.9, //-> closer to 0 allows zoom out to infinity maxZoomPixelRatio: 1.1, //-> higher allows 'over zoom' into pixels + smoothTileEdgesMinZoom: 1.1, //-> higher than maxZoomPixelRatio disables it pixelsPerWheelLine: 40, autoResize: true, preserveImageSizeOnResize: false, // requires autoResize=true diff --git a/src/tile.js b/src/tile.js index ad018ba7..9a7fde55 100644 --- a/src/tile.js +++ b/src/tile.js @@ -240,11 +240,12 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{ * @param {Function} drawingHandler - Method for firing the drawing event. * drawingHandler({context, tile, rendered}) * where rendered is the context with the pre-drawn image. + * @param {Number} scale - Apply a scale to position and size */ - drawCanvas: function( context, drawingHandler ) { + drawCanvas: function( context, drawingHandler, scale ) { - var position = this.position, - size = this.size, + var position = this.position.times($.pixelDensityRatio), + size = this.size.times($.pixelDensityRatio), rendered; if (!this.cacheImageRecord) { @@ -277,10 +278,10 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{ //clearing only the inside of the rectangle occupied //by the png prevents edge flikering context.clearRect( - (position.x * $.pixelDensityRatio)+1, - (position.y * $.pixelDensityRatio)+1, - (size.x * $.pixelDensityRatio)-2, - (size.y * $.pixelDensityRatio)-2 + position.x + 1, + position.y + 1, + size.x - 2, + size.y - 2 ); } @@ -289,16 +290,52 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{ // changes as we are rendering the image drawingHandler({context: context, tile: this, rendered: rendered}); + if (typeof scale === 'number' && scale !== 1) { + // draw tile at a different scale + position = position.times(scale); + size = size.times(scale); + + if (scale < 1 && $.Browser.vendor == $.BROWSERS.FIREFOX) { + // In firefox edges are very visible because there seems to be + // empty space between tiles caused by float coordinates. + // Adding partial overlap fixes this. + // These will be covered by the top and left tiles. + context.drawImage( // duplicate first column to the left + rendered.canvas, + 0, + 0, + 1, + rendered.canvas.height, + Math.floor(position.x), + position.y, + 1, + size.y + ); + context.drawImage( // duplicate first row up + rendered.canvas, + 0, + 0, + rendered.canvas.width, + 1, + position.x, + Math.floor(position.y), + size.x, + 1 + ); + } + } + + // context.globalCompositeOperation = 'source-out'; context.drawImage( rendered.canvas, 0, 0, rendered.canvas.width, rendered.canvas.height, - position.x * $.pixelDensityRatio, - position.y * $.pixelDensityRatio, - size.x * $.pixelDensityRatio, - size.y * $.pixelDensityRatio + position.x, + position.y, + size.x, + size.y ); context.restore(); diff --git a/src/tiledimage.js b/src/tiledimage.js index 1731d472..815d052c 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -133,19 +133,20 @@ $.TiledImage = function( options ) { _hasOpaqueTile: false, // Do we have even one fully opaque tile? //configurable settings - springStiffness: $.DEFAULT_SETTINGS.springStiffness, - animationTime: $.DEFAULT_SETTINGS.animationTime, - minZoomImageRatio: $.DEFAULT_SETTINGS.minZoomImageRatio, - wrapHorizontal: $.DEFAULT_SETTINGS.wrapHorizontal, - wrapVertical: $.DEFAULT_SETTINGS.wrapVertical, - immediateRender: $.DEFAULT_SETTINGS.immediateRender, - blendTime: $.DEFAULT_SETTINGS.blendTime, - alwaysBlend: $.DEFAULT_SETTINGS.alwaysBlend, - minPixelRatio: $.DEFAULT_SETTINGS.minPixelRatio, - debugMode: $.DEFAULT_SETTINGS.debugMode, - crossOriginPolicy: $.DEFAULT_SETTINGS.crossOriginPolicy, - placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle, - opacity: $.DEFAULT_SETTINGS.opacity + springStiffness: $.DEFAULT_SETTINGS.springStiffness, + animationTime: $.DEFAULT_SETTINGS.animationTime, + minZoomImageRatio: $.DEFAULT_SETTINGS.minZoomImageRatio, + wrapHorizontal: $.DEFAULT_SETTINGS.wrapHorizontal, + wrapVertical: $.DEFAULT_SETTINGS.wrapVertical, + immediateRender: $.DEFAULT_SETTINGS.immediateRender, + blendTime: $.DEFAULT_SETTINGS.blendTime, + alwaysBlend: $.DEFAULT_SETTINGS.alwaysBlend, + minPixelRatio: $.DEFAULT_SETTINGS.minPixelRatio, + smoothTileEdgesMinZoom: $.DEFAULT_SETTINGS.smoothTileEdgesMinZoom, + debugMode: $.DEFAULT_SETTINGS.debugMode, + crossOriginPolicy: $.DEFAULT_SETTINGS.crossOriginPolicy, + placeholderFillStyle: $.DEFAULT_SETTINGS.placeholderFillStyle, + opacity: $.DEFAULT_SETTINGS.opacity }, options ); @@ -1302,6 +1303,19 @@ function drawTiles( tiledImage, lastDrawn ) { return; } var useSketch = tiledImage.opacity < 1; + var sketchScale = 1; + + var zoom = tiledImage.viewport.getZoom(); + var imageZoom = tiledImage.viewportToImageZoom(zoom); + if ( imageZoom > tiledImage.smoothTileEdgesMinZoom ) { + // When zoomed in a lot (>100%) the tile edges are visible. + // So we have to composite them at ~100% and scale them up together. + useSketch = true; + // Compositing at 100% is not precise and causes weird twithing. + // So we composite at 101% zoom + sketchScale = 1.01 / imageZoom; + } + if ( useSketch ) { tiledImage._drawer._clear( true ); } @@ -1333,7 +1347,7 @@ function drawTiles( tiledImage, lastDrawn ) { for ( i = lastDrawn.length - 1; i >= 0; i-- ) { tile = lastDrawn[ i ]; - tiledImage._drawer.drawTile( tile, tiledImage._drawingHandler, useSketch ); + tiledImage._drawer.drawTile( tile, tiledImage._drawingHandler, useSketch, sketchScale ); tile.beingDrawn = true; if( tiledImage.viewer ){ @@ -1360,7 +1374,7 @@ function drawTiles( tiledImage, lastDrawn ) { } if ( useSketch ) { - tiledImage._drawer.blendSketch( tiledImage.opacity ); + tiledImage._drawer.blendSketch( tiledImage.opacity, sketchScale ); } drawDebugInfo( tiledImage, lastDrawn ); } diff --git a/src/viewer.js b/src/viewer.js index c66556f1..0851f0e6 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -604,7 +604,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, var originalSuccess = options.success; options.success = function(event) { successes++; - + // TODO: now that options has other things besides tileSource, the overlays // should probably be at the options level, not the tileSource level. if (options.tileSource.overlays) { @@ -1342,6 +1342,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, blendTime: _this.blendTime, alwaysBlend: _this.alwaysBlend, minPixelRatio: _this.minPixelRatio, + smoothTileEdgesMinZoom: _this.smoothTileEdgesMinZoom, crossOriginPolicy: _this.crossOriginPolicy, debugMode: _this.debugMode }); From 515c15bf9851061112400b7c159005faec8e21bd Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Thu, 5 Nov 2015 16:19:56 +0200 Subject: [PATCH 2/5] various fixes for edge smoothing - #755 --- src/drawer.js | 30 ++++++++++------- src/openseadragon.js | 6 ++-- src/tile.js | 75 +++++++++++++++++++++++++------------------ src/tiledimage.js | 19 +++++------ test/modules/basic.js | 1 + 5 files changed, 76 insertions(+), 55 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 5666370d..a28606b1 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -290,22 +290,24 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ * drawingHandler({context, tile, rendered}) * @param {Boolean} useSketch - Whether to use the sketch canvas or not. * where rendered is the context with the pre-drawn image. - * @param {Float} scale - Apply a scale to tile position and size + * @param {Float} scale - Apply a scale to tile position and size. Defaults to 1. + * @param {OpenSeadragon.Point} translate Optional. A translation vector to offset tile position */ - drawTile: function( tile, drawingHandler, useSketch, scale ) { + drawTile: function( tile, drawingHandler, useSketch, scale, translate ) { $.console.assert(tile, '[Drawer.drawTile] tile is required'); $.console.assert(drawingHandler, '[Drawer.drawTile] drawingHandler is required'); if ( this.useCanvas ) { var context = this._getContext( useSketch ); + scale = scale || 1; // TODO do this in a more performant way // specifically, don't save,rotate,restore every time we draw a tile if( this.viewport.degrees !== 0 ) { this._offsetForRotation( tile, this.viewport.degrees, useSketch ); - tile.drawCanvas( context, drawingHandler, scale ); + tile.drawCanvas( context, drawingHandler, scale, translate ); this._restoreRotationChanges( tile, useSketch ); } else { - tile.drawCanvas( context, drawingHandler, scale ); + tile.drawCanvas( context, drawingHandler, scale, translate ); } } else { tile.drawHTML( this.canvas ); @@ -372,24 +374,28 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ /** * Blends the sketch canvas in the main canvas. * @param {Float} opacity The opacity of the blending. - * @param {Float} sketchScale The scale at which tiles were drawn on the sketch. Default is 1. - * Use sketchScale to draw at a lower scale and then enlarge onto the main canvas. + * @param {Float} scale 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 * @returns {undefined} */ - blendSketch: function(opacity, sketchScale) { + blendSketch: function(opacity, scale, translate) { if (!this.useCanvas || !this.sketchCanvas) { return; } - sketchScale = sketchScale || 1; + scale = scale || 1; + var position = translate instanceof $.Point ? + translate : + new $.Point(0, 0); this.context.save(); this.context.globalAlpha = opacity; this.context.drawImage( this.sketchCanvas, - 0, - 0, - this.sketchCanvas.width * sketchScale, - this.sketchCanvas.height * sketchScale, + position.x, + position.y, + this.sketchCanvas.width * scale, + this.sketchCanvas.height * scale, 0, 0, this.canvas.width, diff --git a/src/openseadragon.js b/src/openseadragon.js index df4dd55f..b3b1bd6e 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -250,9 +250,9 @@ * availble on the viewing device. * * @property {Number} [smoothTileEdgesMinZoom=1.1] - * A zoom percentage ( expressed as a number between 0 and 1 ) of the highest - * resolution level. When zoomed in beyond this value alternative compositing will - * be used to smooth out the edges between tiles. This WILL have a performance impact. + * A zoom percentage ( where 1 is 100% ) of the highest resolution level. + * When zoomed in beyond this value alternative compositing will be used to + * smooth out the edges between tiles. This will have a performance impact. * * @property {Boolean} [autoResize=true] * Set to false to prevent polling for viewer size changes. Useful for providing custom resize behavior. diff --git a/src/tile.js b/src/tile.js index 9a7fde55..e5d5be50 100644 --- a/src/tile.js +++ b/src/tile.js @@ -241,8 +241,9 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{ * drawingHandler({context, tile, rendered}) * where rendered is the context with the pre-drawn image. * @param {Number} scale - Apply a scale to position and size + * @param {OpenSeadragon.Point} translate - A translation vector */ - drawCanvas: function( context, drawingHandler, scale ) { + drawCanvas: function( context, drawingHandler, scale, translate ) { var position = this.position.times($.pixelDensityRatio), size = this.size.times($.pixelDensityRatio), @@ -294,38 +295,13 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{ // draw tile at a different scale position = position.times(scale); size = size.times(scale); - - if (scale < 1 && $.Browser.vendor == $.BROWSERS.FIREFOX) { - // In firefox edges are very visible because there seems to be - // empty space between tiles caused by float coordinates. - // Adding partial overlap fixes this. - // These will be covered by the top and left tiles. - context.drawImage( // duplicate first column to the left - rendered.canvas, - 0, - 0, - 1, - rendered.canvas.height, - Math.floor(position.x), - position.y, - 1, - size.y - ); - context.drawImage( // duplicate first row up - rendered.canvas, - 0, - 0, - rendered.canvas.width, - 1, - position.x, - Math.floor(position.y), - size.x, - 1 - ); - } } - // context.globalCompositeOperation = 'source-out'; + if (translate instanceof $.Point) { + // shift tile position slightly + position = position.plus(translate); + } + context.drawImage( rendered.canvas, 0, @@ -341,6 +317,43 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{ context.restore(); }, + /** + * Get the ratio between current and original size. + * @function + * @return {Float} + */ + getScaleForEdgeSmoothing: function() { + if (!this.cacheImageRecord) { + $.console.warn( + '[Tile.drawCanvas] attempting to get tile scale %s when tile\'s not cached', + this.toString()); + return 1; + } + + var rendered = this.cacheImageRecord.getRenderedContext(); + return rendered.canvas.width / this.size.times($.pixelDensityRatio).x; + }, + + /** + * Get a translation vector that when applied to the tile position produces integer coordinates. + * Needed to avoid swimming and twitching. + * @function + * @param {Number} scale - Scale to be applied to position. Defaults to 1. + * @return {OpenSeadragon.Point} + */ + getTranslationForEdgeSmoothing: function(scale) { + // The translation vector must have positive values, otherwise the image goes a bit off + // the sketch canvas to the top and left and we must use negative coordinates to repaint it + // to the main canvas. And FF does not like it. It crashes the viewer. + return new $.Point(1, 1).minus( + this.position + .times(scale || 1) + .apply(function(x) { + return x % 1; + }) + ); + }, + /** * Removes tile from its container. * @function diff --git a/src/tiledimage.js b/src/tiledimage.js index 815d052c..d349658e 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -64,6 +64,7 @@ * @param {Number} [options.blendTime] - See {@link OpenSeadragon.Options}. * @param {Boolean} [options.alwaysBlend] - See {@link OpenSeadragon.Options}. * @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 {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}. * @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}. @@ -1296,24 +1297,24 @@ function compareTiles( previousBest, tile ) { function drawTiles( tiledImage, lastDrawn ) { var i, - tile; + tile = lastDrawn[0]; if ( tiledImage.opacity <= 0 ) { drawDebugInfo( tiledImage, lastDrawn ); return; } var useSketch = tiledImage.opacity < 1; - var sketchScale = 1; + var sketchScale; + var sketchTranslate; - var zoom = tiledImage.viewport.getZoom(); + var zoom = tiledImage.viewport.getZoom(true); var imageZoom = tiledImage.viewportToImageZoom(zoom); - if ( imageZoom > tiledImage.smoothTileEdgesMinZoom ) { + if ( imageZoom > tiledImage.smoothTileEdgesMinZoom && tile) { // When zoomed in a lot (>100%) the tile edges are visible. // So we have to composite them at ~100% and scale them up together. useSketch = true; - // Compositing at 100% is not precise and causes weird twithing. - // So we composite at 101% zoom - sketchScale = 1.01 / imageZoom; + sketchScale = tile.getScaleForEdgeSmoothing(); + sketchTranslate = tile.getTranslationForEdgeSmoothing(sketchScale); } if ( useSketch ) { @@ -1347,7 +1348,7 @@ function drawTiles( tiledImage, lastDrawn ) { for ( i = lastDrawn.length - 1; i >= 0; i-- ) { tile = lastDrawn[ i ]; - tiledImage._drawer.drawTile( tile, tiledImage._drawingHandler, useSketch, sketchScale ); + tiledImage._drawer.drawTile( tile, tiledImage._drawingHandler, useSketch, sketchScale, sketchTranslate ); tile.beingDrawn = true; if( tiledImage.viewer ){ @@ -1374,7 +1375,7 @@ function drawTiles( tiledImage, lastDrawn ) { } if ( useSketch ) { - tiledImage._drawer.blendSketch( tiledImage.opacity, sketchScale ); + tiledImage._drawer.blendSketch( tiledImage.opacity, sketchScale, sketchTranslate ); } drawDebugInfo( tiledImage, lastDrawn ); } diff --git a/test/modules/basic.js b/test/modules/basic.js index 7f095777..eae33474 100644 --- a/test/modules/basic.js +++ b/test/modules/basic.js @@ -334,6 +334,7 @@ asyncTest( 'CrossOriginPolicyMissing', function () { viewer.crossOriginPolicy = false; + viewer.smoothTileEdgesMinZoom = Infinity; viewer.open( { type: 'legacy-image-pyramid', levels: [ { From 7eda39c9a94b890cabcc06d01443bf69d31db127 Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Thu, 5 Nov 2015 16:31:13 +0200 Subject: [PATCH 3/5] fixed edge smoothing to work with clipping and placeholderFillRect - #755 --- src/rectangle.js | 15 +++++++++++++++ src/tiledimage.js | 12 ++++++++++++ 2 files changed, 27 insertions(+) diff --git a/src/rectangle.js b/src/rectangle.js index 5d3495af..abf1c947 100644 --- a/src/rectangle.js +++ b/src/rectangle.js @@ -201,6 +201,21 @@ $.Rect.prototype = /** @lends OpenSeadragon.Rect.prototype */{ ); }, + /** + * Translate/move this Rect by a vector and return new Rect. + * @function + * @param {OpenSeadragon.Point} delta The translation vector. + * @returns {OpenSeadragon.Rect} A new rect with altered position + */ + translate: function( delta ) { + return new OpenSeadragon.Rect( + this.x + delta.x, + this.y + delta.y, + this.width, + this.height + ); + }, + /** * Returns the smallest rectangle that will contain this and the given rectangle. * @param {OpenSeadragon.Rect} rect diff --git a/src/tiledimage.js b/src/tiledimage.js index d349658e..f2059eba 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1327,6 +1327,12 @@ function drawTiles( tiledImage, lastDrawn ) { var box = tiledImage.imageToViewportRectangle(tiledImage._clip, true); var clipRect = tiledImage._drawer.viewportToDrawerRectangle(box); + if (sketchScale) { + clipRect = clipRect.times(sketchScale); + } + if (sketchTranslate) { + clipRect = clipRect.translate(sketchTranslate); + } tiledImage._drawer.setClip(clipRect, useSketch); usedClip = true; @@ -1334,6 +1340,12 @@ function drawTiles( tiledImage, lastDrawn ) { if ( tiledImage.placeholderFillStyle && tiledImage._hasOpaqueTile === false ) { var placeholderRect = tiledImage._drawer.viewportToDrawerRectangle(tiledImage.getBounds(true)); + if (sketchScale) { + placeholderRect = placeholderRect.times(sketchScale); + } + if (sketchTranslate) { + placeholderRect = placeholderRect.translate(sketchTranslate); + } var fillStyle = null; if ( typeof tiledImage.placeholderFillStyle === "function" ) { From 8bee1e7b8b16518b70bcfc368c6a4071c44840c3 Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Fri, 6 Nov 2015 08:55:30 +0200 Subject: [PATCH 4/5] doc tweak for edge smoothing changes - #755 --- src/drawer.js | 8 ++++---- src/tile.js | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index a28606b1..9e928bb6 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -290,8 +290,8 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ * drawingHandler({context, tile, rendered}) * @param {Boolean} useSketch - Whether to use the sketch canvas or not. * where rendered is the context with the pre-drawn image. - * @param {Float} scale - Apply a scale to tile position and size. Defaults to 1. - * @param {OpenSeadragon.Point} translate Optional. A translation vector to offset tile position + * @param {Float} [scale=1] - Apply a scale to tile position and size. Defaults to 1. + * @param {OpenSeadragon.Point} [translate] A translation vector to offset tile position */ drawTile: function( tile, drawingHandler, useSketch, scale, translate ) { $.console.assert(tile, '[Drawer.drawTile] tile is required'); @@ -374,9 +374,9 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{ /** * Blends the sketch canvas in the main canvas. * @param {Float} opacity The opacity of the blending. - * @param {Float} scale The scale at which tiles were drawn on the sketch. Default is 1. + * @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 OpenSeadragon.Point} [translate] A translation vector that was used to draw the tiles * @returns {undefined} */ blendSketch: function(opacity, scale, translate) { diff --git a/src/tile.js b/src/tile.js index e5d5be50..12a33a22 100644 --- a/src/tile.js +++ b/src/tile.js @@ -240,8 +240,8 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{ * @param {Function} drawingHandler - Method for firing the drawing event. * drawingHandler({context, tile, rendered}) * where rendered is the context with the pre-drawn image. - * @param {Number} scale - Apply a scale to position and size - * @param {OpenSeadragon.Point} translate - A translation vector + * @param {Number} [scale=1] - Apply a scale to position and size + * @param {OpenSeadragon.Point} [translate] - A translation vector */ drawCanvas: function( context, drawingHandler, scale, translate ) { @@ -338,7 +338,7 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{ * Get a translation vector that when applied to the tile position produces integer coordinates. * Needed to avoid swimming and twitching. * @function - * @param {Number} scale - Scale to be applied to position. Defaults to 1. + * @param {Number} [scale=1] - Scale to be applied to position. * @return {OpenSeadragon.Point} */ getTranslationForEdgeSmoothing: function(scale) { From 9922d2a4bb5761b62792f7024dafe8880fa403a0 Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Thu, 19 Nov 2015 10:06:43 +0200 Subject: [PATCH 5/5] edge smoothing fix for Mac --- src/tile.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/tile.js b/src/tile.js index 7f598ef2..a07bec74 100644 --- a/src/tile.js +++ b/src/tile.js @@ -356,6 +356,7 @@ $.Tile.prototype = /** @lends OpenSeadragon.Tile.prototype */{ // to the main canvas. And FF does not like it. It crashes the viewer. return new $.Point(1, 1).minus( this.position + .times($.pixelDensityRatio) .times(scale || 1) .apply(function(x) { return x % 1;