fix(Signature): 签名组件文档，demo 优化 (#1856)

Author: Ymm0008

src/packages/__VUE/signature/doc.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-    基于Canvas的签名组件。
+基于Canvas的签名组件。默认竖屏模式使用，如使用横屏模式，请开发者自行设置旋转角度或者宽高。
 
 ### 安装
 

src/packages/__VUE/signature/index.scss

@@ -1,14 +1,18 @@
 .nut-signature {
   .nut-signature-inner {
-    // height: 10rem;
+    height: 10rem;
     margin-bottom: 1rem;
     border: 1px solid #dadada;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   .spcanvas_WEAPP {
-    height: 10rem;
+    width: 100%;
+    height: 100%;
+    #spcanvas {
+      width: 100%;
+    }
   }
 
   .nut-signature-btn {

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

@@ -1,6 +1,6 @@
 <template>
   <div :class="classes">
-    <div :class="['nut-signature-inner', taroEnv === 'WEAPP' ? 'spcanvas_WEAPP' : '']">
+    <div :class="['nut-signature-inner', 'spcanvas_WEAPP']">
       <canvas
         ref="spcanvas"
         class="spcanvas"
@@ -79,7 +79,7 @@ export default create({
       state.ctx.strokeStyle = props.strokeStyle;
     };
 
-    const moveEventHandler = (event) => {
+    const moveEventHandler = (event: { preventDefault: () => void; changedTouches: any[] }) => {
       event.preventDefault();
       if (!state.ctx) {
         return false;
@@ -94,16 +94,19 @@ export default create({
         mouseX = evt.clientX - coverPos.left;
         mouseY = evt.clientY - coverPos.top;
       }
-
-      state.ctx?.lineTo(mouseX, mouseY);
-      state.ctx?.stroke();
+      Taro.nextTick(() => {
+        state.ctx.lineCap = 'round';
+        state.ctx.lineJoin = 'round';
+        state.ctx?.lineTo(mouseX, mouseY);
+        state.ctx?.stroke();
+      });
     };
 
-    const endEventHandler = (event) => {
+    const endEventHandler = (event: { preventDefault: () => void }) => {
       event.preventDefault();
       emit('end');
     };
-    const leaveEventHandler = (event) => {
+    const leaveEventHandler = (event: { preventDefault: () => void }) => {
       event.preventDefault();
     };
     const clear = () => {
@@ -139,25 +142,13 @@ export default create({
               emit('confirm', result);
             }
           });
-
-          // Taro.canvasToTempFilePath({
-          //   canvas: res[0].node,
-          //   canvasId: 'spcanvas',
-          //   fileType: props.type
-          // })
-          //   .then((res) => {
-          //     emit('confirm', res.tempFilePath);
-          //   })
-          //   .catch((e) => {
-          //     emit('confirm', e);
-          //   });
         });
     };
 
     onMounted(() => {
       Taro.nextTick(() => {
         setTimeout(() => {
-          if (Taro.getEnv() === 'WEAPP') {
+          if (Taro.getEnv() === 'WEAPP' || Taro.getEnv() === 'JD') {
             Taro.createSelectorQuery()
               .select('#spcanvas')
               .fields(
@@ -167,31 +158,55 @@ export default create({
                 },
                 function (res) {
                   const canvas = res.node;
-                  const ctx = canvas.getContext('2d');
-                  state.canvas = canvas;
-                  state.ctx = ctx;
-                  state.canvasWidth = res.width;
-                  state.canvasHeight = res.height;
+                  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 {
-            console.log(document.getElementById('spcanvas')?.tagName);
             const canvasDom: HTMLElement | null = document.getElementById('spcanvas');
             let canvas: HTMLCanvasElement = canvasDom as HTMLCanvasElement;
             if (canvasDom?.tagName !== 'CANVAS') {
               canvas = canvasDom?.getElementsByTagName('canvas')[0] as HTMLCanvasElement;
             }
-            // const canvas: any = document.getElementById('spcanvas')?.getElementsByTagName('canvas')[0];
-            const ctx = canvas.getContext('2d');
-            state.canvas = canvas;
-            state.ctx = ctx;
-            state.canvasWidth = canvas.width;
-            state.canvasHeight = canvas.height;
+            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);
       });
     });
+    const canvasSetting = (canvasDom: any, width: number, height: number) => {
+      const canvas = canvasDom;
+      const dpr = Taro.getSystemInfoSync().pixelRatio;
+      const ctx = canvas.getContext('2d');
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      state.canvas = canvas;
+      ctx.scale(dpr, dpr);
+      state.ctx = ctx;
+      state.canvasWidth = width * dpr;
+      state.canvasHeight = height * dpr;
+    };
     return {
       taroEnv: Taro.getEnv(),
       spcanvas,

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

@@ -10,38 +10,28 @@
       @signing="signing"
       @end="end"
     />
+    <image :src="demoSignUrl" class="demoSignUrl" v-if="demoSignUrl" />
   </div>
 </template>
 
 <script lang="ts">
-import Taro from '@tarojs/taro';
-import { reactive } from 'vue';
+import { ref, reactive } from 'vue';
 export default {
   props: {},
   setup() {
+    const demoSignUrl = ref('');
     const state = reactive({
       lineWidth: 4,
       strokeStyle: 'green',
       testimg: ''
     });
     const clear = () => {
+      demoSignUrl.value = '';
       console.log('清除事件');
     };
     const confirm = (canvas, data: any) => {
+      demoSignUrl.value = data;
       console.log('图片地址', canvas, data);
-      Taro.saveImageToPhotosAlbum({
-        filePath: `${data}`,
-        success(res) {
-          Taro.showToast({
-            title: '保存成功'
-          });
-        },
-        fail(err) {
-          Taro.showToast({
-            title: '保存失败'
-          });
-        }
-      });
     };
     const start = () => {
       console.log('签名开始');
@@ -52,12 +42,15 @@ export default {
     const end = () => {
       console.log('签名结束');
     };
-    return { ...state, confirm, clear, start, signing, end };
+    return { ...state, confirm, clear, start, signing, end, demoSignUrl };
   }
 };
 </script>
 
 <style lang="scss">
+#app .demo {
+  height: auto;
+}
 .nut-cell {
   padding: 20px 0;
   height: 120px;
@@ -69,4 +62,11 @@ export default {
     width: 80%;
   }
 }
+#spcanvas {
+  height: 400px;
+}
+.demoSignUrl {
+  width: 200px;
+  height: 200px;
+}
 </style>

src/sites/mobile-taro/vue/src/exhibition/pages/countup/index.vue

@@ -114,7 +114,7 @@ export default {
 }
 .show-demo {
   background: #ffffff;
-  padding: 0 20px;
+  padding: 0;
 }
 h2 {
   padding: 0 20px;