├── pages ├── index │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ └── index.js └── autographinfo │ ├── autographinfo.json │ ├── autographinfo.wxml │ ├── autographinfo.wxss │ └── autographinfo.js ├── .gitignore ├── images ├── slide.png ├── color_red.png ├── color_black.png ├── handwriting.gif ├── color_red_selected.png └── color_black_selected.png ├── app.wxss ├── app.json ├── README.md ├── project.config.json └── app.js /pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | */.DS_Store 3 | -------------------------------------------------------------------------------- /pages/autographinfo/autographinfo.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /images/slide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huimingma/autoGraph/HEAD/images/slide.png -------------------------------------------------------------------------------- /images/color_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huimingma/autoGraph/HEAD/images/color_red.png -------------------------------------------------------------------------------- /pages/autographinfo/autographinfo.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /images/color_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huimingma/autoGraph/HEAD/images/color_black.png -------------------------------------------------------------------------------- /images/handwriting.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huimingma/autoGraph/HEAD/images/handwriting.gif -------------------------------------------------------------------------------- /images/color_red_selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huimingma/autoGraph/HEAD/images/color_red_selected.png -------------------------------------------------------------------------------- /images/color_black_selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huimingma/autoGraph/HEAD/images/color_black_selected.png -------------------------------------------------------------------------------- /pages/autographinfo/autographinfo.wxss: -------------------------------------------------------------------------------- 1 | image{ 2 | width:75%; 3 | height:95vh; 4 | margin-left: 65px; 5 | margin-top: 18px; 6 | margin-right: 40px; 7 | } -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 200rpx 0; 9 | box-sizing: border-box; 10 | } 11 | 12 | page { 13 | background-color: #f8f8f8; 14 | } -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/autographinfo/autographinfo" 5 | ], 6 | "window": { 7 | "backgroundTextStyle": "light", 8 | "navigationBarBackgroundColor": "#f8f8f8", 9 | "navigationBarTitleText": "WeChat", 10 | "navigationBarTextStyle": "black" 11 | } 12 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | //因为没有后台接口，数据都存储在本地的，storage中signImage就是签名的图片 2 | 3 | //js 4 | onLoad: function (options) { 5 | this.handwriting = new Handwriting(this, { 6 | lineColor: this.data.lineColor, 7 | slideValue: this.data.slideValue, 8 | }) 9 | }, 10 | 11 | // 初始化需传入两个参数 12 | // lineColor 字体颜色 默认#1A1A1A 13 | // slideValue 字体粗细 默认50（内置 0，25，50, 75, 100 5档粗细） 14 | 15 | /** 16 | * example: 17 | * this.handwriting = new Handwriting(this, { 18 | lineColor: '#1A1A1A', 19 | slideValue: 50, 20 | }) 21 | */ 22 | 23 | // 两个内置函数 24 | this.handwriting.selectColorEvent(color); // 传入颜色参数 改变字体颜色 25 | this.handwriting.selectSlideValue(slideValue); // 传入粗细参数 0,25,50,75,100 改变字体粗细 26 | 27 | 28 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true 12 | }, 13 | "compileType": "miniprogram", 14 | "libVersion": "2.3.0", 15 | "appid": "wx0ea2cb5b1381cd83", 16 | "projectname": "%E6%89%8B%E5%86%99%E7%AD%BE%E5%90%8D", 17 | "debugOptions": { 18 | "hidedInDevtools": [] 19 | }, 20 | "isGameTourist": false, 21 | "condition": { 22 | "search": { 23 | "current": -1, 24 | "list": [] 25 | }, 26 | "conversation": { 27 | "current": -1, 28 | "list": [] 29 | }, 30 | "plugin": { 31 | "current": -1, 32 | "list": [] 33 | }, 34 | "game": { 35 | "currentL": -1, 36 | "list": [] 37 | }, 38 | "miniprogram": { 39 | "current": 0, 40 | "list": [ 41 | { 42 | "id": -1, 43 | "name": "index", 44 | "pathName": "pages/index/index", 45 | "scene": null 46 | } 47 | ] 48 | } 49 | } 50 | } -------------------------------------------------------------------------------- /pages/autographinfo/autographinfo.js: -------------------------------------------------------------------------------- 1 | // pages/autographinfo/autographinfo.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | info:'' 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | var that = this 16 | 17 | wx.getStorage({ 18 | key: 'signImage', 19 | success: function(res) { 20 | console.log(res) 21 | that.setData({ 22 | info:res.data 23 | }) 24 | }, 25 | }) 26 | }, 27 | 28 | /** 29 | * 生命周期函数--监听页面初次渲染完成 30 | */ 31 | onReady: function () { 32 | 33 | }, 34 | 35 | /** 36 | * 生命周期函数--监听页面显示 37 | */ 38 | onShow: function () { 39 | 40 | }, 41 | 42 | /** 43 | * 生命周期函数--监听页面隐藏 44 | */ 45 | onHide: function () { 46 | 47 | }, 48 | 49 | /** 50 | * 生命周期函数--监听页面卸载 51 | */ 52 | onUnload: function () { 53 | 54 | }, 55 | 56 | /** 57 | * 页面相关事件处理函数--监听用户下拉动作 58 | */ 59 | onPullDownRefresh: function () { 60 | 61 | }, 62 | 63 | /** 64 | * 页面上拉触底事件的处理函数 65 | */ 66 | onReachBottom: function () { 67 | 68 | }, 69 | 70 | /** 71 | * 用户点击右上角分享 72 | */ 73 | onShareAppMessage: function () { 74 | 75 | } 76 | }) -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | // 展示本地存储能力 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | console.log(res); 13 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 14 | 15 | // 获取用户信息 16 | wx.getSetting({ 17 | success: res => { 18 | if (res.authSetting['scope.userInfo']) { 19 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 20 | wx.getUserInfo({ 21 | success: res => { 22 | // 可以将 res 发送给后台解码出 unionId 23 | this.globalData.userInfo = res.userInfo 24 | wx.setStorageSync("avatar", res.userInfo.avatarUrl); 25 | wx.setStorageSync("nickname", res.userInfo.nickName); 26 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 27 | // 所以此处加入 callback 以防止这种情况 28 | if (this.userInfoReadyCallback) { 29 | this.userInfoReadyCallback(res) 30 | } 31 | } 32 | }) 33 | if (this.loginCallback) { 34 | this.loginCallback(res) 35 | } 36 | } 37 | } 38 | }) 39 | } 40 | }) 41 | }, 42 | globalData: { 43 | userInfo: null 44 | } 45 | }) -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | 13 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 手写板 26 | 27 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | background: #fbfbfb; 3 | height: auto; 4 | overflow: hidden; 5 | } 6 | 7 | .wrapper { 8 | width: 100%; 9 | height: 95vh; 10 | margin: 30rpx 0; 11 | overflow: hidden; 12 | display: flex; 13 | align-content: center; 14 | flex-direction: row; 15 | justify-content: center; 16 | font-size: 28rpx; 17 | } 18 | 19 | .handWriting { 20 | background: #fff; 21 | width: 100%; 22 | height: 95vh; 23 | } 24 | 25 | .handRight { 26 | display: inline-flex; 27 | align-items: center; 28 | } 29 | 30 | .handCenter { 31 | border: 4rpx dashed #e9e9e9; 32 | flex: 5; 33 | overflow: hidden; 34 | box-sizing: border-box; 35 | } 36 | 37 | .handTitle { 38 | transform: rotate(90deg); 39 | flex: 1; 40 | color: #666; 41 | } 42 | 43 | .handBtn button { 44 | font-size: 28rpx; 45 | } 46 | 47 | .handBtn { 48 | height: 95vh; 49 | display: inline-flex; 50 | flex-direction: column; 51 | justify-content: space-between; 52 | align-content: space-between; 53 | flex: 1; 54 | } 55 | 56 | .delBtn { 57 | position: absolute; 58 | top: 640rpx; 59 | left: 0rpx; 60 | transform: rotate(90deg); 61 | color: #666; 62 | } 63 | 64 | .delBtn image { 65 | position: absolute; 66 | top: 13rpx; 67 | left: 25rpx; 68 | } 69 | 70 | .subBtn { 71 | position: absolute; 72 | bottom: 52rpx; 73 | left: -3rpx; 74 | display: inline-flex; 75 | transform: rotate(90deg); 76 | background: #008ef6; 77 | color: #fff; 78 | margin-bottom: 350rpx; 79 | text-align: center; 80 | justify-content: center; 81 | } 82 | .subShowBtn{ 83 | margin-bottom: 150rpx; 84 | } 85 | 86 | .black-select { 87 | width: 60rpx; 88 | height: 60rpx; 89 | position: absolute; 90 | top: 330rpx; 91 | left: 25rpx; 92 | } 93 | .black-select.color_select { 94 | width: 90rpx; 95 | height: 90rpx; 96 | top: 320rpx; 97 | left: 10rpx; 98 | } 99 | .red-select { 100 | width: 60rpx; 101 | height: 60rpx; 102 | position: absolute; 103 | top:440rpx; 104 | left:25rpx; 105 | } 106 | .red-select.color_select { 107 | width: 90rpx; 108 | height: 90rpx; 109 | top: 420rpx; 110 | left: 10rpx; 111 | } 112 | .slide-wrapper { 113 | width: 250rpx; 114 | height: 30rpx; 115 | transform: rotate(90deg); 116 | position: absolute; 117 | top: 160rpx; 118 | left: -75rpx; 119 | } 120 | .drop { 121 | width: 50rpx; 122 | height: 50rpx; 123 | border-radius: 50%; 124 | background: #FFF; 125 | position: absolute; 126 | left: 0rpx; 127 | top: -10rpx; 128 | box-shadow: 0px 1px 5px #888888; 129 | } 130 | 131 | .slide { 132 | width: 250rpx; 133 | height: 30rpx; 134 | } -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | 2 | Page({ 3 | // 内置数据 4 | canvasName: 'handWriting', 5 | ctx: '', 6 | canvasWidth: 0, 7 | canvasHeight: 0, 8 | linePrack: [], //划线轨迹 , 生成线条的实际点 9 | currentLine: [], 10 | transparent: 1, // 透明度 11 | pressure: 0.5, // 默认压力 12 | smoothness: 100, //顺滑度，用60的距离来计算速度 13 | lineSize: 1.5, // 笔记倍数 14 | lineMin: 0.5, // 最小笔画半径 15 | lineMax: 2, // 最大笔画半径 16 | currentPoint: {}, 17 | firstTouch: true, // 第一次触发 18 | radius: 1, //画圆的半径 19 | cutArea: { top: 0, right: 0, bottom: 0, left: 0 }, //裁剪区域 20 | lastPoint: 0, 21 | chirography: [], //笔迹 22 | startY: 0, 23 | deltaY: 0, 24 | startValue: 0, 25 | 26 | // 视图数据 27 | data: { 28 | selectColor: 'black', 29 | lineColor: '#1A1A1A', // 颜色 30 | slideValue: 70, 31 | 32 | // 用来保存图片的变量 33 | signImage:'', 34 | }, 35 | // 笔迹开始 36 | uploadScaleStart (e) { 37 | console.log(e.touches[0]) 38 | if (e.type != 'touchstart') return false; 39 | this.ctx.setFillStyle(this.data.lineColor); // 初始线条设置颜色 40 | this.ctx.setGlobalAlpha(this.transparent); // 设置半透明 41 | this.currentPoint = { 42 | x: e.touches[0].x, 43 | y: e.touches[0].y 44 | } 45 | this.currentLine.unshift({ 46 | time: new Date().getTime(), 47 | dis: 0, 48 | x: this.currentPoint.x, 49 | y: this.currentPoint.y 50 | }) 51 | if (this.data.firstTouch) { 52 | this.cutArea = { top: this.currentPoint.y, right: this.currentPoint.x, bottom: this.currentPoint.y, left: this.currentPoint.x } 53 | this.firstTouch = false 54 | } 55 | this.pointToLine(this.currentLine); 56 | }, 57 | // 笔迹移动 58 | uploadScaleMove (e) { 59 | if (e.type != 'touchmove') return false; 60 | if (e.cancelable) { 61 | // 判断默认行为是否已经被禁用 62 | if (!e.defaultPrevented) { 63 | e.preventDefault(); 64 | } 65 | } 66 | let point = { 67 | x: e.touches[0].x, 68 | y: e.touches[0].y 69 | } 70 | //测试裁剪 71 | if (point.y < this.cutArea.top) { 72 | this.cutArea.top = point.y; 73 | } 74 | if (point.y < 0) this.cutArea.top = 0; 75 | 76 | if (point.x > this.cutArea.right) { 77 | this.cutArea.right = point.x; 78 | } 79 | if (this.canvasWidth - point.x <= 0) { 80 | this.cutArea.right = this.canvasWidth; 81 | } 82 | if (point.y > this.cutArea.bottom) { 83 | this.cutArea.bottom = point.y; 84 | } 85 | if (this.canvasHeight - point.y <= 0) { 86 | this.cutArea.bottom = this.canvasHeight; 87 | } 88 | if (point.x < this.cutArea.left) { 89 | this.cutArea.left = point.x; 90 | } 91 | if (point.x < 0) this.cutArea.left = 0; 92 | 93 | this.lastPoint = this.currentPoint; 94 | this.currentPoint = point 95 | this.currentLine.unshift({ 96 | time: new Date().getTime(), 97 | dis: this.distance(this.currentPoint, this.lastPoint, 'move'), 98 | x: point.x, 99 | y: point.y 100 | }) 101 | this.pointToLine(this.currentLine); 102 | }, 103 | // 笔迹结束 104 | uploadScaleEnd (e) { 105 | if (e.type != 'touchend') return 0; 106 | let point = { 107 | x: e.changedTouches[0].x, 108 | y: e.changedTouches[0].y 109 | } 110 | this.lastPoint = this.currentPoint; 111 | this.currentPoint = point 112 | this.currentLine.unshift({ 113 | time: new Date().getTime(), 114 | dis: this.distance(this.currentPoint, this.lastPoint, 'end'), 115 | x: point.x, 116 | y: point.y 117 | }) 118 | if (this.currentLine.length > 2) { 119 | var info = (this.currentLine[0].time - this.currentLine[this.currentLine.length - 1].time) / this.currentLine.length; 120 | //$("#info").text(info.toFixed(2)); 121 | } 122 | //一笔结束，保存笔迹的坐标点，清空，当前笔迹 123 | //增加判断是否在手写区域； 124 | this.pointToLine(this.currentLine); 125 | var currentChirography = { 126 | lineSize: this.lineSize, 127 | lineColor: this.lineColor 128 | }; 129 | this.chirography.unshift(currentChirography); 130 | this.linePrack.unshift(this.currentLine); 131 | this.currentLine = [] 132 | }, 133 | onLoad () { 134 | this.ctx = wx.createCanvasContext(this.canvasName) 135 | var query = wx.createSelectorQuery(); 136 | query.select('.handCenter').boundingClientRect(rect => { 137 | console.log(rect) 138 | this.canvasWidth = rect.width; 139 | this.canvasHeight = rect.height; 140 | }).exec(); 141 | }, 142 | // 重写 143 | retDraw () { 144 | // console.log(this.ctx) 145 | this.ctx.clearRect(0, 0, 700, 730) 146 | this.ctx.draw() 147 | }, 148 | 149 | //画两点之间的线条；参数为:line，会绘制最近的开始的两个点； 150 | pointToLine (line) { 151 | this.calcBethelLine(line); 152 | // this.calcBethelLine1(line); 153 | return; 154 | }, 155 | //计算插值的方式； 156 | calcBethelLine (line) { 157 | if (line.length <= 1) { 158 | line[0].r = this.radius; 159 | return; 160 | } 161 | let x0, x1, x2, y0, y1, y2, r0, r1, r2, len, lastRadius, dis = 0, time = 0, curveValue = 0.5; 162 | if (line.length <= 2) { 163 | x0 = line[1].x 164 | y0 = line[1].y 165 | x2 = line[1].x + (line[0].x - line[1].x) * curveValue; 166 | y2 = line[1].y + (line[0].y - line[1].y) * curveValue; 167 | //x2 = line[1].x; 168 | //y2 = line[1].y; 169 | x1 = x0 + (x2 - x0) * curveValue; 170 | y1 = y0 + (y2 - y0) * curveValue;; 171 | 172 | } else { 173 | x0 = line[2].x + (line[1].x - line[2].x) * curveValue; 174 | y0 = line[2].y + (line[1].y - line[2].y) * curveValue; 175 | x1 = line[1].x; 176 | y1 = line[1].y; 177 | x2 = x1 + (line[0].x - x1) * curveValue; 178 | y2 = y1 + (line[0].y - y1) * curveValue; 179 | } 180 | //从计算公式看，三个点分别是(x0,y0),(x1,y1),(x2,y2) ；(x1,y1)这个是控制点，控制点不会落在曲线上；实际上，这个点还会手写获取的实际点，却落在曲线上 181 | len = this.distance({ x: x2, y: y2 }, { x: x0, y: y0 }, 'calc'); 182 | lastRadius = this.radius; 183 | for (let n = 0; n < line.length - 1; n++) { 184 | dis += line[n].dis; 185 | time += line[n].time - line[n + 1].time; 186 | if (dis > this.smoothness) break; 187 | } 188 | this.radius = Math.min(time / len * this.pressure + this.lineMin, this.lineMax) * this.lineSize 189 | line[0].r = this.radius; 190 | //计算笔迹半径； 191 | if (line.length <= 2) { 192 | r0 = (lastRadius + this.radius) / 2; 193 | r1 = r0; 194 | r2 = r1; 195 | //return; 196 | } else { 197 | r0 = (line[2].r + line[1].r) / 2; 198 | r1 = line[1].r; 199 | r2 = (line[1].r + line[0].r) / 2; 200 | } 201 | let n = 5; 202 | let point = []; 203 | for (let i = 0; i < n; i++) { 204 | let t = i / (n - 1); 205 | let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2; 206 | let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2; 207 | let r = lastRadius + (this.radius - lastRadius) / n * i; 208 | point.push({ x: x, y: y, r: r }); 209 | if (point.length == 3) { 210 | let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[2].x, point[2].y, point[2].r); 211 | a[0].color = this.data.lineColor; 212 | this.bethelDraw(a, 1); 213 | point = [{ x: x, y: y, r: r }]; 214 | } 215 | } 216 | }, 217 | //求两点之间距离 218 | distance (a, b, type) { 219 | let x = b.x - a.x; 220 | let y = b.y - a.y; 221 | return Math.sqrt(x * x + y * y) * 5; 222 | }, 223 | ctaCalc (x0, y0, r0, x1, y1, r1, x2, y2, r2) { 224 | let a = [], vx01, vy01, norm, n_x0, n_y0, vx21, vy21, n_x2, n_y2; 225 | vx01 = x1 - x0; 226 | vy01 = y1 - y0; 227 | norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2; 228 | vx01 = vx01 / norm * r0; 229 | vy01 = vy01 / norm * r0; 230 | n_x0 = vy01; 231 | n_y0 = -vx01; 232 | vx21 = x1 - x2; 233 | vy21 = y1 - y2; 234 | norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2; 235 | vx21 = vx21 / norm * r2; 236 | vy21 = vy21 / norm * r2; 237 | n_x2 = -vy21; 238 | n_y2 = vx21; 239 | a.push({ mx: x0 + n_x0, my: y0 + n_y0, color: "#1A1A1A" }); 240 | a.push({ c1x: x1 + n_x0, c1y: y1 + n_y0, c2x: x1 + n_x2, c2y: y1 + n_y2, ex: x2 + n_x2, ey: y2 + n_y2 }); 241 | a.push({ c1x: x2 + n_x2 - vx21, c1y: y2 + n_y2 - vy21, c2x: x2 - n_x2 - vx21, c2y: y2 - n_y2 - vy21, ex: x2 - n_x2, ey: y2 - n_y2 }); 242 | a.push({ c1x: x1 - n_x2, c1y: y1 - n_y2, c2x: x1 - n_x0, c2y: y1 - n_y0, ex: x0 - n_x0, ey: y0 - n_y0 }); 243 | a.push({ c1x: x0 - n_x0 - vx01, c1y: y0 - n_y0 - vy01, c2x: x0 + n_x0 - vx01, c2y: y0 + n_y0 - vy01, ex: x0 + n_x0, ey: y0 + n_y0 }); 244 | a[0].mx = a[0].mx.toFixed(1); 245 | a[0].mx = parseFloat(a[0].mx); 246 | a[0].my = a[0].my.toFixed(1); 247 | a[0].my = parseFloat(a[0].my); 248 | for (let i = 1; i < a.length; i++) { 249 | a[i].c1x = a[i].c1x.toFixed(1); 250 | a[i].c1x = parseFloat(a[i].c1x); 251 | a[i].c1y = a[i].c1y.toFixed(1); 252 | a[i].c1y = parseFloat(a[i].c1y); 253 | a[i].c2x = a[i].c2x.toFixed(1); 254 | a[i].c2x = parseFloat(a[i].c2x); 255 | a[i].c2y = a[i].c2y.toFixed(1); 256 | a[i].c2y = parseFloat(a[i].c2y); 257 | a[i].ex = a[i].ex.toFixed(1); 258 | a[i].ex = parseFloat(a[i].ex); 259 | a[i].ey = a[i].ey.toFixed(1); 260 | a[i].ey = parseFloat(a[i].ey); 261 | } 262 | return a; 263 | }, 264 | bethelDraw (point, is_fill, color) { 265 | this.ctx.beginPath(); 266 | this.ctx.moveTo(point[0].mx, point[0].my); 267 | if (undefined != color) { 268 | this.ctx.setFillStyle(color); 269 | this.ctx.setStrokeStyle(color); 270 | } else { 271 | this.ctx.setFillStyle(point[0].color); 272 | this.ctx.setStrokeStyle(point[0].color); 273 | } 274 | for (let i = 1; i < point.length; i++) { 275 | this.ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey); 276 | } 277 | this.ctx.stroke(); 278 | if (undefined != is_fill) { 279 | this.ctx.fill(); //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 ) 280 | } 281 | this.ctx.draw(true) 282 | }, 283 | // 选择画笔颜色 284 | selectColorEvent (event) { 285 | var color = event.currentTarget.dataset.colorValue; 286 | var colorSelected = event.currentTarget.dataset.color; 287 | this.setData({ 288 | selectColor: colorSelected, 289 | lineColor: color 290 | }) 291 | }, 292 | // 笔迹粗细滑块 293 | onTouchStart (event) { 294 | this.startY = event.touches[0].clientY; 295 | this.startValue = this.format(this.data.slideValue) 296 | }, 297 | onTouchMove (event) { 298 | const touch = event.touches[0]; 299 | this.deltaY = touch.clientY - this.startY; 300 | this.updateValue(this.startValue + this.deltaY); 301 | }, 302 | onTouchEnd () { 303 | this.updateValue(this.data.slideValue, true); 304 | switch (this.data.slideValue) { 305 | case 0: 306 | this.lineSize = 0.1; 307 | this.lineMin = 0.1; 308 | this.lineMax = 0.1; 309 | break; 310 | case 25: 311 | this.lineSize = 1; 312 | this.lineMin = 0.5; 313 | this.lineMax = 2; 314 | break; 315 | case 50: 316 | this.lineSize = 1.5; 317 | this.lineMin = 1; 318 | this.lineMax = 3; 319 | break; 320 | case 75: 321 | this.lineSize = 1.5; 322 | this.lineMin = 2; 323 | this.lineMax = 3.5; 324 | break; 325 | case 100: 326 | this.lineSize = 3; 327 | this.lineMin = 2; 328 | this.lineMax = 3.5; 329 | break; 330 | } 331 | }, 332 | updateValue (slideValue, end) { 333 | slideValue = this.format(slideValue); 334 | this.setData({ 335 | slideValue, 336 | }); 337 | }, 338 | format (value) { 339 | return Math.round(Math.max(0, Math.min(value, 100)) / 25) * 25; 340 | }, 341 | 342 | // 完成保存图片 343 | // subCanvas: function () { 344 | // var that = this 345 | // wx.canvasToTempFilePath({ 346 | // fileType:'png', 347 | // quality:1.0, 348 | // canvasId: "handWriting", 349 | // success: function (res) { 350 | // //打印图片路径 351 | // console.log(res.tempFilePath) 352 | // //设置保存的图片 353 | // that.setData({ 354 | // signImage: res.tempFilePath 355 | // }) 356 | // wx.setStorage({ 357 | // key: 'signImage', 358 | // data: res.tempFilePath, 359 | // }) 360 | // } 361 | // }) 362 | // }, 363 | 364 | // 展示图片 365 | showCanvas:function(){ 366 | var that = this 367 | wx.canvasToTempFilePath({ 368 | fileType: 'png', 369 | quality: 1.0, 370 | canvasId: "handWriting", 371 | success: function (res) { 372 | //打印图片路径 373 | console.log(res.tempFilePath) 374 | //设置保存的图片 375 | that.setData({ 376 | signImage: res.tempFilePath 377 | }) 378 | wx.setStorage({ 379 | key: 'signImage', 380 | data: res.tempFilePath, 381 | }) 382 | 383 | wx.navigateTo({ 384 | url: '../autographinfo/autographinfo', 385 | }) 386 | 387 | // 查看的时候清除痕迹 388 | that.ctx.clearRect(0, 0, 700, 730) 389 | that.ctx.draw() 390 | } 391 | }) 392 | 393 | } 394 | }) --------------------------------------------------------------------------------