微信小程序?qū)崿F(xiàn)手寫簽名

更新時(shí)間：2022年07月08日 08:39:26 作者：KabunM

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手寫簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)手寫簽名的具體代碼，供大家參考，具體內(nèi)容如下

本示例具備的功能：

1、筆跡繪制

2、筆跡清空

以下是js代碼：

var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
var that = null;
?
Page({
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ??
? },
? // 畫布的觸摸移動(dòng)開始手勢(shì)響應(yīng)
? start: function(event) {
? ? // console.log("觸摸開始" + event.changedTouches[0].y)
? ? // console.log("觸摸開始" + event.changedTouches[0].x)
? ? //獲取觸摸開始的 x,y
? ? let point = {
? ? ? x: event.changedTouches[0].y,
? ? ? y: event.changedTouches[0].x
? ? }
? ? touchs.push(point)
? },
?
? // 畫布的觸摸移動(dòng)手勢(shì)響應(yīng)
? move: function(e) {
? ? let point = {
? ? ? x: e.touches[0].y,
? ? ? y: e.touches[0].x
? ? }
? ? touchs.push(point)
? ? if (touchs.length >= 2) {
? ? ? this.draw(touchs)
? ? }
? },
?
? // 畫布的觸摸移動(dòng)結(jié)束手勢(shì)響應(yīng)
? end: function(e) {
? ? // console.log("觸摸結(jié)束" + e)
? ? //清空軌跡數(shù)組
? ? for (let i = 0; i < touchs.length; i++) {
? ? ? touchs.pop()
? ? }
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
? ?*/
? onLoad: function(options) {
? ? that = this
? ? //獲得Canvas的上下文
? ? content = wx.createCanvasContext('firstCanvas')
? ? //設(shè)置線的顏色
? ? content.setStrokeStyle("#000")
? ? //設(shè)置線的寬度
? ? content.setLineWidth(5)
? ? //設(shè)置線兩端端點(diǎn)樣式更加圓潤(rùn)
? ? content.setLineCap('round')
? ? //設(shè)置兩條線連接處更加圓潤(rùn)
? ? content.setLineJoin('round')
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
? ?*/
? onReady: function() {
?
? ? // 獲取畫布尺寸
? ? var query = wx.createSelectorQuery()
? ? query.select('#canvas').boundingClientRect()
? ? query.exec(function(res) {
? ? ? canvasw = res[0].width;
? ? ? canvash = res[0].height
? ? })
? },
?
? //繪制
? draw: function(touchs) {
? ? let point1 = touchs[0]
? ? let point2 = touchs[1]
? ? touchs.shift()
? ? content.moveTo(point1.y, point1.x)
? ? content.lineTo(point2.y, point2.x)
? ? content.stroke()
? ? content.draw(true)
? },
? //清除操作
? clearClick: function() {
? ? //清除畫布
? ? content.clearRect(0, 0, canvasw, canvash)
? ? content.draw(true)
? },
? //保存圖片
? saveClick: function() {
? ? var that = this
? ? wx.canvasToTempFilePath({
? ? ? canvasId: 'firstCanvas',
? ? ? success: function(res) {
? ? ? ? //打印圖片路徑
? ? ? ? var path = res.tempFilePath
? ? ? ? //上傳圖片
? ? ? ? that.uploadSignPic(path)
? ? ? ? console.log(path)
?
?
? ? ? }
? ? })
? },
?
?
? /**
? ?* 上傳簽名圖片
? ?*/
? uploadSignPic: function(path) {
? ? ? //具體實(shí)現(xiàn)的業(yè)務(wù)邏輯
? }
?
})

以下是wxml代碼：

<!-- 手寫界面 -->
<view class='hand_writing_container'>
? <view class="tips_title">請(qǐng)?jiān)趨^(qū)域內(nèi)進(jìn)行簽名</view>
? <view id="canvas" class="canvas">
? ? <canvas class='firstCanvas'?
? ? canvas-id="firstCanvas"?
? ? bindtouchmove='move'?
? ? bindtouchstart='start'?
? ? bindtouchend='end'?
? ? disable-scroll='true' >
? ? </canvas>
? </view>
? <view class="btn_container">
? ? <view class="btn clean" bindtap="clearClick">
? ? ? <image src="/image/clear.png"></image>
? ? ? <text>內(nèi)容清除</text>
? ? </view>
? ? <view class="btn submit" bindtap="saveClick">
? ? ? <image src="/image/submit.png"></image>
? ? ? <text>確認(rèn)提交</text>
? ? </view>
? </view>
</view>

以下是樣式代碼：

.hand_writing_container {
? width: 100%;
? padding: 5.503vh 8.1761vh 0;
? box-sizing: border-box;
}
?
.tips_title {
? height: 4.72vh;
? line-height: 4.72vh;
? margin-bottom: 3.459vh;
? font-size: 4.71698vh;
? font-family: Source Han Sans CN;
? font-weight: 500;
? color: rgba(45, 45, 45, 1);
}
?
.canvas {
? width: 100%;
? height: 66.194968vh;
? margin-bottom: 3.7735849vh;
? box-sizing: border-box;
? border: 1rpx dashed black;
}
?
.firstCanvas {
? background-color: white;
? width: 100%;
? height: 100%;
}
?
.btn_container {
? display: flex;
? align-items: center;
? padding: 0 45.44vh;
? box-sizing: border-box;
? justify-content: space-between;
}
?
.btn {
? width: 45.597484vh;
? height: 13.83647798vh;
? padding: 0 11vh;
? box-sizing: border-box;
? border-radius: 1.572327vh;
? display: flex;
? justify-content: space-between;
? align-items: center;
}
?
.btn image {
? flex: 0 0 4.71698vh;
? width: 4.71698vh;
? height: 4.71698vh;
? display: block;
? margin-right: 1.88679vh;
}
?
.btn text {
? flex: 0 0 auto;
? height: 4.717vh;
? line-height: 4.717vh;
? font-size: 4.71698vh;
? font-family: Source Han Sans CN;
? font-weight: 400;
? color: rgba(255, 255, 255, 1);
}
?
.clean {
? background-color: #07c160;
}
?
.submit {
? background-color: #ff3d33;
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: