fix: signature 无法绘制问题修复

src/packages/__VUE/signature/doc.en-US.md

@@ -130,5 +130,5 @@ export default {
 | start | Signature start callback function (refers to the start of a certain stroke) | `-`
 | signing | The callback function that is signing (referring to a certain stroke in progress) | `event`
 | end | Signature end callback function (referring to the end of a certain stroke) | `-`
-| confirm | Click the confirm button to trigger the event callback function | `canvas and signature image display data URI`
+| confirm | Click the confirm button to trigger the event callback function | `canvas and signature image display data URI，<br>If not drawn, returns a tooltip and an empty data URI`
 | clear | Click the re-sign button to trigger the event callback function | `-`

src/packages/__VUE/signature/doc.md

@@ -108,5 +108,5 @@ export default {
 | start | 签名开始回调函数（指某次笔画的开始） | `-`
 | signing | 正在签名的回调函数（指某次笔画进行中） | `event`
 | end | 签名结束回调函数（指某次笔画的结束）| `-`
-| confirm | 点击确认按钮触发事件回调函数 | `canvas和签名图片展示的 data URI`
+| confirm | 点击确认按钮触发事件回调函数 | `canvas和签名图片展示的 data URI，<br>如未绘制，则返回提示信息和空 data URI`
 | clear | 点击重签按钮触发事件回调函数 | `-`

src/packages/__VUE/signature/doc.taro.md

@@ -113,5 +113,5 @@ export default {
 | start | 签名开始回调函数（指某次笔画的开始） | `-`
 | signing | 正在签名的回调函数（指某次笔画进行中） | `event`
 | end | 签名结束回调函数（指某次笔画的结束）| `-`
-| confirm | 点击确认按钮触发事件回调函数 | `canvas和签名图片展示的 data URI`
+| confirm | 点击确认按钮触发事件回调函数 | `canvas和签名图片展示的 data URI，<br>如未绘制，则返回提示信息和空 data URI`
 | clear | 点击重签按钮触发事件回调函数 | `-`

src/packages/__VUE/signature/index.scss

@@ -1,6 +1,6 @@
 .nut-signature {
   .nut-signature-inner {
-    height: 10rem;
+    height: 8rem;
     margin-bottom: 1rem;
     border: 1px solid #dadada;
     display: flex;
@@ -10,7 +10,7 @@
   .spcanvas_WEAPP {
     width: 100%;
     height: 100%;
-    #spcanvas {
+    .spcanvas {
       width: 100%;
     }
   }

src/packages/__VUE/signature/index.taro.vue

@@ -4,8 +4,8 @@
       <canvas
         ref="spcanvas"
         class="spcanvas"
-        id="spcanvas"
-        canvasId="spcanvas"
+        :id="canvasSetId"
+        :canvasId="canvasSetId"
         type="2d"
         disable-scroll="true"
         @touchstart="startEventHandler"
@@ -62,6 +62,7 @@ export default create({
       };
     });
     const spcanvas: any = ref<HTMLElement | null>(null);
+    const canvasSetId: any = 'spcanvas' + new Date().getTime();
 
     const state = reactive({
       canvas: null,
@@ -80,16 +81,18 @@ export default create({
       state.ctx.lineWidth = props.lineWidth;
       state.ctx.strokeStyle = props.strokeStyle;
     };
-
+    const isDraw = ref(false);
     const moveEventHandler = (event: TouchEvent) => {
       event.preventDefault();
       if (!state.ctx) {
         return false;
       }
       let evt = event.changedTouches[0];
+      isDraw.value = true;
       emit('signing', evt);
-      let mouseX = evt.clientX;
-      let mouseY = evt.clientY;
+      // @ts-ignore
+      let mouseX = evt.x || evt.clientX;
+      let mouseY = evt.y || evt.clientY;
 
       if (Taro.getEnv() === 'WEB') {
         let coverPos = spcanvas.value.getBoundingClientRect();
@@ -116,6 +119,7 @@ export default create({
       state.ctx.closePath();
 
       emit('clear');
+      isDraw.value = false;
     };
 
     const confirm = () => {
@@ -127,7 +131,7 @@ export default create({
         return;
       }
       Taro.createSelectorQuery()
-        .select('#spcanvas')
+        .select('#' + canvasSetId)
         .fields({
           node: true,
           size: true
@@ -135,10 +139,12 @@ export default create({
         .exec(async (res) => {
           Taro.canvasToTempFilePath({
             canvas: res[0].node,
-            canvasId: 'spcanvas',
+            canvasId: canvasSetId,
             fileType: props.type as any,
             success: function (result) {
-              emit('confirm', state.canvas, result.tempFilePath);
+              const _canvas = !isDraw.value ? '请绘制签名' : state.canvas;
+              const _filePath = !isDraw.value ? '' : result.tempFilePath;
+              emit('confirm', _canvas, _filePath);
             },
             fail: function (result) {
               emit('confirm', result);
@@ -152,7 +158,7 @@ export default create({
         setTimeout(() => {
           if (Taro.getEnv() === 'WEAPP' || Taro.getEnv() === 'JD') {
             Taro.createSelectorQuery()
-              .select('#spcanvas')
+              .select('#' + canvasSetId)
               .fields(
                 {
                   node: true,
@@ -161,38 +167,16 @@ export default create({
                 function (res) {
                   const canvas = res.node;
                   canvasSetting(canvas, res.width, res.height);
-                  // const dpr = Taro.getSystemInfoSync().pixelRatio;
-                  // const ctx = canvas.getContext('2d');
-                  // canvas.width = res.width * dpr;
-                  // canvas.height = res.height * dpr;
-                  // state.canvas = canvas;
-                  // ctx.scale(dpr, dpr);
-                  // state.ctx = ctx;
-                  // state.canvasWidth = res.width * dpr;
-                  // state.canvasHeight = res.height * dpr;
                 }
               )
               .exec();
           } else {
-            const canvasDom: HTMLElement | null = document.getElementById('spcanvas');
+            const canvasDom: HTMLElement | null = document.getElementById(canvasSetId);
             let canvas: HTMLCanvasElement = canvasDom as HTMLCanvasElement;
             if (canvasDom?.tagName !== 'CANVAS') {
               canvas = canvasDom?.getElementsByTagName('canvas')[0] as HTMLCanvasElement;
             }
             canvasSetting(canvas, canvasDom?.offsetWidth as number, canvasDom?.offsetHeight as number);
-
-            //   const ctx: any = canvas.getContext('2d');
-            //   const dpr = Taro.getSystemInfoSync().pixelRatio;
-            //   const _w = (canvasDom?.offsetWidth as number) * dpr;
-            //   const _h = (canvasDom?.offsetHeight as number) * dpr;
-
-            //   canvas.width = _w;
-            //   canvas.height = _h;
-            //   state.canvas = canvas;
-            //   ctx?.scale(dpr, dpr);
-            //   state.ctx = ctx;
-            //   state.canvasWidth = _w;
-            //   state.canvasHeight = _h;
           }
         }, 1000);
       });
@@ -211,6 +195,7 @@ export default create({
     };
     return {
       taroEnv: Taro.getEnv(),
+      canvasSetId,
       spcanvas,
       confirm,
       clear,

src/packages/__VUE/signature/index.vue

@@ -124,7 +124,15 @@ export default create({
     const confirm = () => {
       onSave(canvas.value);
     };
-
+    const isCanvasBlank = (canvas: any) => {
+      if (!canvas) {
+        return true;
+      }
+      var blank: any = document.createElement('canvas');
+      blank.width = canvas.width;
+      blank.height = canvas.height;
+      return canvas?.toDataURL() == blank.toDataURL();
+    };
     const onSave = (canvas: { toDataURL: (arg0: string, arg1?: number | undefined) => any }) => {
       let dataurl;
       switch (props.type) {
@@ -135,8 +143,11 @@ export default create({
           dataurl = canvas.toDataURL('image/jpeg', 0.8);
           break;
       }
+      const _canvas = isCanvasBlank(canvas) ? '请绘制签名' : canvas;
+      const _filePath = isCanvasBlank(canvas) ? '' : dataurl;
       clear();
-      emit('confirm', canvas, dataurl);
+      // emit('confirm', canvas, dataurl);
+      emit('confirm', _canvas, _filePath);
     };
 
     onMounted(() => {

src/sites/mobile-taro/vue/src/business/pages/signature/index.vue

@@ -3,18 +3,19 @@
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <nut-signature @confirm="confirm" @clear="clear" custom-class="test" @start="start"></nut-signature>
-    <p class="demo-tips demo1">Tips: 点击确认按钮,下方显示签名图片</p>
+    <image :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
+
     <h2>修改颜色和签字粗细</h2>
     <nut-signature
       :lineWidth="lineWidth"
       :strokeStyle="strokeStyle"
-      @confirm="confirm"
-      @clear="clear"
+      @confirm="confirm2"
+      @clear="clear2"
       @start="start"
       @signing="signing"
       @end="end"
     />
-    <image :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
+    <image :src="demoSignUrl2" class="demoSignUrl" v-if="demoSignUrl2" />
   </div>
 </template>
 
@@ -27,6 +28,7 @@ export default {
   setup() {
     const env = Taro.getEnv();
     const demoSignUrl = ref('');
+    const demoSignUrl2 = ref('');
     const state = reactive({
       lineWidth: 4,
       strokeStyle: 'green',
@@ -36,10 +38,26 @@ export default {
       demoSignUrl.value = '';
       console.log('清除事件');
     };
+    const clear2 = () => {
+      demoSignUrl2.value = '';
+      console.log('清除事件');
+    };
     const confirm = (canvas, data: any) => {
+      if (data === '') {
+        console.log(canvas);
+        return false;
+      }
       demoSignUrl.value = data;
       console.log('图片地址', canvas, data);
     };
+    const confirm2 = (canvas, data: any) => {
+      if (data === '') {
+        console.log(canvas);
+        return false;
+      }
+      demoSignUrl2.value = data;
+      console.log('图片地址', canvas, data);
+    };
     const start = () => {
       console.log('签名开始');
     };
@@ -49,7 +67,7 @@ export default {
     const end = () => {
       console.log('签名结束');
     };
-    return { ...state, confirm, clear, start, signing, end, demoSignUrl, env };
+    return { ...state, confirm, clear, start, signing, end, demoSignUrl, demoSignUrl2, confirm2, clear2, env };
   }
 };
 </script>
@@ -63,8 +81,6 @@ export default {
   height: 120px;
 }
 .test {
-  display: flex;
-  justify-content: space-between;
   .nut-input {
     width: 80%;
   }
@@ -73,7 +89,10 @@ export default {
   height: 400px;
 }
 .demoSignUrl {
-  width: 200px;
-  height: 200px;
+  width: 100px;
+  height: 100px;
+}
+.demo-tips {
+  margin-top: 10px;
 }
 </style>