fix: 修复 smooth 时，line 和 area 线条不一致。Closed: #1835 (#1836)

packages/f2/src/components/area/areaView.tsx

@@ -2,7 +2,7 @@ import { jsx, Smooth } from '@antv/f-engine';
 import { deepMix } from '@antv/util';
 
 export default (props) => {
-  const { coord, records, shape, animation } = props;
+  const { coord, records, baseY, shape, animation } = props;
   const isSmooth = shape === 'smooth';
   const { left, top, width, height, center, startAngle, endAngle, radius } = coord as any;
 
@@ -53,30 +53,33 @@ export default (props) => {
         return (
           <group key={key}>
             {children.map((child) => {
-              const { points, bottomPoints, color, shape } = child;
+              const { points, topPoints, bottomPoints, color, shape } = child;
               if (isSmooth) {
                 const generatePath = () => {
                   const d = [];
                   const constaint = [
                     [0, 0],
                     [1, 1],
                   ];
-                  const bottomPointsLen = bottomPoints?.length || 0;
-                  const topPoints = points.slice(0, points.length - bottomPointsLen);
+
                   const topSps = Smooth.smooth(topPoints, false, constaint);
                   d.push(['M', topPoints[0].x, topPoints[0].y]);
 
                   for (let i = 0, n = topSps.length; i < n; i++) {
                     const sp = topSps[i];
                     d.push(['C', sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]]);
                   }
-                  if (bottomPointsLen) {
+
+                  if (bottomPoints && bottomPoints.length) {
                     const bottomSps = Smooth.smooth(bottomPoints, false, constaint);
                     d.push(['L', bottomPoints[0].x, bottomPoints[0].y]);
                     for (let i = 0, n = bottomSps.length; i < n; i++) {
                       const sp = bottomSps[i];
                       d.push(['C', sp[1], sp[2], sp[3], sp[4], sp[5], sp[6]]);
                     }
+                  } else {
+                    d.push(['L', topPoints[topPoints.length - 1].x, baseY]);
+                    d.push(['L', topPoints[0].x, baseY]);
                   }
                   return d;
                 };
@@ -91,9 +94,10 @@ export default (props) => {
                   />
                 );
               }
+
               return (
                 <polygon
-                  attrs={{
+                  style={{
                     points: points.map((point) => {
                       return [point.x, point.y];
                     }),

packages/f2/src/components/area/withArea.tsx

@@ -19,18 +19,22 @@ export default (View) => {
       };
     }
 
-    mapping() {
-      const records = super.mapping();
+    getBaseY() {
       // 坐标轴 y0
       const y0 = this.getY0Value();
       const { props, startOnZero: defaultStartOnZero } = this;
       const { coord, startOnZero = defaultStartOnZero } = props;
-      let baseY = coord.y[0];
       if (startOnZero) {
         // 零点映射到绝对坐标
         const originCoord = coord.convertPoint({ x: 0, y: y0 });
-        baseY = originCoord.y;
+        return originCoord.y;
       }
+      return coord.y[0];
+    }
+
+    mapping() {
+      const records = super.mapping();
+      const baseY = this.getBaseY();
 
       for (let i = 0, len = records.length; i < len; i++) {
         const record = records[i];
@@ -56,8 +60,9 @@ export default (View) => {
       const { coord } = props;
       const records = this.mapping();
       const clip = this.getClip();
+      const baseY = this.getBaseY();
 
-      return <View {...props} coord={coord} records={records} clip={clip} />;
+      return <View {...props} baseY={baseY} coord={coord} records={records} clip={clip} />;
     }
   };
 };

packages/f2/src/components/line/withLine.tsx

@@ -117,7 +117,8 @@ export default (View) => {
             size: context.px2hd(size || shape.lineWidth) * sizeZoomRatio,
             color,
             shape,
-            points: topPoints,
+            points: [].concat(topPoints),
+            topPoints,
             bottomPoints,
           };
         });

packages/f2/test/issues/1835.test.tsx

@@ -0,0 +1,33 @@
+import { jsx, Canvas, Chart, Line, Axis, Area } from '../../src';
+import { createContext, delay } from '../util';
+
+const data = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 },
+];
+
+describe('曲线 smooth', () => {
+  it('曲线 smooth', async () => {
+    const context = createContext();
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="genre" />
+          <Axis field="sold" />
+          <Area x="genre" y="sold" shape="smooth" size={3} />
+          <Line x="genre" y="sold" shape="smooth" size={3} />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+
+    expect(context).toMatchImageSnapshot();
+  });
+});