fix holes render error when map dpr!==1 (#2380)

* fix holes render error when map dpr!==1 * update * updates * updates
maptalks · Jul 15, 2024 · d2707dd · d2707dd
1 parent d8e5928
commit d2707dd
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 6 deletions.
diff --git a/src/core/Canvas.ts b/src/core/Canvas.ts
@@ -561,6 +561,8 @@ const Canvas = {
             points = [points];
         }
         const savedCtx = ctx;
+        const dpr = ctx.dpr || 1;
+        const needScale = dpr !== 1;
         if (points.length > 1 && !IS_NODE) {
             if (!TEMP_CANVAS) {
                 TEMP_CANVAS = Canvas.createCanvas(1, 1);
@@ -573,6 +575,10 @@ const Canvas = {
             setLineDash(ctx, []);
             setLineDash(ctx, lineDashArray);
             copyProperties(ctx, savedCtx);
+            if (needScale) {
+                ctx.scale(dpr, dpr);
+            }
+
         }
         // function fillPolygon(points, i, op) {
         //     Canvas.fillCanvas(ctx, op, points[i][0].x, points[i][0].y);
@@ -637,7 +643,14 @@ const Canvas = {
             ctx.fillStyle = fillStyle;
         }
         if (points.length > 1 && !IS_NODE) {
+            if (needScale) {
+                const rScale = 1 / dpr;
+                savedCtx.scale(rScale, rScale);
+            }
             savedCtx.drawImage(TEMP_CANVAS, 0, 0);
+            if (needScale) {
+                savedCtx.scale(dpr, dpr);
+            }
             savedCtx.canvas._drawn = ctx.canvas._drawn;
             copyProperties(savedCtx, ctx);
         }

diff --git a/src/renderer/layer/CanvasRenderer.ts b/src/renderer/layer/CanvasRenderer.ts
@@ -460,6 +460,12 @@ class CanvasRenderer extends Class {
 
     }
 
+    _canvasContextScale(context: CanvasRenderingContext2D, dpr: number) {
+        context.scale(dpr, dpr);
+        context.dpr = dpr;
+        return this;
+    }
+
     createContext(): void {
         //Be compatible with layer renderers that overrides create canvas and create gl/context
         if (this.gl && this.gl.canvas === this.canvas || this.context) {
@@ -469,12 +475,13 @@ class CanvasRenderer extends Class {
         if (!this.context) {
             return;
         }
+        this.context.dpr = 1;
         if (this.layer.options['globalCompositeOperation']) {
             this.context.globalCompositeOperation = this.layer.options['globalCompositeOperation'];
         }
         const dpr = this.getMap().getDevicePixelRatio();
         if (dpr !== 1) {
-            this.context.scale(dpr, dpr);
+            this._canvasContextScale(this.context, dpr);
         }
     }
 
@@ -510,8 +517,11 @@ class CanvasRenderer extends Class {
         //retina support
         canvas.height = height;
         canvas.width = width;
+        if (this.context) {
+            this.context.dpr = 1;
+        }
         if (r !== 1 && this.context) {
-            this.context.scale(r, r);
+            this._canvasContextScale(this.context, r);
         }
     }
 
@@ -595,7 +605,7 @@ class CanvasRenderer extends Class {
         return maskExtent2D;
     }
 
-    clipCanvas(context: CanvasRenderingContext2D & { isMultiClip: boolean, isClip: boolean }) {
+    clipCanvas(context: CanvasRenderingContext2D) {
         const mask = this.layer.getMask();
         if (!mask) {
             return false;
@@ -611,7 +621,7 @@ class CanvasRenderer extends Class {
         const dpr = map.getDevicePixelRatio();
         if (dpr !== 1) {
             context.save();
-            context.scale(dpr, dpr);
+            this._canvasContextScale(context, dpr);
         }
         // Handle MultiPolygon
         if (mask.getGeometries) {

diff --git a/src/renderer/layer/vectorlayer/VectorLayerCanvasRenderer.ts b/src/renderer/layer/vectorlayer/VectorLayerCanvasRenderer.ts
@@ -723,9 +723,9 @@ class VectorLayerRenderer extends OverlayLayerCanvasRenderer {
         }
         const dpr = map.getDevicePixelRatio() || 1;
         const rScale = 1 / dpr;
-        context.scale(rScale, rScale);
+        this._canvasContextScale(context, rScale);
         context.drawImage(snapshotCanvas, 0, 0);
-        context.scale(dpr, dpr);
+        this._canvasContextScale(context, dpr);
         return this;
     }
 }

diff --git a/src/types/typings.ts b/src/types/typings.ts
@@ -14,5 +14,8 @@ declare global {
 
     interface CanvasRenderingContext2D {
         isHitTesting: boolean;
+        isClip: boolean;
+        isMultiClip: boolean;
+        dpr: number;
     }
 }