JS v0.0.0

  1. <template>
  2.   <div class="signatureBox">
  3.     <div class="signature-title">签名</div>
  4.     <div ref="canvasHW" class="canvasBox">
  5.       <canvas
  6.         ref="canvasF"
  7.         @touchstart="touchStart"
  8.         @touchmove="touchMove"
  9.         @touchend="touchEnd"
  10.         @mousedown="mouseDown"
  11.         @mousemove="mouseMove"
  12.         @mouseup="mouseUp"
  13.       ></canvas>
  14.     </div>
  15.     <div class="signature-btn">
  16.       <cube-button class="btn" type="info" @click.native.prevent="handleGoBack">
  17.         返回
  18.       </cube-button>
  19.       <cube-button
  20.         class="btn"
  21.         type="info"
  22.         @click.native.prevent="handleOverwrite"
  23.       >
  24.         重签
  25.       </cube-button>
  26.       <cube-button class="btn" type="info" @click.native.prevent="handleSubmit">
  27.         确认
  28.       </cube-button>
  29.     </div>
  30.   </div>
  31. </template>
  33. <script>
  34. export default {
  35.   name: 'Signature',
  36.   data() {
  37.     return {
  38.       points: [],
  39.       canvasTxt: null,
  40.       stageInfo: [],
  41.       startX: 0,
  42.       startY: 0,
  43.       moveY: 0,
  44.       moveX: 0,
  45.       isDown: false,
  46.       strokeStyle: '#000',
  47.       lineWidth: 2,
  48.     };
  49.   },
  50.   mounted() {
  51.     this.initCanvas();
  52.   },
  53.   methods: {
  54.     initCanvas() {
  55.       const canvas = this.$refs.canvasF;
  56.       // 获取画布的高度
  57.       canvas.height = this.$refs.canvasHW.offsetHeight - 20;
  58.       // 获取画布的宽度
  59.       canvas.width = this.$refs.canvasHW.offsetWidth - 20;
  60.       // 创建 context 对象
  61.       this.canvasTxt = canvas.getContext('2d');
  62.       this.stageInfo = canvas.getBoundingClientRect();
  63.     },
  64.     // 电脑设备事件
  65.     mouseDown(ev) {
  66.       ev = ev || event;
  67.       ev.preventDefault();
  68.       if (ev) {
  69.         const obj = {
  70.           x: ev.offsetX,
  71.           y: ev.offsetY,
  72.         };
  73.         this.startX = obj.x;
  74.         this.startY = obj.y;
  75.         this.canvasTxt.beginPath();
  76.         this.canvasTxt.moveTo(this.startX, this.startY);
  77.         this.canvasTxt.lineTo(obj.x, obj.y);
  78.         this.canvasTxt.stroke();
  79.         this.canvasTxt.closePath();
  80.         this.points.push(obj);
  81.         this.isDown = true;
  82.       }
  83.     },
  84.     // 移动设备事件
  85.     touchStart(ev) {
  86.       ev = ev || event;
  87.       ev.preventDefault();
  88.       if (ev.touches.length == 1) {
  89.         const obj = {
  90.           x: ev.targetTouches[0].clientX - this.stageInfo.left,
  91.           y: ev.targetTouches[0].clientY - this.stageInfo.top,
  92.         };
  93.         this.startX = obj.x;
  94.         this.startY = obj.y;
  95.         this.canvasTxt.beginPath();
  96.         this.canvasTxt.moveTo(this.startX, this.startY);
  97.         this.canvasTxt.lineTo(obj.x, obj.y);
  98.         this.canvasTxt.stroke();
  99.         this.canvasTxt.closePath();
  100.         this.points.push(obj);
  101.       }
  102.     },
  103.     // 电脑设备事件
  104.     mouseMove(ev) {
  105.       ev = ev || event;
  106.       ev.preventDefault();
  107.       if (this.isDown) {
  108.         const obj = {
  109.           x: ev.offsetX,
  110.           y: ev.offsetY,
  111.         };
  112.         this.moveY = obj.y;
  113.         this.moveX = obj.x;
  114.         this.canvasTxt.strokeStyle = this.strokeStyle;
  115.         this.canvasTxt.lineWidth = this.lineWidth;
  116.         this.canvasTxt.beginPath();
  117.         this.canvasTxt.moveTo(this.startX, this.startY);
  118.         this.canvasTxt.lineTo(obj.x, obj.y);
  119.         this.canvasTxt.stroke();
  120.         this.canvasTxt.closePath();
  121.         this.startY = obj.y;
  122.         this.startX = obj.x;
  123.         this.points.push(obj);
  124.       }
  125.     },
  126.     // 移动设备事件
  127.     touchMove(ev) {
  128.       ev = ev || event;
  129.       ev.preventDefault();
  130.       if (ev.touches.length == 1) {
  131.         const obj = {
  132.           x: ev.targetTouches[0].clientX - this.stageInfo.left,
  133.           y: ev.targetTouches[0].clientY - this.stageInfo.top,
  134.         };
  135.         this.moveY = obj.y;
  136.         this.moveX = obj.x;
  137.         // 设置线条颜色
  138.         this.canvasTxt.strokeStyle = this.strokeStyle;
  139.         // 设置线条宽度
  140.         this.canvasTxt.lineWidth = this.lineWidth;
  141.         // 绘制开始路径
  142.         this.canvasTxt.beginPath();
  143.         // 定义线条开始坐标
  144.         this.canvasTxt.moveTo(this.startX, this.startY);
  145.         // 定义线条结束坐标
  146.         this.canvasTxt.lineTo(obj.x, obj.y);
  147.         // 绘制线条
  148.         this.canvasTxt.stroke();
  149.         this.canvasTxt.closePath();
  150.         this.startY = obj.y;
  151.         this.startX = obj.x;
  152.         this.points.push(obj);
  153.       }
  154.     },
  155.     // 电脑设备事件
  156.     mouseUp(ev) {
  157.       ev = ev || event;
  158.       ev.preventDefault();
  159.       if (ev) {
  160.         const obj = {
  161.           x: ev.offsetX,
  162.           y: ev.offsetY,
  163.         };
  164.         this.canvasTxt.beginPath();
  165.         this.canvasTxt.moveTo(this.startX, this.startY);
  166.         this.canvasTxt.lineTo(obj.x, obj.y);
  167.         this.canvasTxt.stroke();
  168.         this.canvasTxt.closePath();
  169.         this.points.push(obj);
  170.         this.points.push({ x: -1, y: -1 });
  171.         this.isDown = false;
  172.       }
  173.     },
  174.     // 移动设备事件
  175.     touchEnd(ev) {
  176.       ev = ev || event;
  177.       ev.preventDefault();
  178.       if (ev.touches.length == 1) {
  179.         const obj = {
  180.           x: ev.targetTouches[0].clientX - this.stageInfo.left,
  181.           y: ev.targetTouches[0].clientY - this.stageInfo.top,
  182.         };
  183.         this.canvasTxt.beginPath();
  184.         this.canvasTxt.moveTo(this.startX, this.startY);
  185.         this.canvasTxt.lineTo(obj.x, obj.y);
  186.         this.canvasTxt.stroke();
  187.         this.canvasTxt.closePath();
  188.         this.points.push(obj);
  189.         this.points.push({ x: -1, y: -1 });
  190.       }
  191.     },
  192.     // 返回
  193.     handleGoBack() {
  194.       this.handleOverwrite();
  195.       this.$emit('back');
  196.     },
  197.     // 重写
  198.     handleOverwrite() {
  199.       console.log('###');
  200.       this.canvasTxt.clearRect(
  201.         0,
  202.         0,
  203.         this.$refs.canvasF.width,
  204.         this.$refs.canvasF.height
  205.       );
  206.       this.points = [];
  207.     },
  208.     // 提交
  209.     handleSubmit() {
  210.       if (this.points.length < 50) {
  211.         return;
  212.       }
  213.       console.log('###', this.$refs.canvasF.toDataURL());
  214.       // this.$emit('content', this.$refs.canvasF.toDataURL());
  215.     },
  216.   },
  217. };
  218. </script>
  220. <style lang="stylus" scoped>
  221. .signatureBox
  222.   position fixed
  223.   right 0
  224.   bottom 0
  225.   left 0
  226.   background-color #fff
  227.   .signature-title
  228.     padding 10px 0
  229.     background-color #f26226
  230.     color #fff
  231.     text-align center
  232.     font-size 14px
  233.   .canvasBox
  234.     padding 10px
  235.     height 220px
  236.     canvas
  237.       border 1px solid #f26226
  238.   .signature-btn
  239.     display flex
  240.     justify-content center
  241.     box-sizing border-box
  242.     padding 0 10px 10px
  243.     .btn
  244.       display inline-block
  245.       margin-top 10px
  246.       margin-right 10px
  247.       margin-bottom 10px
  248.       padding 0
  249.       width 40%
  250.       height 30px
  251.       border-color #f26226
  252.       background-color #f26226
  253.       line-height 30px
  254.       &:last-child
  255.         margin-right 0
  256. </style>

TS v0.0.1

  1. <template>
  2.   <div class="signature__container">
  3.     <div ref="canvasContainer" class="canvas__container">
  4.       <div class="canvas__note">请在此区域内手写签名</div>
  5.       <!-- 
  6.         touchstart 移动端点击开始事件
  7.         touchmove  移动端点击滑动事件
  8.         touchend   移动端点击结束事件
  9.         mousedown  PC端鼠标点击事件
  10.         mousemove  PC端鼠标移动事件
  11.         mouseup    PC端鼠标抬起事件 
  12.       -->
  13.       <canvas
  14.         ref="canvasInstance"
  15.         @touchstart="touchStart"
  16.         @touchmove="touchMove"
  17.         @touchend="touchEnd"
  18.         @mousedown="mouseDown"
  19.         @mousemove="mouseMove"
  20.         @mouseup="mouseUp"
  21.       />
  22.     </div>
  23.     <div class="signature__btns">
  24.       <cube-button primary @click="handleSubmit">确认</cube-button>
  25.       <cube-button outline @click="handleOverwrite">重签</cube-button>
  26.     </div>
  27.   </div>
  28. </template>
  30. <script lang="ts">
  31. import { Component, Vue } from 'vue-property-decorator';
  33. @Component
  34. export default class SignatureDemo extends Vue {
  35.   points: Record<string, any>[] = [];
  36.   canvasTxt: Record<string, any> | null = null;
  37.   stageInfo: Record<string, any> = {};
  38.   startX = 0;
  39.   startY = 0;
  40.   moveY = 0;
  41.   moveX = 0;
  42.   isDown = false;
  43.   strokeStyle = '#000';
  44.   lineWidth = 2;
  46.   mounted() {
  47.     this.initCanvas();
  48.   }
  50.   initCanvas() {
  51.     const canvas: Record<string, any> = this.$refs.canvasInstance;
  52.     // 获取画布的高度
  53.     canvas.height = (this.$refs.canvasContainer as any).offsetHeight - 20;
  54.     // 获取画布的宽度
  55.     canvas.width = (this.$refs.canvasContainer as any).offsetWidth - 20;
  56.     // 创建 context 对象
  57.     this.canvasTxt = canvas.getContext('2d');
  58.     this.stageInfo = canvas.getBoundingClientRect();
  59.   }
  61.   /** 电脑设备事件 */
  62.   mouseDown(ev: any) {
  63.     ev = ev || event;
  64.     ev.preventDefault();
  65.     if (ev) {
  66.       const obj = {
  67.         x: ev.offsetX,
  68.         y: ev.offsetY,
  69.       };
  70.       this.startX = obj.x;
  71.       this.startY = obj.y;
  72.       this.canvasTxt?.beginPath();
  73.       this.canvasTxt?.moveTo(this.startX, this.startY);
  74.       this.canvasTxt?.lineTo(obj.x, obj.y);
  75.       this.canvasTxt?.stroke();
  76.       this.canvasTxt?.closePath();
  77.       this.points.push(obj);
  78.       this.isDown = true;
  79.     }
  80.   }
  82.   /** 移动设备事件 */
  83.   touchStart(ev: any) {
  84.     ev = ev || event;
  85.     ev.preventDefault();
  86.     if (ev.touches.length == 1) {
  87.       const obj = {
  88.         x: ev.targetTouches[0].clientX - this.stageInfo.left,
  89.         y: ev.targetTouches[0].clientY - this.stageInfo.top,
  90.       };
  91.       this.startX = obj.x;
  92.       this.startY = obj.y;
  93.       this.canvasTxt?.beginPath();
  94.       this.canvasTxt?.moveTo(this.startX, this.startY);
  95.       this.canvasTxt?.lineTo(obj.x, obj.y);
  96.       this.canvasTxt?.stroke();
  97.       this.canvasTxt?.closePath();
  98.       this.points.push(obj);
  99.     }
  100.   }
  102.   /** 电脑设备事件 */
  103.   mouseMove(ev: any) {
  104.     ev = ev || event;
  105.     ev.preventDefault();
  106.     if (this.isDown) {
  107.       const obj = {
  108.         x: ev.offsetX,
  109.         y: ev.offsetY,
  110.       };
  111.       this.moveY = obj.y;
  112.       this.moveX = obj.x;
  113.       if (this.canvasTxt) {
  114.         this.canvasTxt.strokeStyle = this.strokeStyle;
  115.         this.canvasTxt.lineWidth = this.lineWidth;
  116.       }
  118.       this.canvasTxt?.beginPath();
  119.       this.canvasTxt?.moveTo(this.startX, this.startY);
  120.       this.canvasTxt?.lineTo(obj.x, obj.y);
  121.       this.canvasTxt?.stroke();
  122.       this.canvasTxt?.closePath();
  123.       this.startY = obj.y;
  124.       this.startX = obj.x;
  125.       this.points.push(obj);
  126.     }
  127.   }
  129.   /** 移动设备事件 */
  130.   touchMove(ev: any) {
  131.     ev = ev || event;
  132.     ev.preventDefault();
  133.     if (ev.touches.length == 1) {
  134.       const obj = {
  135.         x: ev.targetTouches[0].clientX - this.stageInfo.left,
  136.         y: ev.targetTouches[0].clientY - this.stageInfo.top,
  137.       };
  138.       this.moveY = obj.y;
  139.       this.moveX = obj.x;
  141.       if (this.canvasTxt) {
  142.         // 设置线条颜色
  143.         this.canvasTxt.strokeStyle = this.strokeStyle;
  144.         // 设置线条宽度
  145.         this.canvasTxt.lineWidth = this.lineWidth;
  146.       }
  148.       // 绘制开始路径
  149.       this.canvasTxt?.beginPath();
  150.       // 定义线条开始坐标
  151.       this.canvasTxt?.moveTo(this.startX, this.startY);
  152.       // 定义线条结束坐标
  153.       this.canvasTxt?.lineTo(obj.x, obj.y);
  154.       // 绘制线条
  155.       this.canvasTxt?.stroke();
  156.       this.canvasTxt?.closePath();
  157.       this.startY = obj.y;
  158.       this.startX = obj.x;
  159.       this.points.push(obj);
  160.     }
  161.   }
  163.   /** 电脑设备事件 */
  164.   mouseUp(ev: any) {
  165.     ev = ev || event;
  166.     ev.preventDefault();
  167.     if (ev) {
  168.       const obj = {
  169.         x: ev.offsetX,
  170.         y: ev.offsetY,
  171.       };
  172.       this.canvasTxt?.beginPath();
  173.       this.canvasTxt?.moveTo(this.startX, this.startY);
  174.       this.canvasTxt?.lineTo(obj.x, obj.y);
  175.       this.canvasTxt?.stroke();
  176.       this.canvasTxt?.closePath();
  177.       this.points.push(obj);
  178.       this.points.push({ x: -1, y: -1 });
  179.       this.isDown = false;
  180.     }
  181.   }
  183.   /** 移动设备事件 */
  184.   touchEnd(ev: any) {
  185.     ev = ev || event;
  186.     ev.preventDefault();
  187.     if (ev.touches.length == 1) {
  188.       const obj = {
  189.         x: ev.targetTouches[0].clientX - this.stageInfo.left,
  190.         y: ev.targetTouches[0].clientY - this.stageInfo.top,
  191.       };
  192.       this.canvasTxt?.beginPath();
  193.       this.canvasTxt?.moveTo(this.startX, this.startY);
  194.       this.canvasTxt?.lineTo(obj.x, obj.y);
  195.       this.canvasTxt?.stroke();
  196.       this.canvasTxt?.closePath();
  197.       this.points.push(obj);
  198.       this.points.push({ x: -1, y: -1 });
  199.     }
  200.   }
  202.   /** 重写 */
  203.   handleOverwrite() {
  204.     this.canvasTxt?.clearRect(
  205.       0,
  206.       0,
  207.       (this.$refs.canvasInstance as any).width,
  208.       (this.$refs.canvasInstance as any).height
  209.     );
  210.     this.points = [];
  211.   }
  213.   /** 提交 */
  214.   handleSubmit() {
  215.     if (this.points.length < 50) {
  216.       return;
  217.     }
  218.     console.log('###', (this.$refs.canvasInstance as any).toDataURL());
  219.     // this.$emit('content', this.$refs.canvasInstance.toDataURL());
  220.   }
  221. }
  222. </script>
  224. <style lang="stylus" scoped>
  225. @import '~common/stylus/variable'
  226. @import '~common/stylus/mixin'
  228. .signature__container
  229.   width 100vw
  230.   height 100vh
  231.   background #F9FBFF
  232.   .canvas__container
  233.     padding 10px
  234.     height calc(100vh - 100px)
  235.     .canvas__note
  236.       position fixed
  237.       top 300px
  238.       right 60px
  239.       left 60px
  240.       z-index -1
  241.       color #B9BFC8
  242.       text-align center
  243.       font-size 12px
  244.       line-height 17px
  245.     canvas
  246.       border 1px solid #f26226
  247.   .signature__btns
  248.     flex-row()
  249.     padding 0 10px
  250. </style>

TS v0.0.2（横屏）

  1. <template>
  2.   <div class="signature__container">
  3.     <!-- 按钮区域 -->
  4.     <div class="signature__btns">
  5.       <cube-button
  6.         class="signature__btn resign"
  7.         outline
  8.         @click="handleOverwrite"
  9.       >
  10.         清除手写板
  11.       </cube-button>
  12.       <cube-button class="signature__btn confirm" primary @click="handleSubmit">
  13.         确认签名
  14.       </cube-button>
  16.       <div v-if="false" class="canvas__note">请在此区域内手写签名</div>
  17.     </div>
  19.     <!-- 签字板区域 -->
  20.     <div ref="canvasContainer" class="canvas__container">
  21.       <!-- 
  22.         touchstart 移动端点击开始事件
  23.         touchmove  移动端点击滑动事件
  24.         touchend   移动端点击结束事件
  25.         mousedown  PC端鼠标点击事件
  26.         mousemove  PC端鼠标移动事件
  27.         mouseup    PC端鼠标抬起事件 
  28.       -->
  29.       <canvas
  30.         ref="canvasInstance"
  31.         @touchstart="touchStart"
  32.         @touchmove="touchMove"
  33.         @touchend="touchEnd"
  34.         @mousedown="mouseDown"
  35.         @mousemove="mouseMove"
  36.         @mouseup="mouseUp"
  37.       />
  38.     </div>
  39.   </div>
  40. </template>
  42. <script lang="ts">
  43. import { Component, Vue } from 'vue-property-decorator';
  45. @Component
  46. export default class SignatureDemo extends Vue {
  47.   points: Record<string, any>[] = [];
  48.   canvasTxt: Record<string, any> | null = null;
  49.   stageInfo: Record<string, any> = {};
  50.   startX = 0;
  51.   startY = 0;
  52.   moveY = 0;
  53.   moveX = 0;
  54.   isDown = false;
  55.   strokeStyle = '#000';
  56.   lineWidth = 2;
  58.   mounted() {
  59.     this.initCanvas();
  60.   }
  62.   initCanvas() {
  63.     const canvas: Record<string, any> = this.$refs.canvasInstance;
  64.     // 获取画布的高度
  65.     canvas.height = (this.$refs.canvasContainer as any).offsetHeight;
  66.     // 获取画布的宽度
  67.     canvas.width = (this.$refs.canvasContainer as any).offsetWidth;
  68.     // 创建 context 对象
  69.     this.canvasTxt = canvas.getContext('2d');
  70.     this.stageInfo = canvas.getBoundingClientRect();
  71.   }
  73.   /** 电脑设备事件 */
  74.   mouseDown(ev: any) {
  75.     ev = ev || event;
  76.     ev.preventDefault();
  77.     if (ev) {
  78.       const obj = {
  79.         x: ev.offsetX,
  80.         y: ev.offsetY,
  81.       };
  82.       this.startX = obj.x;
  83.       this.startY = obj.y;
  84.       this.canvasTxt?.beginPath();
  85.       this.canvasTxt?.moveTo(this.startX, this.startY);
  86.       this.canvasTxt?.lineTo(obj.x, obj.y);
  87.       this.canvasTxt?.stroke();
  88.       this.canvasTxt?.closePath();
  89.       this.points.push(obj);
  90.       this.isDown = true;
  91.     }
  92.   }
  94.   /** 移动设备事件 */
  95.   touchStart(ev: any) {
  96.     ev = ev || event;
  97.     ev.preventDefault();
  98.     if (ev.touches.length == 1) {
  99.       const obj = {
  100.         x: ev.targetTouches[0].clientX - this.stageInfo.left,
  101.         y: ev.targetTouches[0].clientY - this.stageInfo.top,
  102.       };
  103.       this.startX = obj.x;
  104.       this.startY = obj.y;
  105.       this.canvasTxt?.beginPath();
  106.       this.canvasTxt?.moveTo(this.startX, this.startY);
  107.       this.canvasTxt?.lineTo(obj.x, obj.y);
  108.       this.canvasTxt?.stroke();
  109.       this.canvasTxt?.closePath();
  110.       this.points.push(obj);
  111.     }
  112.   }
  114.   /** 电脑设备事件 */
  115.   mouseMove(ev: any) {
  116.     ev = ev || event;
  117.     ev.preventDefault();
  118.     if (this.isDown) {
  119.       const obj = {
  120.         x: ev.offsetX,
  121.         y: ev.offsetY,
  122.       };
  123.       this.moveY = obj.y;
  124.       this.moveX = obj.x;
  125.       if (this.canvasTxt) {
  126.         this.canvasTxt.strokeStyle = this.strokeStyle;
  127.         this.canvasTxt.lineWidth = this.lineWidth;
  128.       }
  130.       this.canvasTxt?.beginPath();
  131.       this.canvasTxt?.moveTo(this.startX, this.startY);
  132.       this.canvasTxt?.lineTo(obj.x, obj.y);
  133.       this.canvasTxt?.stroke();
  134.       this.canvasTxt?.closePath();
  135.       this.startY = obj.y;
  136.       this.startX = obj.x;
  137.       this.points.push(obj);
  138.     }
  139.   }
  141.   /** 移动设备事件 */
  142.   touchMove(ev: any) {
  143.     ev = ev || event;
  144.     ev.preventDefault();
  145.     if (ev.touches.length == 1) {
  146.       const obj = {
  147.         x: ev.targetTouches[0].clientX - this.stageInfo.left,
  148.         y: ev.targetTouches[0].clientY - this.stageInfo.top,
  149.       };
  150.       this.moveY = obj.y;
  151.       this.moveX = obj.x;
  153.       if (this.canvasTxt) {
  154.         // 设置线条颜色
  155.         this.canvasTxt.strokeStyle = this.strokeStyle;
  156.         // 设置线条宽度
  157.         this.canvasTxt.lineWidth = this.lineWidth;
  158.       }
  160.       // 绘制开始路径
  161.       this.canvasTxt?.beginPath();
  162.       // 定义线条开始坐标
  163.       this.canvasTxt?.moveTo(this.startX, this.startY);
  164.       // 定义线条结束坐标
  165.       this.canvasTxt?.lineTo(obj.x, obj.y);
  166.       // 绘制线条
  167.       this.canvasTxt?.stroke();
  168.       this.canvasTxt?.closePath();
  169.       this.startY = obj.y;
  170.       this.startX = obj.x;
  171.       this.points.push(obj);
  172.     }
  173.   }
  175.   /** 电脑设备事件 */
  176.   mouseUp(ev: any) {
  177.     ev = ev || event;
  178.     ev.preventDefault();
  179.     if (ev) {
  180.       const obj = {
  181.         x: ev.offsetX,
  182.         y: ev.offsetY,
  183.       };
  184.       this.canvasTxt?.beginPath();
  185.       this.canvasTxt?.moveTo(this.startX, this.startY);
  186.       this.canvasTxt?.lineTo(obj.x, obj.y);
  187.       this.canvasTxt?.stroke();
  188.       this.canvasTxt?.closePath();
  189.       this.points.push(obj);
  190.       this.points.push({ x: -1, y: -1 });
  191.       this.isDown = false;
  192.     }
  193.   }
  195.   /** 移动设备事件 */
  196.   touchEnd(ev: any) {
  197.     ev = ev || event;
  198.     ev.preventDefault();
  199.     if (ev.touches.length == 1) {
  200.       const obj = {
  201.         x: ev.targetTouches[0].clientX - this.stageInfo.left,
  202.         y: ev.targetTouches[0].clientY - this.stageInfo.top,
  203.       };
  204.       this.canvasTxt?.beginPath();
  205.       this.canvasTxt?.moveTo(this.startX, this.startY);
  206.       this.canvasTxt?.lineTo(obj.x, obj.y);
  207.       this.canvasTxt?.stroke();
  208.       this.canvasTxt?.closePath();
  209.       this.points.push(obj);
  210.       this.points.push({ x: -1, y: -1 });
  211.     }
  212.   }
  214.   /** 重写 */
  215.   handleOverwrite() {
  216.     this.canvasTxt?.clearRect(
  217.       0,
  218.       0,
  219.       (this.$refs.canvasInstance as any).width,
  220.       (this.$refs.canvasInstance as any).height
  221.     );
  222.     this.points = [];
  223.   }
  225.   /** 提交 */
  226.   handleSubmit() {
  227.     if (this.points.length < 50) {
  228.       return;
  229.     }
  230.     console.log('###', (this.$refs.canvasInstance as any).toDataURL());
  231.     // this.$emit('content', this.$refs.canvasInstance.toDataURL());
  232.   }
  233. }
  234. </script>
  236. <style lang="stylus" scoped>
  237. @import '~common/stylus/variable'
  238. @import '~common/stylus/mixin'
  240. .signature__container
  241.   position relative
  242.   overflow auto
  243.   box-sizing border-box
  244.   padding 33px 24px 33px 60.5px
  245.   width 100vw
  246.   height 100vh
  247.   .signature__btns
  248.     flex-row()
  249.     position absolute
  250.     top -50.5px
  251.     right calc(100vw - 100vh) // 100vw 屏幕宽度，剩下的宽度是 100vh - 100vw
  252.     left 0
  253.     justify-content space-between
  254.     padding 0 33px
  255.     transform rotate(90deg)
  256.     transform-origin bottom left
  257.     .signature__btn
  258.       width 150px
  259.       height 50.5px
  260.       border-radius 10px
  261.       background #FFFFFF
  262.       &.resign
  263.         background #FFFFFF
  264.         color #626773
  265.         &:after
  266.           border-radius 10PX
  267.       &.confirm
  268.         background #10CCA2
  269.   .canvas__container
  270.     height 100%
  271.     .canvas__note
  272.       color #B9BFC8
  273.       text-align center
  274.       font-size 12px
  275.     canvas
  276.       border 1px dashed #10CCA2
  277. </style>

TS v0.0.3（简化）

  1. <template>
  2.   <div class="signature__container">
  3.     <!-- 签字板区域 -->
  4.     <div ref="canvasContainer" class="canvas__container">
  5.       <div v-if="isShowNote" class="canvas__note" @touchstart="onHideNote">
  6.         请在此区域内手写签名
  7.       </div>
  8.       <!-- 
  9.         touchstart 移动端点击开始事件
  10.         touchmove  移动端点击滑动事件
  11.         touchend   移动端点击结束事件         
  12.       -->
  13.       <canvas
  14.         ref="canvasRef"
  15.         class="canvas"
  16.         @touchstart="onTouchStart"
  17.         @touchmove="onTouchMove"
  18.         @touchend="onTouchEnd"
  19.       />
  20.     </div>
  22.     <!-- 按钮区域 -->
  23.     <div class="signature__btns">
  24.       <cube-button class="signature__btn resign" outline @click="onRewrite">
  25.         清除手写板
  26.       </cube-button>
  27.       <cube-button class="signature__btn confirm" primary @click="onSubmit">
  28.         确认签名
  29.       </cube-button>
  30.     </div>
  31.   </div>
  32. </template>
  34. <script lang="ts">
  35. import { Component, Vue, Emit } from 'vue-property-decorator';
  37. /**
  38.  * ***
  39.  * 为什么该组件不使用整体旋转的方式实现的几点思考：
  40.  * 1. 整体旋转最根本的原先的绘制canvas的x、y坐标必须更改，代码修改难度大。
  41.  * ***
  42.  */
  44. /** 字体颜色 */
  45. const STROKE_STYLE = '#202020';
  46. /** 字体宽度 */
  47. const LINE_WIDTH = 2;
  49. @Component
  50. export default class SignatureDemo extends Vue {
  51.   /** 是否展示提示信息 */
  52.   isShowNote = true;
  53.   /** canvas实例对象 */
  54.   canvasInstance: Record<string, any> | null = null;
  55.   /** 画布信息 */
  56.   stageInfo: Record<string, any> = {};
  57.   /** 绘制点位x轴坐标 */
  58.   startX = 0;
  59.   /** 绘制点位y轴坐标 */
  60.   startY = 0;
  62.   mounted() {
  63.     this.initial();
  64.   }
  66.   /** 初始化 */
  67.   initial() {
  68.     const canvas: Record<string, any> = this.$refs.canvasRef;
  69.     // 设置画布的高度
  70.     canvas.height = (this.$refs.canvasContainer as any).offsetHeight;
  71.     // 设置画布的宽度
  72.     canvas.width = (this.$refs.canvasContainer as any).offsetWidth;
  73.     // 创建 context 对象
  74.     this.canvasInstance = canvas.getContext('2d');
  75.     // 获取画布信息
  76.     this.stageInfo = canvas.getBoundingClientRect();
  77.   }
  79.   /** 隐藏提示信息 */
  80.   onHideNote() {
  81.     this.isShowNote = false;
  82.   }
  84.   /** 【移动设备】点击开始事件 */
  85.   onTouchStart(event: any) {
  86.     this.isShowNote = false;
  88.     event.preventDefault();
  89.     if (event.touches.length == 1) {
  90.       const obj = {
  91.         x: event.targetTouches[0].clientX - this.stageInfo.left,
  92.         y: event.targetTouches[0].clientY - this.stageInfo.top,
  93.       };
  94.       this.startX = obj.x;
  95.       this.startY = obj.y;
  96.       this.canvasInstance?.beginPath();
  97.       this.canvasInstance?.moveTo(this.startX, this.startY);
  98.       this.canvasInstance?.lineTo(obj.x, obj.y);
  99.       this.canvasInstance?.stroke();
  100.       this.canvasInstance?.closePath();
  101.     }
  102.   }
  104.   /** 【移动设备】点击移动事件 */
  105.   onTouchMove(event: any) {
  106.     event.preventDefault();
  107.     if (event.touches.length == 1) {
  108.       const obj = {
  109.         x: event.targetTouches[0].clientX - this.stageInfo.left,
  110.         y: event.targetTouches[0].clientY - this.stageInfo.top,
  111.       };
  113.       if (this.canvasInstance) {
  114.         // 设置线条颜色
  115.         this.canvasInstance.strokeStyle = STROKE_STYLE;
  116.         // 设置线条宽度
  117.         this.canvasInstance.lineWidth = LINE_WIDTH;
  118.       }
  120.       // 绘制开始路径
  121.       this.canvasInstance?.beginPath();
  122.       // 定义线条开始坐标
  123.       this.canvasInstance?.moveTo(this.startX, this.startY);
  124.       // 定义线条结束坐标
  125.       this.canvasInstance?.lineTo(obj.x, obj.y);
  126.       // 绘制线条
  127.       this.canvasInstance?.stroke();
  128.       // 停止绘制
  129.       this.canvasInstance?.closePath();
  130.       this.startY = obj.y;
  131.       this.startX = obj.x;
  132.     }
  133.   }
  135.   /** 【移动设备】点击结束事件 */
  136.   onTouchEnd(event: any) {
  137.     event.preventDefault();
  138.     if (event.touches.length == 1) {
  139.       const obj = {
  140.         x: event.targetTouches[0].clientX - this.stageInfo.left,
  141.         y: event.targetTouches[0].clientY - this.stageInfo.top,
  142.       };
  143.       this.canvasInstance?.beginPath();
  144.       this.canvasInstance?.moveTo(this.startX, this.startY);
  145.       this.canvasInstance?.lineTo(obj.x, obj.y);
  146.       this.canvasInstance?.stroke();
  147.       this.canvasInstance?.closePath();
  148.     }
  149.   }
  151.   /** 重置 */
  152.   onRewrite() {
  153.     this.canvasInstance?.clearRect(
  154.       0,
  155.       0,
  156.       (this.$refs.canvasRef as any).width,
  157.       (this.$refs.canvasRef as any).height
  158.     );
  160.     // 隐藏提示信息
  161.     this.isShowNote = true;
  162.   }
  164.   /** 提交 */
  165.   @Emit('submit')
  166.   onSubmit() {
  167.     return (this.$refs.canvasRef as any).toDataURL();
  168.   }
  169. }
  170. </script>
  172. <style lang="stylus" scoped>
  173. @import '~common/stylus/variable'
  174. @import '~common/stylus/mixin'
  176. .signature__container
  177.   position relative
  178.   box-sizing border-box
  179.   padding 33px 24px 33px 60.5px
  180.   width 100vw
  181.   height 100vh
  182.   background #F9FBFF
  183.   .canvas__container
  184.     height 100%
  185.     .canvas__note
  186.       position absolute
  187.       top -22px // 补偿字体高度
  188.       right calc(50vw - 100vh) // 100vw 屏幕宽度，剩下的宽度是 100vw - 100vh，因为超出屏幕所以要取反
  189.       left 50vw
  190.       z-index 1
  191.       color #B9BFC8
  192.       text-align center
  193.       font-size 22px
  194.       line-height 22px
  195.       transform rotate(90deg)
  196.       transform-origin bottom left
  197.     .canvas
  198.       border 1px dashed #10CCA2
  199.       border-radius 6px
  200.       background #FFFFFF
  201.   .signature__btns
  202.     flex-row()
  203.     position absolute
  204.     top -50.5px
  205.     right calc(100vw - 100vh) // 100vw 屏幕宽度，剩下的宽度是 100vw - 100vh，因为超出屏幕所以要取反
  206.     left 0
  207.     justify-content space-between
  208.     padding 0 33px
  209.     transform rotate(90deg)
  210.     transform-origin bottom left
  211.     .signature__btn
  212.       width 150px
  213.       height 50.5px
  214.       border-radius 10px
  215.       background #FFFFFF
  216.       &.resign
  217.         background #FFFFFF
  218.         color #626773
  219.         &:after
  220.           border-radius 10PX
  221.       &.confirm
  222.         background #10CCA2
  223. </style>