Uniapp实现签名效果

最新推荐文章于 2024-05-07 11:45:51 发布

会飞的猪@

最新推荐文章于 2024-05-07 11:45:51 发布

阅读量903

点赞数 1

文章标签： uni-app servlet java

本文链接：https://blog.csdn.net/weixin_53935634/article/details/126589441

版权

我也不是组件引进来的，直接建了个vue文件，代码放上运行就完了

<template>
   <view class="signa">
   <view class="btn">
   <view class="cancel-btn" @click="clear">
   <span class="iconfont" style="margin-right: 10px;"></span>
   重写
   </view>

   <view class="save-btn" @click="save">
   <span class="iconfont" style="margin-right: 10px;"></span>
   确认
   </view>

   
   </view>
   <canvas class="canvas" disable-scroll="true" :style="{'width':width,'height':height}" canvas-id="designature" @touchstart="starts"
   @touchmove="moves" @touchend="end"></canvas>
   </view>
</template>
<script>
export default {
components: {},
data() {
return {
dom: null,
line: [],
radius: 0,
width: '0px',
height: '0px',
}
},
onLoad() {

},
computed:{

},
created() {
uni.getSystemInfo({
success: (res) => {
this.width = res.windowWidth - 60 + 'px';
this.height = res.windowHeight - 15 + 'px';
}
});
this.dom = uni.createCanvasContext('designature',this);

},
onShow(){

},
methods: {
end(e) {

},
distance(a, b) {
let x = b.x - a.x;
let y = b.y - a.y;
return Math.sqrt(x * x + y * y);
},
// 开始
starts(e) {
this.line.push({
points: [{
time: new Date().getTime(),
x: e.touches[0].x,
y: e.touches[0].y,
dis: 0
}]
})
let currentPoint = {
x: e.touches[0].x,
y: e.touches[0].y
}
this.currentPoint = currentPoint
this.drawer(this.line[this.line.length - 1])
},
// 滑动
moves(e) {
let point = {
x: e.touches[0].x,
y: e.touches[0].y
}
this.lastPoint = this.currentPoint,
this.currentPoint = point
this.line[this.line.length - 1].points.push({
time: new Date().getTime(),
x: e.touches[0].x,
y: e.touches[0].y,
dis: this.distance(this.currentPoint, this.lastPoint)
})
this.drawer(this.line[this.line.length - 1])
},
// 书写
drawer(item) {
let x1, x2, y1, y2, len, radius, r, cx, cy, t = 0.5,
x, y;
var time = 0;
if (item.points.length > 2) {
let lines = item.points[item.points.length - 3];
let line = item.points[item.points.length - 2];
let end = item.points[item.points.length - 1];
x = line.x;
y = line.y;
x1 = lines.x;
y1 = lines.y;
x2 = end.x;
y2 = end.y;
var dis = 0;
time = (line.time - lines.time) + (end.time - line.time)
dis = line.dis + lines.dis + end.dis;
var dom = this.dom;
var or = Math.min(time / dis * this.linePressure + this.lineMin, this.lineMax);
cx = (x - (Math.pow(1 - t, 2) * x1) - Math.pow(t, 2) * x2) / (2 * t * (1 - t))
cy = (y - (Math.pow(1 - t, 2) * y1) - Math.pow(t, 2) * y2) / (2 * t * (1 - t))
dom.setLineCap('round')
dom.beginPath();
dom.setStrokeStyle('black')
dom.setLineWidth(5)
dom.moveTo(x1, y1);
dom.quadraticCurveTo(cx, cy, x2, y2);
dom.stroke();
dom.draw(true)
}
},
// 清除
clear() {
this.dom.clearRect(0, 0, 1000, 1000)
this.dom.draw()
},
//关闭
// colse(e){
// this.$emit('colse',false);
                               // // this.disable-scrol = false/* */
// },
// 保存图片
save() {
var t=this;
uni.canvasToTempFilePath({
canvasId: 'designature',
fileType: 'png',
quality: 1, //图片质量
success:function(res) {
t.$emit('getImg',res.tempFilePath)
// uni.navigateBack({
// delta:1
// }) v
                                               console.log(res.tempFilePath,"success!!")
},
fail(e){
console.log(e)
}
},this)
}
}
}
</script>