先上效果圖，不滿意可以直接關(guān)閉這頁(yè)簽

---

新建成單獨(dú)的組件，然后具體功能引入，具體功能點(diǎn)擊簽名按鈕，把當(dāng)前功能頁(yè)面用樣式隱藏掉，v-show和v-if也行，然后再把這個(gè)組件顯示出來(lái)。

---

【簽名-撤銷(xiāo)】原理是之前繪畫(huà)時(shí)把全部軌跡路徑都記錄下來(lái)，然后點(diǎn)擊撤銷(xiāo)時(shí)，清空畫(huà)布，路徑數(shù)組去掉最后一次繪畫(huà)動(dòng)作，然后再把剩余路徑又全部畫(huà)上去，這么干后會(huì)路徑會(huì)出現(xiàn)鋸齒，我也莫得辦法了，將就著用了。

---

【簽名-完成】點(diǎn)擊完成會(huì)判斷路徑數(shù)組是否有值，如果沒(méi)有則說(shuō)明沒(méi)有簽名，有則把畫(huà)布保存成圖片，然后再把這個(gè)圖片以指定尺寸畫(huà)入另一個(gè)畫(huà)布，避免保存下來(lái)的圖片分辨率過(guò)大，導(dǎo)致文件太大。畫(huà)上另一個(gè)畫(huà)布之后，這個(gè)畫(huà)布再保存成圖片，然后圖片再轉(zhuǎn)成base64格式返回給主頁(yè)面，要是不想轉(zhuǎn)base64可以把具體代碼去掉。生成的圖片是垂直，應(yīng)該以逆時(shí)針旋轉(zhuǎn)90度保存的，奈何前端實(shí)力不過(guò)關(guān)，怎么都處理不好這個(gè)逆時(shí)針旋轉(zhuǎn)90度，只能在上傳到后端后，用后端旋轉(zhuǎn)了（丟人）.........如果有人能處理好這個(gè)，麻煩評(píng)論留下代碼

---

主頁(yè)面引入組件并注冊(cè)，然后用v-show控制是否顯示，主頁(yè)面樣式自己調(diào)整好，讓電子簽名可以覆蓋整個(gè)頁(yè)面。

---

[具體組件代碼]

<template><view class="panel" :style="{top: `${top}px`}"><canvas canvas-id="signCanvas" class="sign-canvas" @touchstart="handleTouchStart"@touchmove="handleTouchMove" @touchend="handleTouchEnd"></canvas><!-- 另一個(gè)畫(huà)布，用來(lái)縮小簽名圖片尺寸的，加個(gè)樣式讓他飛到外太空去 --><canvas canvas-id="signCanvasReduce" class="sign-canvas-reduce"></canvas><view class="panel-bottom"><view class="panel-bottom-btn btn-gray" @click="onCancel">取消</view><view class="panel-bottom-btn btn-gray" @click="onUndo">撤銷(xiāo)</view><view class="panel-bottom-btn btn-gray" @click="onClearRect(true)">重寫(xiě)</view><view class="panel-bottom-btn" @click="onSaveSign">完成</view></view></view>
</template><script>export default {data() {return {// 距離頂部高度top: void (0),isDrawing: false,startX: 0,startY: 0,strokes: [],canvasWidth: 0,canvasHeight: 0}},mounted() {// 獲取手機(jī)狀態(tài)欄和導(dǎo)航欄高度，和手機(jī)屏幕可用寬高度const _this = thisuni.getSystemInfo({success: function(res) {_this.canvasWidth = res.windowWidth_this.canvasHeight = res.windowHeightconst custom = uni.getMenuButtonBoundingClientRect()// 導(dǎo)航欄膠囊高度 + (膠囊距離頂部高度 - 狀態(tài)欄高度) * 2 + 狀態(tài)欄高度 + 20內(nèi)邊距_this.top = custom.height + (custom.top - res.statusBarHeight) * 2 + res.statusBarHeight + 4}})// 創(chuàng)建畫(huà)布const ctx = uni.createCanvasContext('signCanvas', this)ctx.setStrokeStyle('#000')ctx.setLineWidth(4)ctx.setLineCap('round')ctx.setLineJoin('round')ctx.draw()this.canvasContext = ctx},methods: {handleTouchStart(e) {// 阻止默認(rèn)滾動(dòng)行為e.preventDefault()const touch = e.touches[0]this.isDrawing = truethis.startX = touch.xthis.startY = touch.ythis.strokes.push({type: 'start',x: touch.x,y: touch.y})},handleTouchMove(e) {e.preventDefault() // 阻止默認(rèn)滾動(dòng)行為if (!this.isDrawing) {return}const touch = e.touches[0]this.canvasContext.moveTo(this.startX, this.startY)this.canvasContext.lineTo(touch.x, touch.y)this.canvasContext.stroke()this.canvasContext.draw(true)this.startX = touch.xthis.startY = touch.ythis.strokes.push({type: 'move',x: touch.x,y: touch.y})},handleTouchEnd(e) {e.preventDefault() // 阻止默認(rèn)滾動(dòng)行為this.isDrawing = false},// 撤銷(xiāo)onUndo () {// 先清空當(dāng)前畫(huà)布this.onClearRect(false)if (this.strokes.length) {// 去掉最后一次繪畫(huà)的路徑while (this.strokes.pop().type !== 'start'){}// 剩余路徑全部繪制到畫(huà)布上for (let i = 0; i < this.strokes.length; i++) {const item = this.strokes[i]if(item.type === 'start') {// 繪制起始點(diǎn)this.canvasContext.beginPath()this.canvasContext.moveTo(item.x, item.y)} else if(item.type === 'move') {// 繪制線條this.canvasContext.lineTo(item.x, item.y)this.canvasContext.stroke()}}this.canvasContext.draw(true)}},// 清空onClearRect (clearLine) {this.canvasContext.clearRect(0, 0, this.canvasWidth, this.canvasHeight)this.canvasContext.draw(true)clearLine && (this.strokes = [])},// 取消onCancel () {this.onClearRect(true)this.$emit('cancel')},// 保存簽名 signFlag 是否已簽名onSaveSign() {if (!this.strokes.length) {// 未簽名this.$emit('ok', { signFlag: false })return}// 簽名保存為圖片uni.canvasToTempFilePath({canvasId: 'signCanvas',quality: 0.1,success: (res) => {const tempPath = res.tempFilePath// 然后寫(xiě)入另一個(gè)畫(huà)布const signCanvas = uni.createCanvasContext('signCanvasReduce', this)signCanvas.translate(0, 0) // 修改原點(diǎn)坐標(biāo)（這里是已左上角為坐標(biāo)原點(diǎn)）signCanvas.drawImage(tempPath, 0, 0, 80, 160)signCanvas.draw(false, () => {setTimeout(() => {// 另一個(gè)畫(huà)布再保存為圖片，目的就是縮小圖片的尺寸uni.canvasToTempFilePath({canvasId: 'signCanvasReduce',quality: 0.2,success: (res) => {// 清空畫(huà)布this.onClearRect(true)// 轉(zhuǎn)成base64this.imagePathToBase64(res.tempFilePath).then(base64 => {this.$emit('ok', { base64, signFlag: true })})},fail: () => {// toast('生成簽名圖片失敗')}}, this)}, 200)})},fail: (res) => {// toast('生成簽名失敗')}}, this)},// 根據(jù)上傳后的圖片轉(zhuǎn)成Base64格式imagePathToBase64(url) {if (!url) {return url}return new Promise((resolve, reject) => {uni.getFileSystemManager().readFile({filePath: url,encoding: 'base64',success: fileRes => {const base64 = 'data:image/png;base64,' + fileRes.dataresolve(base64)},fail: err => {// toast('生成簽名失敗')resolve()}})})}}}
</script><style lang="scss" scoped>.panel {width: 100%;position: absolute;left: 0;bottom: 0;right: 0;top: 0;overflow-y: hidden;background-color: #FFF;}.sign-canvas {width: 100%;height: 85%;}.sign-canvas-reduce {width: 80px;height: 160px;position: absolute;top: -10000rpx;}.panel-bottom {height: 15%;display: flex;justify-content: center;padding-top: 50rpx;}.panel-bottom-btn {transform: rotate(90deg);height: 40rpx;padding: 14rpx 36rpx;font-size: 30rpx;border-radius: 20rpx;color: #FFF;background: linear-gradient(90deg, rgba(250, 197, 22, 1), rgba(255, 141, 26, 1));}.btn-gray {background: #d4d4d4;}
</style>
<style>page {overflow-y: hidden;}
</style>

---

繼續(xù)加班了.....

碼字不易，于你有利，勿忘點(diǎn)贊?

?