diff --git a/.vscode/settings.json b/.vscode/settings.json index 2bcc355..58e37ab 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,8 +5,10 @@ "colspan", "compositionend", "compositionstart", + "contenteditable", "contextmenu", "deletable", + "dppx", "inputarea", "linebreak", "prismjs", @@ -17,9 +19,8 @@ "TEXTLIKE", "trlist", "vite", - "Yahei", "vitepress", - "contenteditable" + "Yahei" ], "cSpell.ignorePaths": [ ".github", diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 654e5ff..ab9160c 100644 --- a/src/editor/core/draw/Draw.ts +++ b/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 diff --git a/src/editor/core/event/GlobalEvent.ts b/src/editor/core/event/GlobalEvent.ts index 2fad15e..269d002 100644 --- a/src/editor/core/event/GlobalEvent.ts +++ b/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() + } + } \ No newline at end of file