Skip to content

C
CFFP-HB
Commit adbb212e by yuzhenWang
Options

签名已经完成优化，切换分支

parent 62bdb732
Showing with 186 additions and 69 deletions
components/eSignature/eSignature.vue
......@@ -39,7 +39,8 @@
points: [],
//签名图片
SignatureImg: '',
hasSign: false
hasSign: false,
isDrawing: false // 新增绘制状态
};
},
props: ['showCanvas'],
......@@ -67,36 +68,83 @@
this.ctx.lineCap = 'round';
this.ctx.lineJoin = 'round';
},
//触摸开始，获取到起点
touchstart(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(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() {
this.points = [];
},
// //触摸开始，获取到起点
// touchstart(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();
// },
// 触摸开始，获取到起点 - 修改后的方法
touchstart(e) {
this.isDrawing = true;
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();
// 阻止事件冒泡
e.stopPropagation();
return false;
},
// //触摸移动，获取到路径点
// touchmove(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(); //绘制路径
// }
// },
// 触摸移动，获取到路径点 - 修改后的方法
touchmove(e) {
if (!this.isDrawing) return;
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();
}
// 阻止事件冒泡
e.stopPropagation();
return false;
},
// // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
// touchend() {
// this.points = [];
// },
// 触摸结束 - 修改后的方法
touchend() {
this.isDrawing = false;
this.points = [];
// 阻止事件冒泡
if (e) {
e.stopPropagation();
}
return false;
},
//绘制笔迹
draw() {
let point1 = this.points[0];
......@@ -154,6 +202,18 @@
},
mounted() {
this.createCanvas();
// 新增代码
// 在组件挂载时添加额外的事件监听
// #ifdef H5
const canvas = document.querySelector('.mycanvas');
if (canvas) {
canvas.addEventListener('touchmove', (e) => {
if (this.isDrawing) {
e.preventDefault();
}
}, { passive: false });
}
// #endif
}
};
</script>
......@@ -163,32 +223,22 @@
flex-direction: column;
align-items: center;
background: #fff;
// height: calc(100vh-44rpx);
//签名模块
.signature {
// position: fixed;
// top: 10px;
// left: 2%;
// z-index: 999;
touch-action: none; /* 禁用触摸操作 */
width: 96%;
//canvas
.mycanvas {
touch-action: none; /* 禁用触摸操作 */
width: 100%;
// height: calc(100vh - 200upx);
height: calc(100vh - 600rpx);
background-color: #f9f9f9;
border-radius: 10px 10px 0 0;
}
//底部按钮
.footer {
// font-size: 14px;
// height: 150upx;
display: flex;
justify-content: space-around;
// align-items: center;
// background-color: #fff;
// border-radius: 0 0 10px 10px;
// border-top: 1px solid #a7a7a733;
}
}
//生成的图片
......
pages/application-process/signature.vue
......@@ -65,6 +65,7 @@
},
touchMoveHandler:null,
isScrollLocked: false // 新增滚动锁定状态
}
},
components:{eSignature},
......@@ -97,34 +98,90 @@
this.releaseScroll();
},
methods: {
// 锁定滚动
lockScroll() {
// #ifdef H5
if (this.touchMoveHandler) return; // 避免重复绑定
// // 锁定滚动
// lockScroll() {
// // #ifdef H5
// if (this.touchMoveHandler) return; // 避免重复绑定
this.touchMoveHandler = (e) => {
e.preventDefault();
};
// this.touchMoveHandler = (e) => {
// e.preventDefault();
// };
document.body.addEventListener(
'touchmove',
this.touchMoveHandler,
{ passive: false }
);
// #endif
},
// 释放滚动
releaseScroll() {
// #ifdef H5
if (this.touchMoveHandler) {
document.body.removeEventListener(
'touchmove',
this.touchMoveHandler
);
this.touchMoveHandler = null;
}
// #endif
},
// document.body.addEventListener(
// 'touchmove',
// this.touchMoveHandler,
// { passive: false }
// );
// // #endif
// },
// 锁定滚动 - 修改后的方法
lockScroll() {
if (this.isScrollLocked) return;
// #ifdef H5
// 阻止触摸事件默认行为
this.touchMoveHandler = (e) => {
// 检查触摸事件是否发生在签名区域内
const signatureArea = document.querySelector('.signatureContent');
if (signatureArea && signatureArea.contains(e.target)) {
e.preventDefault();
}
};
document.body.addEventListener('touchmove', this.touchMoveHandler, { passive: false });
// #endif
// 在App端也需要禁用滚动
// #ifdef APP-PLUS
const pages = getCurrentPages();
const page = pages[pages.length - 1];
const webview = page.$getAppWebview();
webview.setStyle({
scrollIndicator: 'none',
scrollsToTop: false,
bounce: 'none'
});
// #endif
this.isScrollLocked = true;
},
// // 释放滚动
// releaseScroll() {
// // #ifdef H5
// if (this.touchMoveHandler) {
// document.body.removeEventListener(
// 'touchmove',
// this.touchMoveHandler
// );
// this.touchMoveHandler = null;
// }
// // #endif
// },
// 释放滚动 - 修改后的方法
releaseScroll() {
if (!this.isScrollLocked) return;
// #ifdef H5
if (this.touchMoveHandler) {
document.body.removeEventListener('touchmove', this.touchMoveHandler);
this.touchMoveHandler = null;
}
// #endif
// 在App端恢复滚动
// #ifdef APP-PLUS
const pages = getCurrentPages();
const page = pages[pages.length - 1];
const webview = page.$getAppWebview();
webview.setStyle({
scrollIndicator: 'auto',
scrollsToTop: true,
bounce: 'vertical'
});
// #endif
this.isScrollLocked = false;
},
goBack() {
this.releaseScroll()
uni.navigateBack({
......@@ -220,12 +277,22 @@
@import 'applyCommon.scss';
.container{
background-color: #fff;
// 新增样式
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
.signatureContent{
background: #fff;
margin-top: 20rpx;
height: auto;
position: relative;
// 新增样式
touch-action: none; /* 禁用触摸操作 */
}
.signature_action{
display: flex;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment