fix(bar-race): fix lines glitch with sub-pixel optimization in animations #14679

src/component/axis/AxisBuilder.ts

@@ -269,8 +269,6 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
         );
 
         const line = new graphic.Line({
-            // Id for animation
-            subPixelOptimize: true,
             shape: {
                 x1: pt1[0],
                 y1: pt1[1],
@@ -282,6 +280,7 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
             silent: true,
             z2: 1
         });
+        graphic.subPixelOptimizeLine(line.shape, line.style.lineWidth);
         line.anid = 'line';
         group.add(line);
 
@@ -343,7 +342,6 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
     },
 
     axisTickLabel(opt, axisModel, group, transformGroup) {
-
         const ticksEls = buildAxisMajorTicks(group, transformGroup, axisModel, opt);
         const labelEls = buildAxisLabel(group, transformGroup, axisModel, opt);
 
@@ -630,7 +628,6 @@ function createTicks(
         }
         // Tick line, Not use group transform to have better line draw
         const tickEl = new graphic.Line({
-            subPixelOptimize: true,
             shape: {
                 x1: pt1[0],
                 y1: pt1[1],
@@ -642,6 +639,7 @@ function createTicks(
             autoBatch: true,
             silent: true
         });
+        graphic.subPixelOptimizeLine(tickEl.shape, tickEl.style.lineWidth);
         tickEl.anid = anidPrefix + '_' + ticksCoords[i].tickValue;
         tickEls.push(tickEl);
     }

src/component/axis/CartesianAxisView.ts

@@ -157,9 +157,8 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
 
             const colorIndex = (lineCount++) % lineColors.length;
             const tickValue = ticksCoords[i].tickValue;
-            axisGroup.add(new graphic.Line({
+            const line = new graphic.Line({
                 anid: tickValue != null ? 'line_' + ticksCoords[i].tickValue : null,
-                subPixelOptimize: true,
                 autoBatch: true,
                 shape: {
                     x1: p1[0],
@@ -171,7 +170,9 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
                     stroke: lineColors[colorIndex]
                 }, lineStyle),
                 silent: true
-            }));
+            });
+            graphic.subPixelOptimizeLine(line.shape, lineStyle.lineWidth);
+            axisGroup.add(line);
         }
     },
 
@@ -193,7 +194,6 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
 
         const lineStyle = lineStyleModel.getLineStyle();
 
-
         for (let i = 0; i < minorTicksCoords.length; i++) {
             for (let k = 0; k < minorTicksCoords[i].length; k++) {
                 const tickCoord = axis.toGlobalCoord(minorTicksCoords[i][k].coord);
@@ -211,9 +211,8 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
                     p2[1] = tickCoord;
                 }
 
-                axisGroup.add(new graphic.Line({
+                const line = new graphic.Line({
                     anid: 'minor_line_' + minorTicksCoords[i][k].tickValue,
-                    subPixelOptimize: true,
                     autoBatch: true,
                     shape: {
                         x1: p1[0],
@@ -223,7 +222,9 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
                     },
                     style: lineStyle,
                     silent: true
-                }));
+                });
+                graphic.subPixelOptimizeLine(line.shape, lineStyle.lineWidth);
+                axisGroup.add(line);
             }
         }
     },

src/component/axis/SingleAxisView.ts

@@ -93,8 +93,8 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
         const splitLineModel = axisModel.getModel('splitLine');
         const lineStyleModel = splitLineModel.getModel('lineStyle');
         let lineColors = lineStyleModel.get('color');
-
         lineColors = lineColors instanceof Array ? lineColors : [lineColors];
+        const lineWidth = lineStyleModel.get('width');
 
         const gridRect = axisModel.coordinateSystem.getRect();
         const isHorizontal = axis.isHorizontal();
@@ -123,18 +123,21 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
                 p2[0] = gridRect.x + gridRect.width;
                 p2[1] = tickCoord;
             }
-            const colorIndex = (lineCount++) % lineColors.length;
-            splitLines[colorIndex] = splitLines[colorIndex] || [];
-            splitLines[colorIndex].push(new graphic.Line({
-                subPixelOptimize: true,
+
+            const line = new graphic.Line({
                 shape: {
                     x1: p1[0],
                     y1: p1[1],
                     x2: p2[0],
                     y2: p2[1]
                 },
                 silent: true
-            }));
+            });
+            graphic.subPixelOptimizeLine(line.shape, lineWidth);
+
+            const colorIndex = (lineCount++) % lineColors.length;
+            splitLines[colorIndex] = splitLines[colorIndex] || [];
+            splitLines[colorIndex].push(line);
         }
 
         const lineStyle = lineStyleModel.getLineStyle(['color']);

src/util/graphic.ts

@@ -268,16 +268,14 @@ export function resizePath(path: SVGPath, rect: ZRRectLike): void {
 /**
  * Sub pixel optimize line for canvas
  */
-export function subPixelOptimizeLine(param: {
+export function subPixelOptimizeLine(
     shape: {
         x1: number, y1: number, x2: number, y2: number
     },
-    style: {
-        lineWidth: number
-    }
-}) {
-    subPixelOptimizeUtil.subPixelOptimizeLine(param.shape, param.shape, param.style);
-    return param;
+    lineWidth: number
+) {
+    subPixelOptimizeUtil.subPixelOptimizeLine(shape, shape, {lineWidth});
+    return shape;
 }
 
 /**