feat:redraw when device pixel ratio change

src/editor/core/draw/Draw.ts

@@ -463,16 +463,21 @@ export class Draw {
   }
 
   public setPageScale(payload: number) {
+    const dpr = window.devicePixelRatio
     this.options.scale = payload
     const width = this.getWidth()
     const height = this.getHeight()
     this.container.style.width = `${width}px`
-    this.pageList.forEach(p => {
+    this.pageList.forEach((p, i) => {
       p.width = width
       p.height = height
       p.style.width = `${width}px`
       p.style.height = `${height}px`
       p.style.marginBottom = `${this.getPageGap()}px`
+      // 分辨率
+      p.width = width * dpr
+      p.height = height * dpr
+      this.ctxList[i].scale(dpr, dpr)
     })
     this.render({
       isSubmitHistory: false,
@@ -483,6 +488,21 @@ export class Draw {
     }
   }
 
+  public setPageDevicePixel() {
+    const dpr = window.devicePixelRatio
+    const width = this.getWidth()
+    const height = this.getHeight()
+    this.pageList.forEach((p, i) => {
+      p.width = width * dpr
+      p.height = height * dpr
+      this.ctxList[i].scale(dpr, dpr)
+    })
+    this.render({
+      isSubmitHistory: false,
+      isSetCursor: false
+    })
+  }
+
   public setPaperSize(width: number, height: number) {
     this.options.width = width
     this.options.height = height

src/editor/core/event/GlobalEvent.ts

@@ -24,6 +24,7 @@ export class GlobalEvent {
   private hyperlinkParticle: HyperlinkParticle
   private control: Control
   private dateParticle: DateParticle
+  private dprMediaQueryList: MediaQueryList
 
   constructor(draw: Draw, canvasEvent: CanvasEvent) {
     this.draw = draw
@@ -37,6 +38,7 @@ export class GlobalEvent {
     this.hyperlinkParticle = draw.getHyperlinkParticle()
     this.dateParticle = draw.getDateParticle()
     this.control = draw.getControl()
+    this.dprMediaQueryList = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
   }
 
   public register() {
@@ -51,6 +53,7 @@ export class GlobalEvent {
     document.addEventListener('mouseup', this.setCanvasEventAbility)
     document.addEventListener('wheel', this.setPageScale, { passive: false })
     document.addEventListener('visibilitychange', this._handleVisibilityChange)
+    this.dprMediaQueryList.addEventListener('change', this._handleDprChange)
   }
 
   public removeEvent() {
@@ -60,6 +63,7 @@ export class GlobalEvent {
     document.removeEventListener('mouseup', this.setCanvasEventAbility)
     document.removeEventListener('wheel', this.setPageScale)
     document.removeEventListener('visibilitychange', this._handleVisibilityChange)
+    this.dprMediaQueryList.removeEventListener('change', this._handleDprChange)
   }
 
   public recoverEffect = (evt: Event) => {
@@ -124,4 +128,8 @@ export class GlobalEvent {
     }
   }
 
+  private _handleDprChange = () => {
+    this.draw.setPageDevicePixel()
+  }
+
 }