html部分
? uni-popup：是在uni-app官網(wǎng)下載的插件秸妥，僅做彈窗使用滚停，如果不需要此功能可刪掉，或使用別的插件粥惧。
<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);? //創(chuàng)建繪圖對象
//設(shè)置畫筆樣式
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();
},
//關(guān)閉并清空畫布
? ? ? close:function(){
? ? ? this.showCanvas = false;
? ? ? this.clear();
? ? ? },
? ? ? //創(chuàng)建并顯示畫布
? ? ? createCanvas:function(){
? ? ? this.showCanvas = true;?
? ? ? this.ctx = uni.createCanvasContext("mycanvas",this);? //創(chuàng)建繪圖對象? ? ?
? ? ? //設(shè)置畫筆樣式
? ? ? 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;
}
