feat(dpr): able to update dpr by resize

src/PainterBase.ts

@@ -19,7 +19,7 @@ export interface PainterBase {
 
     // constructor(dom: HTMLElement, storage: Storage, opts: PainterOption, id: number): void
 
-    resize(width?: number | string, height?: number | string): void
+    resize(width?: number | string, height?: number | string, devicePixelRatio?: number): void
     refresh(): void
     clear(): void
 

src/canvas/Layer.ts

@@ -354,8 +354,28 @@ export default class Layer extends Eventful {
         return (this._paintRects || []).slice();
     }
 
-    resize(width: number, height: number) {
-        const dpr = this.dpr;
+    /**
+     * Update dpr and keep context markers in sync.
+     * Returns true if dpr changed.
+     */
+    updateDpr(dpr?: number): boolean {
+        if (dpr != null && dpr !== this.dpr) {
+            this.dpr = dpr;
+            // Keep a custom dpr marker in sync for downstream brush logic.
+            if (this.ctx) {
+                (this.ctx as ZRCanvasRenderingContext).dpr = dpr;
+            }
+            if (this.ctxBack) {
+                (this.ctxBack as ZRCanvasRenderingContext).dpr = dpr;
+            }
+            return true;
+        }
+        return false;
+    }
+
+    resize(width: number, height: number, dpr?: number) {
+        this.updateDpr(dpr);
+        dpr = this.dpr;
 
         const dom = this.dom;
         const domStyle = dom.style;

src/canvas/Painter.ts

@@ -838,8 +838,14 @@ export default class CanvasPainter implements PainterBase {
      */
     resize(
         width?: number | string,
-        height?: number | string
+        height?: number | string,
+        devicePixelRatio?: number
     ) {
+        const dprChanged = devicePixelRatio != null && devicePixelRatio !== this.dpr;
+        if (dprChanged) {
+            this.dpr = devicePixelRatio;
+        }
+
         if (!this._domRoot.style) { // Maybe in node or worker
             if (width == null || height == null) {
                 return;
@@ -848,7 +854,7 @@ export default class CanvasPainter implements PainterBase {
             this._width = width as number;
             this._height = height as number;
 
-            this.getLayer(CANVAS_ZLEVEL).resize(width as number, height as number);
+            this.getLayer(CANVAS_ZLEVEL).resize(width as number, height as number, this.dpr);
         }
         else {
             const domRoot = this._domRoot;
@@ -867,13 +873,13 @@ export default class CanvasPainter implements PainterBase {
             domRoot.style.display = '';
 
             // 优化没有实际改变的resize
-            if (this._width !== width || height !== this._height) {
+            if (this._width !== width || height !== this._height || dprChanged) {
                 domRoot.style.width = width + 'px';
                 domRoot.style.height = height + 'px';
 
                 for (let id in this._layers) {
                     if (this._layers.hasOwnProperty(id)) {
-                        this._layers[id].resize(width, height);
+                        this._layers[id].resize(width, height, this.dpr);
                     }
                 }
 

src/zrender.ts

@@ -338,12 +338,13 @@ class ZRender {
     resize(opts?: {
         width?: number| string
         height?: number | string
+        devicePixelRatio?: number
     }) {
         if (this._disposed) {
             return;
         }
         opts = opts || {};
-        this.painter.resize(opts.width, opts.height);
+        this.painter.resize(opts.width, opts.height, opts.devicePixelRatio);
         this.handler.resize();
     }