From 2e67adf2bae212a03f3cef3113326f4d942b0b55 Mon Sep 17 00:00:00 2001
From: Yau~ <42141450+yauyy@users.noreply.github.com>
Date: Sun, 24 Aug 2025 13:06:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D=20sign?=
 =?UTF-8?q?ature=20=E7=BB=84=E4=BB=B6=E8=AE=BE=E7=BD=AEbackground-color?=
 =?UTF-8?q?=E4=B8=BA=E9=80=8F=E6=98=8E=E8=89=B2=E5=AF=BC=E8=87=B4=E6=92=A4?=
 =?UTF-8?q?=E9=94=80=E6=97=A0=E6=95=88=20(#1224)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: #1223
---
 .../components/wd-signature/wd-signature.vue  | 47 +++++++++++++++++--
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue b/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue
index b6dcf684..0104022b 100644
--- a/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue
@@ -91,6 +91,45 @@ const canvasState = reactive({
   ctx: null as UniApp.CanvasContext | null // canvas上下文
 })
 
+/**
+ * 判断颜色是否为透明色
+ * @param color 颜色值（支持 rgba/hsla/hex/transparent）
+ */
+function isTransparentColor(color: string | undefined): boolean {
+  if (!color) return true
+  const transparentKeywords = ['transparent', '#0000', '#00000000']
+
+  // 标准透明关键字
+  if (transparentKeywords.includes(color.toLowerCase())) {
+    return true
+  }
+
+  // 匹配 rgba(r, g, b, a)
+  const rgbaMatch = color.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*(\d*\.?\d+))?\)$/i)
+  if (rgbaMatch) {
+    const alpha = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
+    return alpha === 0
+  }
+
+  // 匹配 hsla(h, s, l, a)
+  const hslaMatch = color.match(/^hsla?\(\s*(\d+)(?:deg)?\s*,\s*(\d+)%\s*,\s*(\d+)%(?:\s*,\s*(\d*\.?\d+))?\)$/i)
+  if (hslaMatch) {
+    const alpha = hslaMatch[4] ? parseFloat(hslaMatch[4]) : 1
+    return alpha === 0
+  }
+
+  // 匹配 #RRGGBBAA 或 #RGBA
+  const hexMatch = color.match(/^#([0-9a-f]{8}|[0-9a-f]{4})$/i)
+  if (hexMatch) {
+    const hex = hexMatch[1]
+    const alphaHex = hex.length === 8 ? hex.slice(6, 8) : hex.slice(3, 4).repeat(2)
+    const alpha = parseInt(alphaHex, 16)
+    return alpha === 0
+  }
+
+  return false
+}
+
 watch(
   () => props.penColor,
   () => {
@@ -302,8 +341,8 @@ const redrawCanvas = () => {
   if (!ctx) return
 
   // 清除画布并设置背景
-  if (isDef(props.backgroundColor)) {
-    ctx.setFillStyle(props.backgroundColor)
+  if (!isTransparentColor(props.backgroundColor)) {
+    ctx.setFillStyle(props.backgroundColor as string)
     ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
   } else {
     ctx.clearRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
@@ -570,8 +609,8 @@ function clearCanvas() {
   const { canvasWidth, canvasHeight, ctx } = canvasState
   if (ctx) {
     ctx.clearRect(0, 0, canvasWidth, canvasHeight)
-    if (isDef(props.backgroundColor)) {
-      ctx.setFillStyle(props.backgroundColor)
+    if (!isTransparentColor(props.backgroundColor)) {
+      ctx.setFillStyle(props.backgroundColor as string)
       ctx.fillRect(0, 0, canvasWidth, canvasHeight)
     }
     ctx.draw()