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

Author: RexSkz

src/chart/bar/BarView.ts

@@ -163,12 +163,12 @@ class BarView extends ChartView {
         }
     }
 
-    incrementalPrepareRender(seriesModel: BarSeriesModel): void {
+    incrementalPrepareRender(seriesModel: BarSeriesModel, ecModel: GlobalModel, api: ExtensionAPI): void {
         this._clear();
         this._updateDrawMode(seriesModel);
         // incremental also need to clip, otherwise might be overlow.
         // But must not set clip in each frame, otherwise all of the children will be marked redraw.
-        this._updateLargeClip(seriesModel);
+        this._updateLargeClip(seriesModel, ecModel, api);
     }
 
     incrementalRender(params: StageHandlerProgressParams, seriesModel: BarSeriesModel): void {
@@ -455,18 +455,18 @@ class BarView extends ChartView {
     private _renderLarge(seriesModel: BarSeriesModel, ecModel: GlobalModel, api: ExtensionAPI): void {
         this._clear();
         createLarge(seriesModel, this.group);
-        this._updateLargeClip(seriesModel);
+        this._updateLargeClip(seriesModel, ecModel, api);
     }
 
     private _incrementalRenderLarge(params: StageHandlerProgressParams, seriesModel: BarSeriesModel): void {
         this._removeBackground();
         createLarge(seriesModel, this.group, this._progressiveEls, true);
     }
 
-    private _updateLargeClip(seriesModel: BarSeriesModel): void {
+    private _updateLargeClip(seriesModel: BarSeriesModel, ecModel: GlobalModel, api: ExtensionAPI): void {
         // Use clipPath in large mode.
         const clipPath = seriesModel.get('clip', true)
-            && createClipPath(seriesModel.coordinateSystem, false, seriesModel);
+            && createClipPath(seriesModel.coordinateSystem, false, seriesModel, api.getDevicePixelRatio());
         const group = this.group;
         if (clipPath) {
             group.setClipPath(clipPath);

src/chart/candlestick/CandlestickView.ts

@@ -56,7 +56,7 @@ class CandlestickView extends ChartView {
         this._updateDrawMode(seriesModel);
 
         this._isLargeDraw
-            ? this._renderLarge(seriesModel)
+            ? this._renderLarge(seriesModel, ecModel, api)
             : this._renderNormal(seriesModel);
     }
 
@@ -166,13 +166,13 @@ class CandlestickView extends ChartView {
         this._data = data;
     }
 
-    _renderLarge(seriesModel: CandlestickSeriesModel) {
+    _renderLarge(seriesModel: CandlestickSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
         this._clear();
 
         createLarge(seriesModel, this.group);
 
         const clipPath = seriesModel.get('clip', true)
-            ? createClipPath(seriesModel.coordinateSystem, false, seriesModel)
+            ? createClipPath(seriesModel.coordinateSystem, false, seriesModel, api.getDevicePixelRatio())
             : null;
         if (clipPath) {
             this.group.setClipPath(clipPath);

src/chart/custom/CustomView.ts

@@ -243,7 +243,7 @@ export default class CustomChartView extends ChartView {
 
         // Do clipping
         const clipPath = customSeries.get('clip', true)
-            ? createClipPath(customSeries.coordinateSystem, false, customSeries)
+            ? createClipPath(customSeries.coordinateSystem, false, customSeries, api.getDevicePixelRatio())
             : null;
         if (clipPath) {
             group.setClipPath(clipPath);

src/chart/helper/createClipPathFromCoordSys.ts

@@ -33,6 +33,7 @@ function createGridClipPath(
     cartesian: Cartesian2D,
     hasAnimation: boolean,
     seriesModel: SeriesModelWithLineWidth,
+    dpr: number,
     done?: () => void,
     during?: (percent: number, clipRect: graphic.Rect) => void
 ) {
@@ -43,7 +44,8 @@ function createGridClipPath(
     let width = rect.width;
     let height = rect.height;
 
-    const lineWidth = seriesModel.get(['lineStyle', 'width']) || 2;
+    const lineWidth = (seriesModel.get(['lineStyle', 'width']) || 2) * (dpr || 1);
+
     // Expand the clip path a bit to avoid the border is clipped and looks thinner
     x -= lineWidth / 2;
     y -= lineWidth / 2;
@@ -146,6 +148,7 @@ function createClipPath(
     coordSys: CoordinateSystem,
     hasAnimation: boolean,
     seriesModel: SeriesModelWithLineWidth,
+    dpr: number,
     done?: () => void,
     during?: (percent: number) => void
 ) {
@@ -156,7 +159,7 @@ function createClipPath(
         return createPolarClipPath(coordSys as Polar, hasAnimation, seriesModel);
     }
     else if (coordSys.type === 'cartesian2d') {
-        return createGridClipPath(coordSys as Cartesian2D, hasAnimation, seriesModel, done, during);
+        return createGridClipPath(coordSys as Cartesian2D, hasAnimation, seriesModel, dpr, done, during);
     }
     return null;
 }
@@ -165,4 +168,4 @@ export {
     createGridClipPath,
     createPolarClipPath,
     createClipPath
-};
+};

src/chart/line/LineView.ts

@@ -507,7 +507,8 @@ function createLineClipPath(
     lineView: LineView,
     coordSys: Cartesian2D | Polar,
     hasAnimation: boolean,
-    seriesModel: LineSeriesModel
+    seriesModel: LineSeriesModel,
+    dpr: number
 ) {
     if (isCoordinateSystemType<Cartesian2D>(coordSys, 'cartesian2d')) {
         const endLabelModel = seriesModel.getModel('endLabel');
@@ -531,7 +532,7 @@ function createLineClipPath(
             : null;
 
         const isHorizontal = coordSys.getBaseAxis().isHorizontal();
-        const clipPath = createGridClipPath(coordSys, hasAnimation, seriesModel, () => {
+        const clipPath = createGridClipPath(coordSys, hasAnimation, seriesModel, dpr, () => {
             const endLabel = lineView._endLabel;
             if (endLabel && hasAnimation) {
                 if (labelAnimationRecord.originalX != null) {
@@ -697,6 +698,7 @@ class LineView extends ChartView {
         this._clipShapeForSymbol = clipShapeForSymbol;
         const visualColor = getVisualGradient(data, coordSys, api)
             || data.getVisual('style')[data.getVisual('drawType')];
+        const dpr = api.getDevicePixelRatio();
         // Initialization animation or coordinate system changed
         if (
             !(polyline && prevCoordSys.type === coordSys.type && step === this._step)
@@ -742,7 +744,7 @@ class LineView extends ChartView {
             }
 
             lineGroup.setClipPath(
-                createLineClipPath(this, coordSys, true, seriesModel)
+                createLineClipPath(this, coordSys, true, seriesModel, dpr)
             );
         }
         else {
@@ -766,14 +768,14 @@ class LineView extends ChartView {
             // Update clipPath
             const oldClipPath = lineGroup.getClipPath();
             if (oldClipPath) {
-                const newClipPath = createLineClipPath(this, coordSys, false, seriesModel);
+                const newClipPath = createLineClipPath(this, coordSys, false, seriesModel, dpr);
                 graphic.initProps(oldClipPath, {
                     shape: newClipPath.shape
                 }, seriesModel);
             }
             else {
                 lineGroup.setClipPath(
-                    createLineClipPath(this, coordSys, true, seriesModel)
+                    createLineClipPath(this, coordSys, true, seriesModel, dpr)
                 );
             }
 

src/chart/lines/LinesView.ts

@@ -87,7 +87,7 @@ class LinesView extends ChartView {
         lineDraw.updateData(data as SeriesData);
 
         const clipPath = seriesModel.get('clip', true) && createClipPath(
-            (seriesModel.coordinateSystem as Polar | Cartesian2D), false, seriesModel
+            (seriesModel.coordinateSystem as Polar | Cartesian2D), false, seriesModel, api.getDevicePixelRatio()
         );
         if (clipPath) {
             this.group.setClipPath(clipPath);