Only work with integers when panning to avoid getting a blurry image.

Also disable image-smoothing to avoid bugs seen on Android which were
also causing a blurry image while panning.
This commit is contained in:
samhed 2015-08-14 17:02:00 +02:00
parent bc4414f5b1
commit a825582196
1 changed files with 23 additions and 3 deletions

View File

@ -98,6 +98,8 @@ var Display;
// Public methods // Public methods
viewportChangePos: function (deltaX, deltaY) { viewportChangePos: function (deltaX, deltaY) {
var vp = this._viewportLoc; var vp = this._viewportLoc;
deltaX = Math.floor(deltaX);
deltaY = Math.floor(deltaY);
if (!this._viewport) { if (!this._viewport) {
deltaX = -vp.w; // clamped later of out of bounds deltaX = -vp.w; // clamped later of out of bounds
@ -170,16 +172,34 @@ var Display;
h = deltaY; h = deltaY;
} }
// Copy the valid part of the viewport to the shifted location
var saveStyle = this._drawCtx.fillStyle; var saveStyle = this._drawCtx.fillStyle;
var canvas = this._target; var canvas = this._target;
this._drawCtx.fillStyle = "rgb(255,255,255)"; this._drawCtx.fillStyle = "rgb(255,255,255)";
// Due to this bug among others [1] we need to disable the image-smoothing to
// avoid getting a blur effect when panning.
//
// 1. https://bugzilla.mozilla.org/show_bug.cgi?id=1194719
//
// We need to set these every time since all properties are reset
// when the the size is changed
if (this._drawCtx.mozImageSmoothingEnabled) {
this._drawCtx.mozImageSmoothingEnabled = false;
} else if (this._drawCtx.webkitImageSmoothingEnabled) {
this._drawCtx.webkitImageSmoothingEnabled = false;
} else if (this._drawCtx.msImageSmoothingEnabled) {
this._drawCtx.msImageSmoothingEnabled = false;
} else if (this._drawCtx.imageSmoothingEnabled) {
this._drawCtx.imageSmoothingEnabled = false;
}
// Copy the valid part of the viewport to the shifted location
this._drawCtx.drawImage(canvas, 0, 0, vp.w, vp.h, -deltaX, -deltaY, vp.w, vp.h);
if (deltaX !== 0) { if (deltaX !== 0) {
this._drawCtx.drawImage(canvas, 0, 0, vp.w, vp.h, -deltaX, 0, vp.w, vp.h);
this._drawCtx.fillRect(x1, 0, w, vp.h); this._drawCtx.fillRect(x1, 0, w, vp.h);
} }
if (deltaY !== 0) { if (deltaY !== 0) {
this._drawCtx.drawImage(canvas, 0, 0, vp.w, vp.h, 0, -deltaY, vp.w, vp.h);
this._drawCtx.fillRect(0, y1, vp.w, h); this._drawCtx.fillRect(0, y1, vp.w, h);
} }
this._drawCtx.fillStyle = saveStyle; this._drawCtx.fillStyle = saveStyle;