Merge pull request #19056 from RexSkz/fix-19051

fix(clip): add an extra space to the clip-path width to prevent unexpected clip. close #19051
apache · Sep 19, 2023 · fa231d3 · fa231d3
2 parents b37d67c + a57202d
commit fa231d3
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 3 deletions.
diff --git a/src/chart/helper/createClipPathFromCoordSys.ts b/src/chart/helper/createClipPathFromCoordSys.ts
@@ -51,8 +51,12 @@ function createGridClipPath(
     height += lineWidth;
 
     // fix: https://github.com/apache/incubator-echarts/issues/11369
-    x = Math.floor(x);
-    width = Math.round(width);
+    width = Math.ceil(width);
+    if (x !== Math.floor(x)) {
+        x = Math.floor(x);
+        // if no extra 1px on `width`, it will still be clipped since `x` is floored
+        width++;
+    }
 
     const clipPath = new graphic.Rect({
         shape: {
@@ -165,4 +169,4 @@ export {
     createGridClipPath,
     createPolarClipPath,
     createClipPath
-};
+};
diff --git a/test/clip-line-cap.html b/test/clip-line-cap.html