From 67ffea48e614ab22b31ae771fac66a4ade1bfe99 Mon Sep 17 00:00:00 2001
From: DCloud_LXH <283700113@qq.com>
Date: Mon, 7 Feb 2022 17:17:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20canvas=20=E6=94=AF=E6=8C=81=20hidpi=20?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E6=8E=A7=E5=88=B6=E6=98=AF=E5=90=A6=E5=90=AF?=
 =?UTF-8?q?=E7=94=A8=E9=AB=98=E6=B8=85=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/uni-components/src/helpers/hidpi.js  | 10 +++++---
 .../uni-components/src/vue/canvas/index.tsx   | 25 +++++++++++++------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/uni-components/src/helpers/hidpi.js b/packages/uni-components/src/helpers/hidpi.js
index 6617c90b3..1064305af 100644
--- a/packages/uni-components/src/helpers/hidpi.js
+++ b/packages/uni-components/src/helpers/hidpi.js
@@ -17,10 +17,10 @@ export const pixelRatio = __NODE_JS__
       return (window.devicePixelRatio || 1) / backingStore
     })()
 
-export function wrapper(canvas) {
-  canvas.width = canvas.offsetWidth * pixelRatio
-  canvas.height = canvas.offsetHeight * pixelRatio
-  canvas.getContext('2d').__hidpi__ = true
+export function wrapper(canvas, hidpi = true) {
+  canvas.width = canvas.offsetWidth * (hidpi ? pixelRatio : 1)
+  canvas.height = canvas.offsetHeight * (hidpi ? pixelRatio : 1)
+  canvas.getContext('2d').__hidpi__ = hidpi
 }
 
 let isHidpi = false
@@ -129,6 +129,7 @@ export function initHidpi() {
 
         args[1] *= pixelRatio
         args[2] *= pixelRatio
+        args[3] *= pixelRatio
 
         var font = this.font
         this.font = font.replace(
@@ -153,6 +154,7 @@ export function initHidpi() {
 
         args[1] *= pixelRatio // x
         args[2] *= pixelRatio // y
+        args[3] *= pixelRatio
 
         var font = this.font
         this.font = font.replace(
diff --git a/packages/uni-components/src/vue/canvas/index.tsx b/packages/uni-components/src/vue/canvas/index.tsx
index 45a502b32..e5c2b7aa7 100644
--- a/packages/uni-components/src/vue/canvas/index.tsx
+++ b/packages/uni-components/src/vue/canvas/index.tsx
@@ -66,6 +66,10 @@ const props = {
     type: [Boolean, String],
     default: false,
   },
+  hidpi: {
+    type: Boolean,
+    default: true,
+  },
 }
 
 type Props = ExtractPropTypes<typeof props>
@@ -98,7 +102,11 @@ export default /*#__PURE__*/ defineBuiltInComponent({
     })
     const { _listeners } = useListeners(props, $listeners, trigger)
 
-    const { _handleSubscribe, _resize } = useMethods(canvas, actionsWaiting)
+    const { _handleSubscribe, _resize } = useMethods(
+      props,
+      canvas,
+      actionsWaiting
+    )
 
     useSubscribe(
       _handleSubscribe as (
@@ -205,6 +213,7 @@ function useListeners(
 }
 
 function useMethods(
+  props: Props,
   canvasRef: Ref<HTMLCanvasElement | null>,
   actionsWaiting: Ref<boolean>
 ) {
@@ -213,20 +222,22 @@ function useMethods(
     [key: string]: HTMLImageElement & { ready: boolean }
   } = {}
 
+  const _pixelRatio = computed(() => (props.hidpi ? pixelRatio : 1))
+
   function _resize(size?: { width: number; height: number }) {
     let canvas = canvasRef.value!
     var hasChanged =
       !size ||
-      canvas.width !== Math.floor(size.width * pixelRatio) ||
-      canvas.height !== Math.floor(size.height * pixelRatio)
+      canvas.width !== Math.floor(size.width * _pixelRatio.value) ||
+      canvas.height !== Math.floor(size.height * _pixelRatio.value)
     if (!hasChanged) return
     if (canvas.width > 0 && canvas.height > 0) {
       let context = canvas.getContext('2d')!
       let imageData = context.getImageData(0, 0, canvas.width, canvas.height)
-      wrapper(canvas)
+      wrapper(canvas, props.hidpi)
       context.putImageData(imageData, 0, 0)
     } else {
-      wrapper(canvas)
+      wrapper(canvas, props.hidpi)
     }
   }
   function actionsChanged(
@@ -522,8 +533,8 @@ function useMethods(
     height = height ? Math.min(height, maxHeight) : maxHeight
     if (!hidpi) {
       if (!destWidth && !destHeight) {
-        destWidth = Math.round(width * pixelRatio)
-        destHeight = Math.round(height * pixelRatio)
+        destWidth = Math.round(width * _pixelRatio.value)
+        destHeight = Math.round(height * _pixelRatio.value)
       } else if (!destWidth) {
         destWidth = Math.round((width / height) * destHeight)
       } else if (!destHeight) {
-- 
GitLab