手写签名

src/components/miliu-autograph/miliu-autograph.vue

@@ -38,6 +38,7 @@
 
 <script setup>
 import { ref, reactive, watch, getCurrentInstance } from 'vue'
+import { useMemberStore } from '@/stores'
 
 const emits = defineEmits(['update:modelValue', 'complete'])
 const props = defineProps({
@@ -57,12 +58,82 @@ let hasDrawn = ref(false)
 // 横向提示
 const showToast = ref(false)
 const toastMsg = ref('')
+const memberStore = useMemberStore()
+console.log('🚀 ~ memberStore:', memberStore.userInfo.nickName)
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      // 小延时确保 canvas 已经渲染
+      setTimeout(() => {
+        uni.createSelectorQuery()
+          .in(_this)
+          .select('#mycanvas')
+          .fields({ size: true, rect: true }, (data) => {
+            if (data) {
+              const { width, height } = data
+              drawBackground(canvaCtx, width, height)
+            }
+          })
+          .exec()
+      }, 50) // 可以尝试 30~100ms，根据实际机型调整
+    }
+  }
+)
+
 const showRotateToast = (msg) => {
   toastMsg.value = msg
   showToast.value = true
   setTimeout(() => (showToast.value = false), 2000)
 }
 
+// 绘制横向练字格 + 正楷体水印
+const drawBackground = (ctx, width = 100, height = 100) => {
+  ctx.save()
+  ctx.setStrokeStyle('#e0e0e0')
+  ctx.setLineWidth(1)
+
+  const gridSize = 120
+
+  // 横竖格子
+  for (let y = gridSize; y < height; y += gridSize) {
+    ctx.moveTo(0, y)
+    ctx.lineTo(width, y)
+  }
+  for (let x = gridSize; x < width; x += gridSize) {
+    ctx.moveTo(x, 0)
+    ctx.lineTo(x, height)
+  }
+
+  // 米字格
+  for (let x = 0; x < width; x += gridSize) {
+    for (let y = 0; y < height; y += gridSize) {
+      ctx.moveTo(x, y)
+      ctx.lineTo(x + gridSize, y + gridSize)
+      ctx.moveTo(x + gridSize, y)
+      ctx.lineTo(x, y + gridSize)
+    }
+  }
+
+  ctx.stroke()
+
+  // 正楷体水印
+  ctx.setFontSize(160)
+  ctx.setFillStyle('rgba(180,180,180,0.25)')
+  ctx.setTextAlign('center')
+  ctx.setTextBaseline('middle')
+  ctx.translate(width / 2, height / 2)
+  ctx.rotate(Math.PI / 2)
+  ctx.fillText(memberStore.userInfo.nickName, 0, 0)
+  ctx.restore()
+
+  // ⚡ 必须在 draw() 回调里确保画面生效
+  ctx.draw(false, () => {
+    console.log('背景绘制完成')
+  })
+}
+
 // 触摸开始
 const touchstart = (e) => {
   let startX = e.changedTouches[0].x
@@ -101,8 +172,7 @@ const touchend = () => {
 // 清空画布
 const clear = () => {
   return new Promise((resolve, reject) => {
-    uni
-      .createSelectorQuery()
+    uni.createSelectorQuery()
       .in(_this)
       .select('#mycanvas')
       .fields({ size: true, rect: true }, (data) => {
@@ -112,13 +182,16 @@ const clear = () => {
         }
         const { width, height } = data
         canvaCtx.clearRect(0, 0, width, height)
-        canvaCtx.draw(true)
+        canvaCtx.draw(false, () => {
+          drawBackground(canvaCtx, width, height) // ⚡ 保证背景立即重绘
           hasDrawn.value = false
           resolve()
         })
+      })
       .exec()
   })
 }
+
 // 确认
 const confirm = () => {
   if (!hasDrawn.value) {