From 2140c5aae2032673cef7055df9738b9bacf37816 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期三, 23 九月 2026 16:46:20 +0800
Subject: [PATCH] 青岛维护

---
 components/signature-panel/index.vue |   88 +++++++++++++++++++++++++++++++++++--------
 1 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/components/signature-panel/index.vue b/components/signature-panel/index.vue
index 15b20c6..4bfa610 100644
--- a/components/signature-panel/index.vue
+++ b/components/signature-panel/index.vue
@@ -150,8 +150,13 @@
 // Canvas涓婁笅鏂�
 let ctx = null;
 let isDrawing = false;
-let lastX = 0;
-let lastY = 0;
+let lastDrawPoint = null; // 涓婃缁樺埗鍒扮殑浣嶇疆锛堢敤浜庣嚎娈佃繛鎺ワ級
+
+// 娓叉煋鎺у埗锛堣В鍐充綆鎬ц兘鏈哄瀷 draw 寮傛瀵艰嚧涓㈠抚鏂偣锛�
+let needsRender = false; // 鏄惁鏈夊緟娓叉煋鐨勬寚浠�
+let renderLoop = null; // 娓叉煋寰幆瀹氭椂鍣�
+let isRendering = false; // 鏄惁姝ｅ湪鎵ц draw
+let renderTimeout = null; // draw 瓒呮椂淇濇姢
 
 // 閰嶇疆
 const colors = ['#000000', '#FF0000', '#0000FF', '#4CAF50'];
@@ -180,7 +185,9 @@
 // 鍒濆鍖朇anvas
 const initCanvas = () => {
   console.log('鍒濆鍖朇anvas...');
-  console.log('Canvas灏哄:', props.canvasWidth, 'x', props.canvasHeight);
+  
+  // 鍋滄鍙兘瀛樺湪鐨勬覆鏌撳惊鐜�
+  stopRenderLoop();
   
   // 娓呯┖宸叉湁涓婁笅鏂�
   ctx = null;
@@ -223,21 +230,24 @@
     return;
   }
   
-  console.log('瑙︽懜寮�濮�:', e.touches[0]);
   isDrawing = true;
   hasDrawing.value = true;
   
   const touch = e.touches[0];
-  lastX = touch.x;
-  lastY = touch.y;
+  lastDrawPoint = { x: touch.x, y: touch.y };
   
-  // 寮�濮嬫柊璺緞
+  // 璧风瑪鐢讳竴涓渾鐐癸紙瑙ｅ喅鐐瑰嚮涓嶇敾鐨勯棶棰橈級
   ctx.beginPath();
-  ctx.moveTo(lastX, lastY);
-  ctx.draw(true);
+  ctx.arc(touch.x, touch.y, currentWidth.value / 2, 0, 2 * Math.PI);
+  ctx.setFillStyle(currentColor.value);
+  ctx.fill();
+  needsRender = true;
+  
+  // 鍚姩娓叉煋寰幆
+  startRenderLoop();
 };
 
-// 瑙︽懜绉诲姩
+// 瑙︽懜绉诲姩锛堟瘡娆＄洿鎺ョ敾绾挎锛岀敤娓叉煋寰幆鎺у埗 draw 棰戠巼锛�
 const onTouchMove = (e) => {
   if (!isDrawing || !ctx) return;
   
@@ -245,20 +255,62 @@
   const x = touch.x;
   const y = touch.y;
   
-  // 缁樺埗绾挎潯
+  // 绔嬪嵆鐢荤嚎娈碉紙鎸囦护鍔犲叆闃熷垪锛屼笉璋� draw锛�
+  ctx.beginPath();
+  ctx.moveTo(lastDrawPoint.x, lastDrawPoint.y);
   ctx.lineTo(x, y);
+  ctx.setStrokeStyle(currentColor.value);
+  ctx.setLineWidth(currentWidth.value);
+  ctx.setLineCap('round');
+  ctx.setLineJoin('round');
   ctx.stroke();
-  ctx.draw(true);
   
-  // 鏇存柊鏈�鍚庝綅缃�
-  lastX = x;
-  lastY = y;
+  lastDrawPoint = { x, y };
+  needsRender = true;
+};
+
+// 鍚姩娓叉煋寰幆锛堝畾鏃舵壒閲忚皟鐢� draw锛岄伩鍏嶆瘡娆� touchmove 閮� draw 瀵艰嚧涓㈠抚锛�
+const startRenderLoop = () => {
+  if (renderLoop) return;
+  renderLoop = setInterval(() => {
+    if (needsRender && !isRendering) {
+      needsRender = false;
+      isRendering = true;
+      ctx.draw(true, () => {
+        isRendering = false;
+      });
+      // 瓒呮椂淇濇姢锛氶槻姝� draw 鍥炶皟涓嶆墽琛屽鑷村崱姝�
+      if (renderTimeout) clearTimeout(renderTimeout);
+      renderTimeout = setTimeout(() => {
+        isRendering = false;
+      }, 50);
+    }
+  }, 16);
+};
+
+// 鍋滄娓叉煋寰幆
+const stopRenderLoop = () => {
+  if (renderLoop) {
+    clearInterval(renderLoop);
+    renderLoop = null;
+  }
+  if (renderTimeout) {
+    clearTimeout(renderTimeout);
+    renderTimeout = null;
+  }
+  isRendering = false;
 };
 
 // 瑙︽懜缁撴潫
 const onTouchEnd = () => {
-  console.log('瑙︽懜缁撴潫');
   isDrawing = false;
+  // 鍋滄娓叉煋寰幆
+  stopRenderLoop();
+  // 纭繚鏈�鍚庣殑鎸囦护琚覆鏌�
+  if (needsRender) {
+    needsRender = false;
+    ctx.draw(true);
+  }
 };
 
 // 閫夋嫨棰滆壊
@@ -284,7 +336,9 @@
     return;
   }
   
-  console.log('娓呯┖鐢诲竷');
+  // 鍋滄娓叉煋寰幆
+  stopRenderLoop();
+  needsRender = false;
   
   // 娓呯┖鐢诲竷
   ctx.setFillStyle('#FFFFFF');

--
Gitblit v1.9.3