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

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

1.關鍵配置：

pageOrientation:landscape配置該頁面橫屏展示

2.效果圖：

3.代碼:

wxml

view

canvasid="canvas"canvas-id="canvas"disable-scroll="true"bindtouchstart="canvasStart"

bindtouchmove="canvasMove"bindtouchend="canvasEnd"touchcancel="canvasEnd"

binderror="canvasIdErrorCallback"/canvas

view

請在框內(nèi)簽字

/view

view

buttontype="default"bindtap="cleardraw"重新簽名/button

buttontype="default"bindtap="getimg"提交簽字/button

/view

/view

js

constfileManager=wx.getFileSystemManager();

//canvas全局配置

varcontext=null;//使用wx.createContext獲取繪圖上下文context

varisButtonDown=false;

vararrx=[];

vararry=[];

vararrz=[];

varcanvasw=0;

varcanvash=0;

//獲取系統(tǒng)信息

wx.getSystemInfo({

success:function(res){

canvasw=res.windowHeight*1.2;//設備寬度

//canvash=res.windowWidth*7/15;

canvash=res.windowWidth*1.2;

//注冊頁面

Page({

/**

*頁面的初始數(shù)據(jù)

*/

data:{

signFlag:false,

/**

*生命周期函數(shù)--監(jiān)聽頁面加載

*/

onLoad:function(options){

context=wx.createCanvasContext('canvas');

context.setFillStyle('#fff')

context.fillRect(0,0,canvasw,canvash)

context.draw(true)

context.beginPath()

context.setStrokeStyle('#000000');

context.setLineWidth(4);

context.setLineCap('round');

context.setLineJoin('round');

onShow(){

arrx=[];

arry=[];

arrz=[];

isJSON(str){

if(typeofstr=='string'){

try{

varobj=JSON.parse(str);

if(typeofobj=='object'obj){

returntrue;

}else{

returnfalse;

}

}catch(e){

returnfalse;

}

}

canvasIdErrorCallback:function(e){},

//開始

canvasStart:function(event){

isButtonDown=true;

arrz.push(0);

arrx.push(event.changedTouches[0].x);

arry.push(event.changedTouches[0].y);

//context.moveTo(event.changedTouches[0].x,event.changedTouches[0].y);

//過程

canvasMove:function(event){

if(isButtonDown){

arrz.push(1);

arrx.push(event.changedTouches[0].x);

arry.push(event.changedTouches[0].y);

//context.lineTo(event.changedTouches[0].x,event.changedTouches[0].y);

//context.stroke();

//context.draw()

};

this.setData({

signFlag:true,

})

for(vari=0;iarrx.length;i++){

if(arrz[i]==0){

context.moveTo(arrx[i],arry[i])

}else{

context.lineTo(arrx[i],arry[i])

};

};

context.setStrokeStyle('#000000');

context.setLineWidth(4);

context.setLineCap('round');

context.setLineJoin('round');

context.stroke();

context.draw(true);

canvasEnd:function(event){

isButtonDown=false;

cleardraw:function(){

//清除畫布

arrx=[];

arry=[];

arrz=[];

context.clearRect(0,0,canvasw,canvash);

context.draw(true);

//導出圖片

getimg:function(){

letthat=this

if(arrx.length==0){

wx.showModal({

title:'提示',

content:'簽名內(nèi)容不能為空！',

showCancel:false

});

returnfalse;

};

console.log(this.data.signFlag);

if(!this.data.signFlag){

wx.showModal({

title:'提示',

content:'簽名內(nèi)容不能為空！',

showCancel:false

});

returnfalse;

}

//生成圖片

wx.canvasToTempFilePath({

canvasId:'canvas',

success:function(res){

//將圖片轉(zhuǎn)換為base64的格式

letbase64='data:image/jpg;base64,'+fileManager.readFileSync(res.tempFilePath,'base64');

//其他

}

})

})

wxss

page{

background:#fff;

.container{

width:95%;

position:absolute;

height:95%;

top:50%;

left:50%;

transform:translate(-50%,-50%);

box-sizing:border-box;

background:#fff;

border-radius:5px;

.canvas{

width:100%;

height:70%;

border:1pxsolid#aaa;

box-sizing:border-box;

.tips{

height:10%;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:#aaa;

.addBtn{

display:flex;

align-items:center;

justify-content:center;

height:18%;

position:fixed;

bottom:0;

width:100%;

background:#fff;

z-index:100;

.addBtn.txt{

text-align:center;

width:90%;

font-size:13px;

border-radius:100px;

backg