fix(clip): calculate with dpr when extending clip path. close #19051

apache · Aug 30, 2023 · cff1a3d · cff1a3d
1 parent bb1e18c
commit cff1a3d
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 2 deletions.
diff --git a/src/chart/helper/createClipPathFromCoordSys.ts b/src/chart/helper/createClipPathFromCoordSys.ts
@@ -25,6 +25,7 @@ import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
 import type Polar from '../../coord/polar/Polar';
 import { CoordinateSystem } from '../../coord/CoordinateSystem';
 import { isFunction } from 'zrender/src/core/util';
+import CanvasPainter from 'zrender/src/canvas/Painter';
 
 type SeriesModelWithLineWidth = SeriesModel<SeriesOption & {
     lineStyle?: { width?: number }
@@ -43,7 +44,14 @@ function createGridClipPath(
     let width = rect.width;
     let height = rect.height;
 
-    const lineWidth = seriesModel.get(['lineStyle', 'width']) || 2;
+    const zr = cartesian.model.ecModel.scheduler.ecInstance.getZr();
+    const dpr = zr.painter instanceof CanvasPainter
+        ? zr.painter.dpr
+        : window.devicePixelRatio; /* global window */
+
+    const _lineWidth = seriesModel.get(['lineStyle', 'width']) || 2;
+    const lineWidth = _lineWidth * (dpr || 1);
+
     // Expand the clip path a bit to avoid the border is clipped and looks thinner
     x -= lineWidth / 2;
     y -= lineWidth / 2;
@@ -165,4 +173,4 @@ export {
     createGridClipPath,
     createPolarClipPath,
     createClipPath
-};
+};
diff --git a/test/clip-line-cap.html b/test/clip-line-cap.html