feat: add chart.changeSize(width, height) method.

antvis · Mar 8, 2018 · 58c605f · 58c605f
1 parent 8046d43
commit 58c605f
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 27 deletions.
diff --git a/src/chart/chart.js b/src/chart/chart.js
@@ -578,6 +578,26 @@ class Chart extends Base {
     this.repaint();
   }
 
+  changeSize(width, height) {
+    if (width) {
+      this.set('width', width);
+    } else {
+      width = this.get('width');
+    }
+
+    if (height) {
+      this.set('height', height);
+    } else {
+      height = this.get('height');
+    }
+
+    const canvas = this.get('canvas');
+    canvas.changeSize(width, height);
+    this._initLayout();
+    this.repaint();
+    return this;
+  }
+
   destroy() {
     this.clear();
     const canvas = this.get('canvas');

diff --git a/src/graphic/canvas.js b/src/graphic/canvas.js
@@ -61,29 +61,39 @@ class Canvas {
     let width = self.get('width');
     if (!width) {
       width = DOMUtil.getWidth(canvas);
-      self.set('width', width);
     }
 
     let height = self.get('height');
     if (!height) {
       height = DOMUtil.getHeight(canvas);
-      self.set('height', height);
     }
 
-    const ratio = self.get('pixelRatio');
-    // if (ratio) {
-    canvas.width = width * ratio;
-    canvas.height = height * ratio;
-    canvas.style.height = height + 'px';
-    canvas.style.width = width + 'px';
-    if (ratio !== 1) {
-      const ctx = canvas.getContext('2d');
-      ctx.scale(ratio, ratio);
-    }
-    // }
     self.set('canvas', this);
     self.set('el', canvas);
     self.set('context', context || canvas.getContext('2d'));
+    self.changeSize(width, height);
+  }
+
+  /**
+   * 改变 canvas 的宽高
+   * @param  {Number} width  宽度
+   * @param  {Number} height 高度
+   */
+  changeSize(width, height) {
+    const pixelRatio = this.get('pixelRatio');
+    const canvasDOM = this.get('el');
+    canvasDOM.style.width = width + 'px';
+    canvasDOM.style.height = height + 'px';
+    canvasDOM.width = width * pixelRatio;
+    canvasDOM.height = height * pixelRatio;
+
+    if (pixelRatio !== 1) {
+      const ctx = this.get('context');
+      ctx.scale(pixelRatio, pixelRatio);
+    }
+
+    this.set('width', width);
+    this.set('height', height);
   }
 
   /**
@@ -106,20 +116,6 @@ class Canvas {
     return height * pixelRatio;
   }
 
-  /**
-   * 改变 canvas 的宽高
-   * @param  {Number} width  宽度
-   * @param  {Number} height 高度
-   */
-  changeSize(width, height) {
-    const pixelRatio = this.get('pixelRatio');
-    const canvasDOM = this.get('el');
-    canvasDOM.style.width = width + 'px';
-    canvasDOM.style.height = height + 'px';
-    canvasDOM.setAttribute('width', width * pixelRatio);
-    canvasDOM.setAttribute('height', height * pixelRatio);
-  }
-
   /**
    * 将窗口坐标转变成 canvas 坐标
    * @param  {Number} clientX 窗口x坐标