fix imageSmoothingEnabled on resize. fix #884

konva.js

@@ -6062,7 +6062,7 @@
                   length +
                   ' layers. Recommended maximum number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree structure, you can use Konva.Group.');
           }
-          layer._setCanvasSize(this.width(), this.height());
+          layer.setSize({ width: this.width(), height: this.height() });
           // draw layer and append canvas to container
           layer.draw();
           if (Konva.isBrowser) {
@@ -6723,8 +6723,8 @@
           _this._waitingForDraw = false;
           _this.on('visibleChange', _this._checkVisibility);
           _this._checkVisibility();
-          _this.on('imageSmoothingEnabledChange', _this._checkSmooth);
+          _this.on('imageSmoothingEnabledChange', _this._setSmoothEnabled);
-          _this._checkSmooth();
+          _this._setSmoothEnabled();
           return _this;
       }
       // for nodejs?
@@ -6867,6 +6867,7 @@
       BaseLayer.prototype.setSize = function (_a) {
           var width = _a.width, height = _a.height;
           this.canvas.setSize(width, height);
+          this._setSmoothEnabled();
           return this;
       };
       BaseLayer.prototype._toKonvaCanvas = function (config) {
@@ -6886,7 +6887,7 @@
               this.canvas._canvas.style.display = 'none';
           }
       };
-      BaseLayer.prototype._checkSmooth = function () {
+      BaseLayer.prototype._setSmoothEnabled = function () {
           this.getContext()._context.imageSmoothingEnabled = this.imageSmoothingEnabled();
       };
       /**
@@ -8658,10 +8659,11 @@
           });
           return _this;
       }
-      Layer.prototype._setCanvasSize = function (width, height) {
+      Layer.prototype.setSize = function (_a) {
-          this.canvas.setSize(width, height);
+          var width = _a.width, height = _a.height;
+          _super.prototype.setSize.call(this, { width: width, height: height });
           this.hitCanvas.setSize(width, height);
-          this._checkSmooth();
+          return this;
       };
       Layer.prototype._validateAdd = function (child) {
           var type = child.getType();
@@ -8820,12 +8822,6 @@
               parent.content.appendChild(this.hitCanvas._canvas);
           }
       };
-      Layer.prototype.setSize = function (_a) {
-          var width = _a.width, height = _a.height;
-          _super.prototype.setSize.call(this, { width: width, height: height });
-          this.hitCanvas.setSize(width, height);
-          return this;
-      };
       return Layer;
   }(BaseLayer));
   Layer.prototype.nodeType = 'Layer';
@@ -8887,10 +8883,6 @@
               Util.throw('You may only add shapes to a fast layer.');
           }
       };
-      FastLayer.prototype._setCanvasSize = function (width, height) {
-          this.canvas.setSize(width, height);
-          this._checkSmooth();
-      };
       FastLayer.prototype.hitGraphEnabled = function () {
           return false;
       };

src/BaseLayer.ts

@@ -37,8 +37,8 @@ export abstract class BaseLayer extends Container<Group | Shape> {
     this.on('visibleChange', this._checkVisibility);
     this._checkVisibility();
 
-    this.on('imageSmoothingEnabledChange', this._checkSmooth);
+    this.on('imageSmoothingEnabledChange', this._setSmoothEnabled);
-    this._checkSmooth();
+    this._setSmoothEnabled();
   }
   // for nodejs?
   createPNGStream() {
@@ -193,6 +193,7 @@ export abstract class BaseLayer extends Container<Group | Shape> {
   }
   setSize({ width, height }) {
     this.canvas.setSize(width, height);
+    this._setSmoothEnabled();
     return this;
   }
   _toKonvaCanvas(config) {
@@ -214,7 +215,7 @@ export abstract class BaseLayer extends Container<Group | Shape> {
     }
   }
 
-  _checkSmooth() {
+  _setSmoothEnabled() {
     this.getContext()._context.imageSmoothingEnabled = this.imageSmoothingEnabled();
   }
   /**

src/FastLayer.ts

@@ -29,10 +29,6 @@ export class FastLayer extends BaseLayer {
       Util.throw('You may only add shapes to a fast layer.');
     }
   }
-  _setCanvasSize(width, height) {
-    this.canvas.setSize(width, height);
-    this._checkSmooth();
-  }
   hitGraphEnabled() {
     return false;
   }

src/Layer.ts

@@ -50,10 +50,10 @@ export class Layer extends BaseLayer {
     pixelRatio: 1
   });
 
-  _setCanvasSize(width, height) {
+  setSize({ width, height }) {
-    this.canvas.setSize(width, height);
+    super.setSize({ width, height });
     this.hitCanvas.setSize(width, height);
-    this._checkSmooth();
+    return this;
   }
   _validateAdd(child) {
     var type = child.getType();
@@ -227,11 +227,6 @@ export class Layer extends BaseLayer {
       parent.content.appendChild(this.hitCanvas._canvas);
     }
   }
-  setSize({ width, height }) {
-    super.setSize({ width, height });
-    this.hitCanvas.setSize(width, height);
-    return this;
-  }
 
   hitGraphEnabled: GetSet<boolean, this>;
 }

src/Stage.ts

@@ -376,7 +376,7 @@ export class Stage extends Container<BaseLayer> {
           ' layers. Recommended maximum number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree structure, you can use Konva.Group.'
       );
     }
-    layer._setCanvasSize(this.width(), this.height());
+    layer.setSize({ width: this.width(), height: this.height() });
 
     // draw layer and append canvas to container
     layer.draw();

test/unit/Layer-test.js

@@ -416,6 +416,11 @@ suite('Layer', function() {
 
       assert.equal(layer.getContext().imageSmoothingEnabled, true);
 
+      layer.imageSmoothingEnabled(false);
+      // change size
+      stage.width(stage.width() + 1);
+      assert.equal(layer.getContext().imageSmoothingEnabled, false);
+
       done();
     };
     imageObj.src = 'assets/darth-vader.jpg';