uniapp實(shí)現(xiàn)橫屏簽字版

第uniapp實(shí)現(xiàn)橫屏簽字版本文實(shí)例為大家分享了uniapp實(shí)現(xiàn)橫屏簽字版的具體代碼，供大家參考，具體內(nèi)容如下

兼容H5、APP、微信小程序

可作為組件直接引入

通過this.$emit(tempFilePath,val.tempFilePath)給予回調(diào)

template

viewv-if="isShow"@touchmove.stop.prevent=""

!--簽字canvas--

canvas

id="mycanvas"

canvas-id="mycanvas"

@touchstart="touchstart"

@touchmove="touchmove"

@touchend="touchend"

/canvas

!--旋轉(zhuǎn)canvas--

canvas

:style="{'z-index':-1,width:`${screenWidth}px`,height:`${(screenWidth*screenWidth)/screenHeight}px`}"

id="rotatCanvas"

canvas-id="rotatCanvas"

/canvas

cover-view

cover-view@tap="finish"保存/cover-view

cover-view@tap="clear"清除/cover-view

cover-view@tap="hide"關(guān)閉/cover-view

/cover-view

/view

/template

script

exportdefault{

data(){

return{

ctx:'',//繪圖圖像

points:[],//路徑點(diǎn)集合

isShow:false,

screenWidth:'',

screenHeight:''

};

},

mounted(){

this.createCanvas();

uni.getSystemInfo({

success:e={

this.screenWidth=e.screenWidth;

this.screenHeight=e.screenHeight;

}

});

},

methods:{

show(){

this.clear();

this.isShow=true;

},

hide(){

this.isShow=false;

},

//創(chuàng)建并顯示畫布

createCanvas(){

this.showCanvas=true;

this.ctx=uni.createCanvasContext('mycanvas',this);//創(chuàng)建繪圖對(duì)象

//設(shè)置畫筆樣式

this.ctx.lineWidth=2;

this.ctx.lineCap='round';

this.ctx.lineJoin='round';

},

//觸摸開始，獲取到起點(diǎn)

touchstart(e){

letstartX=e.changedTouches[0].x;

letstartY=e.changedTouches[0].y;

letstartPoint={

X:startX,

Y:startY

};

this.points.push(startPoint);

//每次觸摸開始，開啟新的路徑

this.ctx.beginPath();

},

//觸摸移動(dòng)，獲取到路徑點(diǎn)

touchmove(e){

letmoveX=e.changedTouches[0].x;

letmoveY=e.changedTouches[0].y;

letmovePoint={

X:moveX,

Y:moveY

};

this.points.push(movePoint);//存點(diǎn)

letlen=this.points.length;

if(len=2){

this.draw();//繪制路徑

}

},

//觸摸結(jié)束，將未繪制的點(diǎn)清空防止對(duì)后續(xù)路徑產(chǎn)生干擾

touchend(){

this.points=[];

},

/************************************************

#

繪制筆跡

#

1.為保證筆跡實(shí)時(shí)顯示，必須在移動(dòng)的同時(shí)繪制筆跡

#

2.為保證筆跡連續(xù)，每次從路徑集合中區(qū)兩個(gè)點(diǎn)作為起點(diǎn)（moveTo）和終點(diǎn)(lineTo)

#

3.將上一次的終點(diǎn)作為下一次繪制的起點(diǎn)（即清除第一個(gè)點(diǎn)）

*************************************************/

draw(){

letpoint1=this.points[0];

letpoint2=this.points[1];

this.points.shift();

this.ctx.moveTo(point1.X,point1.Y);

this.ctx.lineTo(point2.X,point2.Y);

this.ctx.stroke();

this.ctx.draw(true);

},

//清空畫布

clear(){

this.ctx.clearRect(0,0,this.screenWidth,this.screenHeight);

this.ctx.draw(true);

},

//完成繪畫并保存到本地

finish(){

uni.canvasToTempFilePath(

{

canvasId:'mycanvas',

success:res={

this.rotat(res.tempFilePath);

},

complete:com={}

},

this

);

},

//將圖片選裝

rotat(e){

letrotatCtx=uni.createCanvasContext('rotatCanvas',this);//創(chuàng)建繪圖對(duì)象

//重新定位中心點(diǎn)

rotatCtx.translate(0,(this.screenWidth*this.screenWidth)/this.screenHeight);

//將畫布逆時(shí)針旋轉(zhuǎn)90度

rotatCtx.rotate((270*Math.PI)/180);

//將簽字圖片繪制進(jìn)入Canvas

rotatCtx.drawImage(e,0,0,(this.screenWidth*this.screenWidth)/this.screenHeight,this.screenWidth);

//保存后旋轉(zhuǎn)后的結(jié)果

rotatCtx.draw(true);

setTimeout(()={

//生成圖片并回調(diào)

uni.canvasToTempFilePath(

{

canvasId:'rotatCanvas',

success:val={

this.$emit('tempFilePath',val.tempFilePath);

setTimeout(()={

this.hide();

},500);

},

complete:com={

//console.log(com);

}

},

this

);

},500);

}

}

/script

stylelang="scss"scoped

.main-content{

width:100vw;

height:100vh;

background-color:red;

position:fixed;

top:0rpx;

left:0rpx;

z-index:9999;

.mycanvas{

width:100vw;

height:100vh;

background-color:#efefef;

position:fixed;

left:0rpx;

top:0rpx;

z-index:2;

.button-line{

transform:rotate(90deg);

position: