html部分
uni-popup：是在uni-app官网下载的插件，仅做弹窗使用，如果不需要此功能可删掉，或使用别的插件。
<uni-popup ref="popup" :mask-click="false" background-color="white">
<view class="popup_footer">
<view style="display: flex; align-items: center;">
<image src="../../../../static/img_mine/icon_qxy_qianming.png" mode="" class="popup_footer_img1"></image>
<view class="popup_footer_txt" @click="close">签名</view>
</view>
<view @click="closed">
<image src="../../../../static/img_mine/close.png" mode="" class="popup_footer_img"></image>
</view>
</view>
<canvas
class="mycanvas"
canvas-id="mycanvas"
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend"
>
</canvas>
<view class="popup_footerd">
<view class="re_button" @click="reWrite">重写</view>
<view class="button" @click="finish">确认</view>
</view>
</uni-popup>
js部分
<script>
var x = 20;
var y =20;
export default {
onLoad() {
this.ctx = uni.createCanvasContext("mycanvas",this); //创建绘图对象
//设置画笔样式
this.ctx.lineWidth = 4;
this.ctx.lineCap = "round"
this.ctx.lineJoin = "round"
},
data() {
return {
headerStyleHeight:0,
headerStyleTop:0,
ctx:"",
points:[], //路径点集合
showCanvas:false,
signature:'',
path: ''
}
},
methods: {
open() {
this.$refs.popup.open('bottom')
},
closed() {
this.$refs.popup.close()
},
reWrite() {
this.clear();
},
//关闭并清空画布
close:function(){
this.showCanvas = false;
this.clear();
},
//创建并显示画布
createCanvas:function(){
this.showCanvas = true;
this.ctx = uni.createCanvasContext("mycanvas",this); //创建绘图对象
//设置画笔样式
this.ctx.lineWidth = 4;
this.ctx.lineCap = "round"
this.ctx.lineJoin = "round"
},
//触摸开始，获取到起点
touchstart:function(e){
let startX = e.changedTouches[0].x;
let startY = e.changedTouches[0].y;
let startPoint = {X:startX,Y:startY};
this.points.push(startPoint);
//每次触摸开始，开启新的路径
this.ctx.beginPath();
},
//触摸移动，获取到路径点
touchmove:function(e){
let moveX = e.changedTouches[0].x;
let moveY = e.changedTouches[0].y;
let movePoint = {X:moveX,Y:moveY};
this.points.push(movePoint); //存点
let len = this.points.length;
if(len>=2){
this.draw(); //绘制路径
}
},
touchend:function(){
this.points=[];
},
draw() {
let point1 = this.points[0]
let point2 = 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() {
let that = this;
uni.getSystemInfo({
success(res) {
let canvasw = res.windowWidth;
let canvash = res.windowHeight;
that.ctx.clearRect(0, 0, canvasw, canvash);
that.ctx.draw(true);
},
})
},
//完成绘画
finish(){
uni.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function(res) {
let path = res.tempFilePath;
console.log(path)
}
})
}
}
}
</script>
css部分
.mycanvas{
width: 100%;
height: 500rpx;
}
.popup_footer{
width: auto;
height: 120rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #979797;
margin: 0 30rpx 0 30rpx;
}
.popup_footerd{
width: auto;
height: 90rpx;
margin: 0 30rpx 30rpx 30rpx;
display: flex;
justify-content: flex-end;
align-items: center;
}
.popup_footer_img{
width: 32rpx;
height: 32rpx;
}
.popup_footer_img1{
width: 50rpx;
height: 50rpx;
}
.popup_footer_txt{
font-size: 28rpx;
font-weight: 400;
color: #333333;
margin-left: 27rpx;
}
.re_button{
width: 79rpx;
height: 44rpx;
text-align: center;
font-size: 24rpx;
line-height: 45rpx;
border: 1px solid #979797;
border-radius: 10rpx;
color: #333333;
margin-right: 66rpx;
}
.button{
width: 79rpx;
height: 44rpx;
text-align: center;
font-size: 24rpx;
line-height: 45rpx;
background: #EF5350;
border: 1px solid #EF5350;
border-radius: 10rpx;
color: #F6F6F6;
}
.btn{
background: linear-gradient(360deg, #CCCCCC 0%, #F98156 0%, #EF5350 9%, #E53935 100%);
border-radius: 20rpx;
margin: 70rpx 88rpx 50rpx 88rpx;
color: #F6F6F6;
}
