From 578ff36a065264246e8f29be963b238ed05209e8 Mon Sep 17 00:00:00 2001 From: Yochay Doutsh Date: Wed, 6 Feb 2019 16:04:33 +0200 Subject: [PATCH 1/4] WIP: _calculateCanvasSize outputs are floored, but imageSmoothingEnabled is still initalized on resize --- src/drawer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 614e6cbe..5a70bb1e 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -686,8 +686,9 @@ $.Drawer.prototype = { var pixelDensityRatio = $.pixelDensityRatio; var viewportSize = this.viewport.getContainerSize(); return { - x: viewportSize.x * pixelDensityRatio, - y: viewportSize.y * pixelDensityRatio + // canvas width and height are integers + x: Math.floor(viewportSize.x * pixelDensityRatio), + y: Math.floor(viewportSize.y * pixelDensityRatio) }; }, From 1e538e665d55bcada2ffae744e7b8fc33162bb5b Mon Sep 17 00:00:00 2001 From: Yochay Doutsh Date: Wed, 6 Feb 2019 17:47:07 +0200 Subject: [PATCH 2/4] imageSmoothingEnabled is being set to correct value after resize --- src/drawer.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/drawer.js b/src/drawer.js index 5a70bb1e..66bd3a26 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -247,6 +247,7 @@ $.Drawer.prototype = { var viewportSize = this._calculateCanvasSize(); if( this.canvas.width != viewportSize.x || this.canvas.height != viewportSize.y ) { + var imageSmoothingEnabled = this.canvas.getContext('2d').imageSmoothingEnabled; this.canvas.width = viewportSize.x; this.canvas.height = viewportSize.y; if ( this.sketchCanvas !== null ) { @@ -254,6 +255,7 @@ $.Drawer.prototype = { this.sketchCanvas.width = sketchCanvasSize.x; this.sketchCanvas.height = sketchCanvasSize.y; } + this.setImageSmoothingEnabled(imageSmoothingEnabled); } this._clear(); } From ef068e9229e77bc4eb525b84ac91aedbace73439 Mon Sep 17 00:00:00 2001 From: Yochay Doutsh Date: Thu, 7 Feb 2019 11:40:34 +0200 Subject: [PATCH 3/4] split setImageSmoothingEnabled into private and public parts, change floor to round --- src/drawer.js | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index 66bd3a26..dbaed1cd 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -247,7 +247,6 @@ $.Drawer.prototype = { var viewportSize = this._calculateCanvasSize(); if( this.canvas.width != viewportSize.x || this.canvas.height != viewportSize.y ) { - var imageSmoothingEnabled = this.canvas.getContext('2d').imageSmoothingEnabled; this.canvas.width = viewportSize.x; this.canvas.height = viewportSize.y; if ( this.sketchCanvas !== null ) { @@ -255,7 +254,7 @@ $.Drawer.prototype = { this.sketchCanvas.width = sketchCanvasSize.x; this.sketchCanvas.height = sketchCanvasSize.y; } - this.setImageSmoothingEnabled(imageSmoothingEnabled); + this._setImageSmoothingEnabled(); } this._clear(); } @@ -611,6 +610,9 @@ $.Drawer.prototype = { }, + // private + _imageSmoothingEnabled: true, + /** * Turns image smoothing on or off for this viewer. Note: Ignored in some (especially older) browsers that do not support this property. * @@ -621,16 +623,21 @@ $.Drawer.prototype = { */ setImageSmoothingEnabled: function(imageSmoothingEnabled){ if ( this.useCanvas ) { - var context = this.context; - context.mozImageSmoothingEnabled = imageSmoothingEnabled; - context.webkitImageSmoothingEnabled = imageSmoothingEnabled; - context.msImageSmoothingEnabled = imageSmoothingEnabled; - context.imageSmoothingEnabled = imageSmoothingEnabled; - + this._imageSmoothingEnabled = imageSmoothingEnabled; + this._setImageSmoothingEnabled(); this.viewer.forceRedraw(); } }, + // private + _setImageSmoothingEnabled: function(){ + var context = this.context; + context.mozImageSmoothingEnabled = this._imageSmoothingEnabled; + context.webkitImageSmoothingEnabled = this._imageSmoothingEnabled; + context.msImageSmoothingEnabled = this._imageSmoothingEnabled; + context.imageSmoothingEnabled = this._imageSmoothingEnabled; + }, + /** * Get the canvas size * @param {Boolean} sketch If set to true return the size of the sketch canvas @@ -689,8 +696,8 @@ $.Drawer.prototype = { var viewportSize = this.viewport.getContainerSize(); return { // canvas width and height are integers - x: Math.floor(viewportSize.x * pixelDensityRatio), - y: Math.floor(viewportSize.y * pixelDensityRatio) + x: Math.round(viewportSize.x * pixelDensityRatio), + y: Math.round(viewportSize.y * pixelDensityRatio) }; }, From 712e3d8dd17f1e3c7a5da0495f0963fd834fd8bd Mon Sep 17 00:00:00 2001 From: Yochay Doutsh Date: Sun, 10 Feb 2019 14:57:35 +0200 Subject: [PATCH 4/4] Moved property from prototype to constructor and renamed private function --- src/drawer.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/drawer.js b/src/drawer.js index dbaed1cd..3534577e 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -130,6 +130,10 @@ $.Drawer = function( options ) { // explicit left-align this.container.style.textAlign = "left"; this.container.appendChild( this.canvas ); + + // Image smoothing for canvas rendering (only if canvas is used). + // Canvas default is "true", so this will only be changed if user specified "false". + this._imageSmoothingEnabled = true; }; /** @lends OpenSeadragon.Drawer.prototype */ @@ -254,7 +258,7 @@ $.Drawer.prototype = { this.sketchCanvas.width = sketchCanvasSize.x; this.sketchCanvas.height = sketchCanvasSize.y; } - this._setImageSmoothingEnabled(); + this._updateImageSmoothingEnabled(); } this._clear(); } @@ -609,10 +613,6 @@ $.Drawer.prototype = { } }, - - // private - _imageSmoothingEnabled: true, - /** * Turns image smoothing on or off for this viewer. Note: Ignored in some (especially older) browsers that do not support this property. * @@ -624,13 +624,13 @@ $.Drawer.prototype = { setImageSmoothingEnabled: function(imageSmoothingEnabled){ if ( this.useCanvas ) { this._imageSmoothingEnabled = imageSmoothingEnabled; - this._setImageSmoothingEnabled(); + this._updateImageSmoothingEnabled(); this.viewer.forceRedraw(); } }, // private - _setImageSmoothingEnabled: function(){ + _updateImageSmoothingEnabled: function(){ var context = this.context; context.mozImageSmoothingEnabled = this._imageSmoothingEnabled; context.webkitImageSmoothingEnabled = this._imageSmoothingEnabled;