fix: fix radar chart drawing path error. Closed #180

src/geom/shape/area.js

@@ -20,64 +20,42 @@ function equalsCenter(points, center) {
   return eqls;
 }
 
-function drawCircleArea(topPoints, bottomPoints, container, style, isSmooth) {
-  const shape = container.addShape('Polyline', {
-    className: 'area',
-    attrs: Util.mix({
-      points: topPoints,
-      smooth: isSmooth
-    }, style)
-  });
-  if (bottomPoints.length) {
-    const bottomShape = container.addShape('Polyline', {
-      className: 'area',
-      attrs: Util.mix({
-        points: bottomPoints,
-        smooth: isSmooth
-      }, style)
-    });
-    return [ shape, bottomShape ];
-  }
-  return shape;
-}
-
 function drawRectShape(topPoints, bottomPoints, container, style, isSmooth) {
   let shape;
+  const points = topPoints.concat(bottomPoints);
   if (isSmooth) {
     shape = container.addShape('Custom', {
       className: 'area',
-      attrs: Util.mix({
-        points: topPoints.concat(bottomPoints)
-      }, style),
+      attrs: style,
       createPath(context) {
         const constaint = [ // 范围
           [ 0, 0 ],
           [ 1, 1 ]
         ];
-        const points = this._attrs.attrs.points;
-        const topSps = Smooth.smooth(points.slice(0, points.length / 2), false, constaint);
-        const bottomSps = Smooth.smooth(points.slice(points.length / 2, points.length), false, constaint);
-
+        const topSps = Smooth.smooth(topPoints, false, constaint);
         context.beginPath();
         context.moveTo(topPoints[0].x, topPoints[0].y);
         for (let i = 0, n = topSps.length; i < n; i++) {
           const sp = topSps[i];
           context.bezierCurveTo(sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]);
         }
-        context.lineTo(bottomPoints[0].x, bottomPoints[0].y);
-        for (let i = 0, n = bottomSps.length; i < n; i++) {
-          const sp = bottomSps[i];
-          context.bezierCurveTo(sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]);
+
+        if (bottomPoints.length) {
+          const bottomSps = Smooth.smooth(bottomPoints, false, constaint);
+          context.lineTo(bottomPoints[0].x, bottomPoints[0].y);
+          for (let i = 0, n = bottomSps.length; i < n; i++) {
+            const sp = bottomSps[i];
+            context.bezierCurveTo(sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]);
+          }
         }
         context.closePath();
       }
     });
   } else {
-    topPoints = topPoints.concat(bottomPoints);
     shape = container.addShape('Polyline', {
       className: 'area',
       attrs: Util.mix({
-        points: topPoints
+        points
       }, style)
     });
   }
@@ -96,14 +74,16 @@ function drawShape(cfg, container, isSmooth) {
   const style = Util.mix({
     fillStyle: cfg.color
   }, Global.shape.area, cfg.style);
+
   bottomPoints.reverse(); // 下面
   topPoints = self.parsePoints(topPoints);
   bottomPoints = self.parsePoints(bottomPoints);
   if (cfg.isInCircle) {
+    topPoints.push(topPoints[0]); // 闭合路径
+    bottomPoints.unshift(bottomPoints[bottomPoints.length - 1]); // 闭合路径
     if (equalsCenter(bottomPoints, cfg.center)) { // 如果内部点等于圆心，不绘制
       bottomPoints = [];
     }
-    return drawCircleArea(topPoints, bottomPoints, container, style, isSmooth);
   }
 
   return drawRectShape(topPoints, bottomPoints, container, style, isSmooth);

test/bug/issue-180-spec.js

@@ -0,0 +1,44 @@
+// const expect = require('chai').expect;
+const F2 = require('../../src/core');
+require('../../src/geom/area');
+require('../../src/coord/polar');
+require('../../src/component/axis/circle');
+
+const canvas = document.createElement('canvas');
+canvas.width = 500;
+canvas.height = 500;
+canvas.id = 'issue180';
+document.body.appendChild(canvas);
+
+describe('issue 180', () => {
+  it('雷达图空心问题', function() {
+    const data = [
+      { item: 'Design', user: '用户 A', score: 70 },
+      { item: 'Development', user: '用户 A', score: 60 },
+      { item: 'Marketing', user: '用户 A', score: 50 },
+      { item: 'FKJKJG', user: '用户 A', score: 30 },
+      { item: 'Design', user: '用户 B', score: 80 },
+      { item: 'Development', user: '用户 B', score: 70 },
+      { item: 'Marketing', user: '用户 B', score: 60 },
+      { item: 'FKJKJG', user: '用户 B', score: 40 }
+    ];
+    const chart = new F2.Chart({
+      el: canvas,
+      pixelRatio: window.devicePixelRatio
+    });
+
+    chart.coord('polar');
+    chart.source(data, {
+      score: {
+        min: -10,
+        tickInterval: 40
+      }
+    });
+
+    chart.area().position('item*score').color('user')
+      .shape('smooth');
+    chart.render();
+
+    // TODO: 这里需要进行图像测试
+  });
+});