文章目錄

• • • • 一、效果:
      • 二、實(shí)現(xiàn):
      • 三、擴(kuò)展：

---

一、效果:

二、實(shí)現(xiàn):

<template><view class="signature"><canvas class="signature-canvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove"@touchend="touchend"></canvas><view class="signature-button"><button type="warn" @click="clear">重寫</button><button type="primary" @click="finish">保存</button></view></view> </template><script>export default {data() {return {ctx: '', //繪圖圖像points: [], //路徑點(diǎn)集合 signature: '', //簽名后臺圖片地址}},onLoad() {this.createCanvas()},methods: {//創(chuàng)建并顯示畫布createCanvas: function() {this.ctx = uni.createCanvasContext("mycanvas", this); //創(chuàng)建繪圖對象this.ctx.setStrokeStyle('red')//設(shè)置畫筆樣式this.ctx.lineWidth = 4;this.ctx.lineCap = "round"this.ctx.lineJoin = "round"},//觸摸開始，獲取到起點(diǎn)touchstart: function(e) {let startX = e.changedTouches[0].x;let startY = e.changedTouches[0].y;let startPoint = {X: startX,Y: startY};this.points.push(startPoint);//每次觸摸開始，開啟新的路徑this.ctx.beginPath();},//觸摸移動，獲取到路徑點(diǎn)touchmove: function(e) {let moveX = e.changedTouches[0].x;let moveY = e.changedTouches[0].y;let movePoint = {X: moveX,Y: moveY};this.points.push(movePoint); //存點(diǎn)let len = this.points.length;if (len >= 2) {this.draw(); //繪制路徑}},// 觸摸結(jié)束，將未繪制的點(diǎn)清空防止對后續(xù)路徑產(chǎn)生干擾touchend: function() {this.points = [];},/* ***********************************************# 繪制筆跡# 1.為保證筆跡實(shí)時顯示，必須在移動的同時繪制筆跡# 2.為保證筆跡連續(xù)，每次從路徑集合中區(qū)兩個點(diǎn)作為起點(diǎn)（moveTo）和終點(diǎn)(lineTo)# 3.將上一次的終點(diǎn)作為下一次繪制的起點(diǎn)（即清除第一個點(diǎn)）************************************************ */draw: function() {let point1 = this.points[0]let point2 = this.points[1]this.points.shift()this.ctx.moveTo(point1.X, point1.Y)this.ctx.lineTo(point2.X, point2.Y)this.ctx.stroke()this.ctx.draw(true)},//清空畫布clear: function() {let that = this;uni.getSystemInfo({success: function(res) {let canvasw = res.windowWidth;let canvash = res.windowHeight;that.ctx.clearRect(0, 0, canvasw, canvash);that.ctx.draw(true);},})},//完成繪畫并保存到本地finish: function() {let that = this;uni.canvasToTempFilePath({canvasId: 'mycanvas',success: function(res) {console.log(res)//上傳到服務(wù)器// that.api.uploadFile({// url: 'user/upload/one',// filePath: res.tempFilePath,// name: 'file',// success: (uploadFileRes) => {// console.log(uploadFileRes)// that.signature = uploadFileRes.data.url;// that.clear();// that.showCanvas = false;// }// })//保存到本地// let path = res.tempFilePath;// uni.saveImageToPhotosAlbum({// filePath: path,// success: function() {// uni.showToast({// title: "保存成功"// })// },// fail: function() {// uni.showToast({// title: "保存失敗"// })// }// })}})},}} </script><style lang="scss">.signature {padding: 0 10px;&-canvas {width: 100%;height: 360px;box-sizing: border-box;border: 1px solid lightgrey;}&-button {width: 100%;margin-top: 10px;display: flex;button {flex: 1;border-radius: 0 !important;}}} </style>

三、擴(kuò)展：

https://uniapp.dcloud.net.cn/api/canvas/CanvasContext.html

總結(jié)

以上是生活随笔為你收集整理的【uni-app】uni-app实现手写签名效果：的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。