fix: fix smooth area chart's update animation does not work. Closed #235

.

src/geom/shape/area.js

@@ -26,12 +26,18 @@ function drawRectShape(topPoints, bottomPoints, container, style, isSmooth) {
   if (isSmooth) {
     shape = container.addShape('Custom', {
       className: 'area',
-      attrs: style,
+      attrs: Util.mix({
+        points
+      }, style),
       createPath(context) {
         const constaint = [ // 范围
           [ 0, 0 ],
           [ 1, 1 ]
         ];
+        const points = this._attrs.attrs.points;
+        const pointsLen = points.length;
+        const topPoints = points.slice(0, pointsLen / 2);
+        const bottomPoints = points.slice(pointsLen / 2, pointsLen);
         const topSps = Smooth.smooth(topPoints, false, constaint);
         context.beginPath();
         context.moveTo(topPoints[0].x, topPoints[0].y);

test/bug/issue-180-spec.js

@@ -1,4 +1,4 @@
-// const expect = require('chai').expect;
+const expect = require('chai').expect;
 const F2 = require('../../src/core');
 require('../../src/geom/area');
 require('../../src/coord/polar');
@@ -35,10 +35,18 @@ describe('issue 180', () => {
       }
     });
 
-    chart.area().position('item*score').color('user')
+    const geom = chart.area().position('item*score').color('user')
       .shape('smooth');
     chart.render();
 
     // TODO: 这里需要进行图像测试
+    const geomContainer = geom.get('container');
+    const areaShapeA = geomContainer.get('children')[0];
+    const areaShapeB = geomContainer.get('children')[1];
+    expect(areaShapeA.attr('points')).to.be.an.instanceof(Array);
+    expect(areaShapeA.attr('points').length).to.equal(10);
+
+    expect(areaShapeB.attr('points')).to.be.an.instanceof(Array);
+    expect(areaShapeB.attr('points').length).to.equal(10);
   });
 });

test/bug/issue-235-spec.js

@@ -0,0 +1,37 @@
+const expect = require('chai').expect;
+const F2 = require('../../src/core');
+require('../../src/geom/area');
+const Animation = require('../../src/animation/detail');
+
+const canvas = document.createElement('canvas');
+canvas.width = 360;
+canvas.height = 360;
+canvas.id = 'issue235';
+document.body.appendChild(canvas);
+
+describe('issue 235', () => {
+  it('Smooth area', () => {
+    const data = [
+      { day: '周一', value: 300 },
+      { day: '周二', value: 400 },
+      { day: '周三', value: 350 },
+      { day: '周四', value: 500 },
+      { day: '周五', value: 490 },
+      { day: '周六', value: 600 },
+      { day: '周日', value: 900 }
+    ];
+    const chart = new F2.Chart({
+      id: 'issue235',
+      plugins: Animation,
+      pixelRatio: window.devicePixelRatio
+    });
+    chart.source(data);
+    const geom = chart.area().position('day*value').shape('smooth');
+    chart.render();
+
+    const geomContainer = geom.get('container');
+    const areaShape = geomContainer.get('children')[0];
+    expect(areaShape.attr('points')).to.be.an.instanceof(Array);
+    expect(areaShape.attr('points').length).to.equal(14);
+  });
+});