快捷導(dǎo)航

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

更新時(shí)間：2022年07月08日 11:03:39 作者：工具人小胡

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

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

公司近期有個(gè)需要用戶簽名的功能，就用小程序canvas寫(xiě)了個(gè)

wxml

<view class="sign">
? <view class="paper">
? ? <canvas class="handWriting" disable-scroll="true" bindtouchstart="touchstart1" bindtouchmove="touchmove1" ?canvas-id="handWriting1">
? ? </canvas>
? </view>
? <view class="signBtn">
? ? <button size="" type="primary" bindtap="sign1ok">完成簽字</button>?
? ? <button size="" type="warn" bindtap="reSign1">重新簽字</button>
? </view>
</view>
<view class="image" hidden="{{src?false:true}}">
<image src="{{src}}" ></image>
</view>

js

Page({
? data: {
? ? context1: null,
? ? hasDraw:false, //默認(rèn)沒(méi)有畫(huà)
? ? src:null
? },
? onLoad: function() {
? ? var context1 = wx.createCanvasContext('handWriting1');
? ? context1.setStrokeStyle("#000000")
? ? context1.setLineWidth(3);
? ? this.setData({
? ? ? context1: context1,
? ? })
? },
? touchstart1: function(e) {
? ? var context1 = this.data.context1;
? ? context1.moveTo(e.touches[0].x, e.touches[0].y);
? ? this.setData({
? ? ? context1: context1,
? ? ? hasDraw : true, //要簽字了
? ? });
? },
? touchmove1: function(e) {
? ? var x = e.touches[0].x;
? ? var y = e.touches[0].y;
? ? var context1 = this.data.context1;
? ? context1.setLineWidth(3);
? ? context1.lineTo(x, y);
? ? context1.stroke();
? ? context1.setLineCap('round');
? ? context1.draw(true);
? ? context1.moveTo(x, y);
? },
? reSign1: function() { //重新畫(huà)
? ? var that = this;
? ? var context1 = that.data.context1;
? ? context1.draw(); //清空畫(huà)布
? ? that.setData({
? ? ? hasDraw: false, //沒(méi)有畫(huà)
? ? ? src: null
? ? });
? },
? sign1ok: function () {
? ? var that = this;
? ? if(!that.data.hasDraw){
? ? ? console.log("簽字是空白的 沒(méi)有簽字")
? ? }else{
? ? ? var context1 = that.data.context1;
? ? ? context1.draw(true, wx.canvasToTempFilePath({
? ? ? ? canvasId: 'handWriting1',
? ? ? ? success(res) {
? ? ? ? ? console.log(res.tempFilePath) //得到了圖片下面自己寫(xiě)上傳吧
? ? ? ? ? that.setData({
? ? ? ? ? ? src: res.tempFilePath
? ? ? ? ? })
? ? ? ? ??
? ? ? ? }
? ? ? }))
? ? }
? },
});

wxss

.paper{border:1px solid #dedede; margin: 10px; height:160px }
.image{border:1px solid #dedede; margin: 10px; height:160px }
.signBtn{display: flex; margin-top:20px;}
.signTitle{ text-align: center; font-size:1.2em;margin:10px auto;}
.handWriting{width:100%}
.image image{width:100%; height:160px }

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

您可能感興趣的文章:

相關(guān)文章

js 動(dòng)態(tài)生成json對(duì)象、時(shí)時(shí)更新json對(duì)象的方法
下面小編就為大家?guī)?lái)一篇js 動(dòng)態(tài)生成json對(duì)象、時(shí)時(shí)更新json對(duì)象的方法。小編覺(jué)的挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-12-12
javascript自定義in_array()函數(shù)實(shí)現(xiàn)方法
這篇文章主要介紹了javascript自定義in_array()函數(shù)實(shí)現(xiàn)方法,涉及javascript數(shù)組的遍歷與查找相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
詳解js獲取video任意時(shí)間的畫(huà)面截圖
這篇文章主要介紹了js獲取video任意時(shí)間的畫(huà)面截圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
js阻止移動(dòng)端頁(yè)面滾動(dòng)的兩種方法
本文主要介紹了js阻止移動(dòng)端頁(yè)面滾動(dòng)的兩種方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
簡(jiǎn)潔短小的 JavaScript IE 瀏覽器判定代碼
IE瀏覽器不管是什么版本，總是跟Web標(biāo)準(zhǔn)有些不太兼容。對(duì)于代碼工作者來(lái)說(shuō)，自然是苦不堪言，為了考慮IE的兼容問(wèn)題，不管是寫(xiě) CSS 還是 JS，往往都要對(duì) IE 特別對(duì)待，這就少不了做些判斷。本文不討論如何區(qū)分 IE 的樣式，僅是 JS 判定 IE 瀏覽器。
2010-03-03
[JSF]使用DataModel處理表行事件的實(shí)例代碼
在使用JSF中，最常用的恐怕就要屬于表格的處理了。使用DataModel可以方便地進(jìn)行對(duì)表行的處理：
2013-08-08
分享5個(gè)JavaScript的寫(xiě)法小技巧
寫(xiě)代碼的時(shí)候總有一些東西是會(huì)重復(fù)出現(xiàn)的,次數(shù)多了你就會(huì)想找找捷徑了,下面這篇文章主要給大家介紹了關(guān)于5個(gè)JavaScript的寫(xiě)法小技巧,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-02-02
javascript實(shí)現(xiàn)簡(jiǎn)易數(shù)碼時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)易數(shù)碼時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
JavaScript使用cookie記錄臨時(shí)訪客信息的方法
這篇文章主要介紹了JavaScript使用cookie記錄臨時(shí)訪客信息的方法,涉及javascript操作cookie的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
JavaScript實(shí)現(xiàn)數(shù)組去重的7種方法
去重是開(kāi)發(fā)中經(jīng)常會(huì)碰到的一個(gè)熱點(diǎn)問(wèn)題，本文詳細(xì)的介紹了JavaScript實(shí)現(xiàn)數(shù)組去重的7種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-03-03