小程序实现手写签名

        重写     完成                           手写板   

/* pages/mine/sign.wxss */ page {   background: #fbfbfb;   height: auto;   overflow: hidden; }   .wrapper {   width: 100%;   height: 95vh;   margin: 30rpx 0;   overflow: hidden;   display: flex;   align-content: center;   flex-direction: row;   justify-content: center;   font-size: 28rpx; }   .handWriting {   background: #fff;   width: 100%;   height: 95vh; }   .handRight {   display: inline-flex;   align-items: center; }   .handCenter {   border: 4rpx dashed #e9e9e9;   flex: 5;   overflow: hidden;   box-sizing: border-box; }   .handTitle {   transform: rotate(90deg);   flex: 1;   color: #666; }   .handBtn button {   font-size: 28rpx; }   .handBtn {   height: 95vh;   display: inline-flex;   flex-direction: column;   justify-content: space-between;   align-content: space-between;   flex: 1; }   .delBtn {   position: absolute;   top: 52rpx;   left: 0rpx;   transform: rotate(90deg);   color: #666; }   .delBtn image {   position: absolute;   top: 13rpx;   left: 25rpx; }   .subBtn {   position: absolute;   bottom: 52rpx;   left: -3rpx;   display: inline-flex;   transform: rotate(90deg);   background: #008ef6;   color: #fff;   margin-bottom: 30rpx;   text-align: center;   justify-content: center; }   .black-select {   width: 60rpx;   height: 60rpx;   position: absolute;   top: 30rpx;   left: 25rpx; } .black-select.color_select {   width: 90rpx;   height: 90rpx;   top: 30rpx;   left: 10rpx; } .red-select {   width: 60rpx;   height: 60rpx;   position: absolute;   top:140rpx;   left:25rpx; } .red-select.color_select {   width: 90rpx;   height: 90rpx;   top: 120rpx;   left: 10rpx; }

// pages/mine/sign.js   var app = getApp() Page({   data: {     userInfo:{},     form:{},     canvasName: 'handWriting',     ctx: '',     canvasWidth: 0,     canvasHeight: 0,     transparent: 1, // 透明度     selectColor: 'black',     lineColor: '#1A1A1A', // 颜色     lineSize: 1.5,  // 笔记倍数     lineMin: 0.5,   // 最小笔画半径     lineMax: 4,     // 最大笔画半径     pressure: 1,     // 默认压力     smoothness: 60,  //顺滑度，用60的距离来计算速度     currentPoint: {},     currentLine: [],  // 当前线条     firstTouch: true, // 第一次触发     radius: 1, //画圆的半径     cutArea: { top: 0, right: 0, bottom: 0, left: 0 }, //裁剪区域     bethelPoint: [],  //保存所有线条 生成的贝塞尔点；     lastPoint: 0,     chirography: [], //笔迹     currentChirography: {}, //当前笔迹     linePrack: [] //划线轨迹 , 生成线条的实际点   },   // 笔迹开始   uploadScaleStart (e) {     if (e.type != 'touchstart') return false;     let ctx = this.data.ctx;     ctx.setFillStyle(this.data.lineColor);  // 初始线条设置颜色     ctx.setGlobalAlpha(this.data.transparent);  // 设置半透明     let currentPoint = {       x: e.touches[0].x,       y: e.touches[0].y     }     let currentLine = this.data.currentLine;     currentLine.unshift({       time: new Date().getTime(),       dis: 0,       x: currentPoint.x,       y: currentPoint.y     })     this.setData({       currentPoint,       // currentLine     })     if (this.data.firstTouch) {       this.setData({         cutArea: { top: currentPoint.y, right: currentPoint.x, bottom: currentPoint.y, left: currentPoint.x },         firstTouch: false       })     }     this.pointToLine(currentLine);   },   // 笔迹移动   uploadScaleMove (e) {     if (e.type != 'touchmove') return false;     if (e.cancelable) {       // 判断默认行为是否已经被禁用       if (!e.defaultPrevented) {         e.preventDefault();       }     }     let point = {       x: e.touches[0].x,       y: e.touches[0].y     }       //测试裁剪     if (point.y  this.data.cutArea.right) {       this.data.cutArea.right = point.x;     }     if (this.data.canvasWidth - point.x <= 0) {       this.data.cutArea.right = this.data.canvasWidth;     }     if (point.y > this.data.cutArea.bottom) {       this.data.cutArea.bottom = point.y;     }     if (this.data.canvasHeight - point.y <= 0) {       this.data.cutArea.bottom = this.data.canvasHeight;     }     if (point.x  2) {       var info = (currentLine[0].time - currentLine[currentLine.length - 1].time) / currentLine.length;       //$("#info").text(info.toFixed(2));     }     //一笔结束，保存笔迹的坐标点，清空，当前笔迹     //增加判断是否在手写区域；     this.pointToLine(currentLine);     var currentChirography = {       lineSize: this.data.lineSize,       lineColor: this.data.lineColor     };     var chirography = this.data.chirography     chirography.unshift(currentChirography);     this.setData({       chirography     })     var linePrack = this.data.linePrack     linePrack.unshift(this.data.currentLine);     this.setData({       linePrack,       currentLine: []     })   },   onLoad () {     let canvasName = this.data.canvasName     let ctx = wx.createCanvasContext(canvasName)     this.setData({       ctx: ctx     })     var query = wx.createSelectorQuery();     query.select('.handCenter').boundingClientRect(rect => {       this.setData({         canvasWidth: rect.width,         canvasHeight: rect.height       })     }).exec();     this.setData({       userInfo:app.globalData.userInfo     })   },   retDraw () {     this.data.ctx.clearRect(0, 0, 700, 730)     this.data.ctx.draw()   },   subCanvas(event){     // 保存的方法，这里单独列出   },     //画两点之间的线条；参数为:line，会绘制最近的开始的两个点；   pointToLine (line) {     this.calcBethelLine(line);     return;   },   //计算插值的方式；   calcBethelLine (line) {     if (line.length <= 1) {       line[0].r = this.data.radius;       return;     }     let x0, x1, x2, y0, y1, y2, r0, r1, r2, len, lastRadius, dis = 0, time = 0, curveValue = 0.5;     if (line.length <= 2) {       x0 = line[1].x       y0 = line[1].y       x2 = line[1].x + (line[0].x - line[1].x) * curveValue;       y2 = line[1].y + (line[0].y - line[1].y) * curveValue;       //x2 = line[1].x;       //y2 = line[1].y;       x1 = x0 + (x2 - x0) * curveValue;       y1 = y0 + (y2 - y0) * curveValue;;       } else {       x0 = line[2].x + (line[1].x - line[2].x) * curveValue;       y0 = line[2].y + (line[1].y - line[2].y) * curveValue;       x1 = line[1].x;       y1 = line[1].y;       x2 = x1 + (line[0].x - x1) * curveValue;       y2 = y1 + (line[0].y - y1) * curveValue;     }     //从计算公式看，三个点分别是(x0,y0),(x1,y1),(x2,y2) ；(x1,y1)这个是控制点，控制点不会落在曲线上；实际上，这个点还会手写获取的实际点，却落在曲线上     len = this.distance({ x: x2, y: y2 }, { x: x0, y: y0 });     lastRadius = this.data.radius;     for (let n = 0; n  this.data.smoothness) break;     }     this.setData({       radius: Math.min(time / len * this.data.pressure + this.data.lineMin, this.data.lineMax) * this.data.lineSize     });     line[0].r = this.data.radius;     //计算笔迹半径；     if (line.length <= 2) {       r0 = (lastRadius + this.data.radius) / 2;       r1 = r0;       r2 = r1;       //return;     } else {       r0 = (line[2].r + line[1].r) / 2;       r1 = line[1].r;       r2 = (line[1].r + line[0].r) / 2;     }     let n = 5;     let point = [];     for (let i = 0; i