微信小程序?qū)崿F(xiàn)簡單手寫簽名組件的方法實例
更新時間：2021年07月09日 14:27:09 作者：dawnlion
在使用微信的時候,為方便我們發(fā)送文件可以直接在上面進(jìn)行手寫簽名,這篇文章主要給大家介紹了關(guān)于利用微信小程序?qū)崿F(xiàn)簡單手寫簽名組件的相關(guān)資料,需要的朋友可以參考下
背景：
在做項目過程中，需要在微信小程序中實現(xiàn)手寫簽名組件。在網(wǎng)上找了微信小程序手寫簽名實現(xiàn)，但是都是不太理想。在實際運(yùn)用中，會因為實時計算較多的貝塞爾曲線而產(chǎn)生卡頓。效果不理想。所以退一步，不需要筆鋒以及筆跡模擬效果。只需要簡單的手寫簽名實現(xiàn)。
需求：
可以實現(xiàn)用戶在微信小程序上手寫簽名。
需要組件化。
效果
一、思路
在微信小程序中，我們使用canvas組件實現(xiàn)。將用戶的輸入想象成為一只筆。我們要畫的簽名是由很多點(diǎn)構(gòu)成的。但是單純的點(diǎn)是不能很好地構(gòu)成線。點(diǎn)與點(diǎn)之間還要由線連接。下面是實現(xiàn)過程代碼。
二、實現(xiàn)
1. 頁面與樣式
wxml
這里的canvas組件是最新的用法。
<view class="dashbox">
<view class="btnList">
<van-button size="small" bind:click="clearCanvas">清空</van-button>
</view>
<view class="handCenter">
<canvas
class="handWriting"
disable-scroll="{{true}}"
id="handWriting"
bindtouchstart="scaleStart"
bindtouchmove="scaleMove"
bindtouchend="scaleEnd"
bindtap="mouseDown"
type="2d"
>
</canvas>
</view>
</view>
wxss
.btnList{
width: 95%;
margin:0 auto;
}
.handWriting{
background: #fff;
width: 95%;
height: 80vh;
margin:0 auto
}
2. 初始化
由于是在自定義組件中使用，所以要注意獲取canvas的時候的this指向問題。如果不調(diào)用SelectorQuery的In方法，那么就在自定義組件獲取不到canvas，因為這個時候指向的父組件。
Component({
/**
* 組件的初始數(shù)據(jù)
*/
data: {
canvasName:'#handWriting',
ctx:'',
canvasWidth:0,
canvasHeight:0,
startPoint:{
x:0,
y:0,
},
selectColor: 'black',
lineColor: '#1A1A1A', // 顏色
lineSize: 1.5, // 筆記倍數(shù)
radius:5,//畫圓的半徑
},
ready(){
let canvasName = this.data.canvasName;
let query = wx.createSelectorQuery().in(this);//獲取自定義組件的SelectQuery對象
query.select(canvasName)
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
//獲取設(shè)備像素比
const dpr = wx.getSystemInfoSync().pixelRatio;
//縮放設(shè)置canvas畫布大小，防止筆跡錯位
canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
ctx.scale(dpr, dpr);
ctx.lineJoin="round";
this.setData({ctx});
});
query.select('.handCenter').boundingClientRect(rect => {
console.log('rect', rect);
this.setData({
canvasWidth:rect.width,
canvasHeight:rect.height
});
}).exec();
},
//省略以下代碼......
});
3. 點(diǎn)擊時
Component({
//省略以上代碼...
methods: {
scaleStart(event){
if (event.type != 'touchstart') return false;
let currentPoint = {
x: event.touches[0].x,
y: event.touches[0].y
}
this.drawCircle(currentPoint);
this.setData({startPoint:currentPoint});
},
drawCircle(point){//這里負(fù)責(zé)點(diǎn)
let ctx = this.data.ctx;
ctx.beginPath();
ctx.fillStyle = this.data.lineColor;
//筆跡粗細(xì)由圓的大小決定
ctx.arc(point.x, point.y, this.data.radius, 0 , 2 * Math.PI);
ctx.fill();
ctx.closePath();
},
//省略以下代碼...
}
})
4. 簽名時
Component({
//省略以上代碼
methods:{
drawLine(sourcePoint, targetPoint){
let ctx = this.data.ctx;
this.drawCircle(targetPoint);
ctx.beginPath();
ctx.strokeStyle = this.data.lineColor;
ctx.lineWidth = this.data.radius * 2;//這里乘2是因為線條的粗細(xì)要和圓的直徑相等
ctx.moveTo(sourcePoint.x, sourcePoint.y);
ctx.lineTo(targetPoint.x, targetPoint.y);
ctx.stroke();
ctx.closePath();
},
clearCanvas(){//清空畫布
let ctx = this.data.ctx;
ctx.rect(0, 0, this.data.canvasWidth, this.data.canvasHeight);
ctx.fillStyle = '#FFFFFF';
ctx.fill();
}
}
})
三、總結(jié)
這個手寫簽名僅僅是為了業(yè)務(wù)應(yīng)急使用。如果要優(yōu)化的話，可以從筆鋒模擬和筆跡模擬中入手。只不過要解決在實時模擬過程中卡頓的問題。
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)簡單手寫簽名組件的文章就介紹到這了,更多相關(guān)微信小程序手寫簽名組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序綁定手機(jī)號獲取驗證碼功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
這篇文章主要為大家詳細(xì)介紹了js canvas實現(xiàn)滑塊驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
JavaScript判斷變量是否為數(shù)組的方法(Array)
這篇文章主要介紹了JavaScript判斷變量是否為數(shù)組的方法(Array),涉及到j(luò)avascript 數(shù)組 變量相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
js中,new Date([params]),參數(shù)傳遞有五種方式,本文給大家講解的非常詳細(xì),對new Date()參數(shù)相關(guān)知識感興趣的朋友跟隨小編一起看看吧2023-11-11
無論是代碼高亮還是語法高亮對整個程序來說都非常重要，可以給人眼前一亮的感覺，增加用戶體驗度，下面通過本文給大家介紹2016年最熱門的Javascript代碼高亮顯示腳本及代碼語法高亮工具，對js代碼高亮，代碼語法高亮相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
JS正則表達(dá)式常見函數(shù)與用法小結(jié)
這篇文章主要介紹了JS正則表達(dá)式常見函數(shù)與用法,結(jié)合實例形式分析了JS正則表達(dá)式基本功能、常見函數(shù)與相關(guān)使用技巧,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了JavaScript繼承與聚合,結(jié)合實例形式較為詳細(xì)的分析了javascript實現(xiàn)繼承與聚合的相關(guān)概念、原理與操作技巧,需要的朋友可以參考下2019-01-01
本文主要介紹了javascript的異步編程相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了javascript中from 表單序列化提交的實現(xiàn)方法，代碼簡單易懂，非常不錯，需要的朋友參考下吧2017-01-01
js獲取當(dāng)前年月日-YYYYmmDD格式的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨s獲取當(dāng)前年月日-YYYYmmDD格式的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06