uni-app组件v-sign手写签名(修改PC端手写功能)
原组件v-sign,修改pc端手写签名显示问题
·
原组件v-sign
插件市场地址:https://ext.dcloud.net.cn/plugin?id=6806
github地址:https://github.com/jizai1125/v-sign
功能:修改pc端手写签名显示问题
修改:v-sign/v-sign.vue
<template>
<view class="signature-wrap">
<template v-if="isMobile">
<canvas
:canvas-id="cid"
:id="cid"
disable-scroll="false"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
:style="[
{
width: width && formatSize(width),
height: height && formatSize(height),
},
customStyle,
]"
></canvas>
</template>
// 新增pc端
<template v-else>
<canvas
:canvas-id="cid"
:id="cid"
disable-scroll="false"
@mousedown="onMousedown"
@mousemove="onMousemove"
@mouseup="onMouseup"
@mouseleave="onMouseleave"
:style="[
{
width: width && formatSize(width),
height: height && formatSize(height),
},
customStyle,
]"
></canvas>
</template>
<slot />
</view>
</template>
data() {
return {
formatSize,
lineData: [],
winWidth: 0,
winHeight: 0,
penLineWidth: null, // v-sign-pen 组件设置的画笔大小
penLineColor: null, // v-sign-color 组件设置的颜色
isMouseDown: false,
canvasDom: "",
isMobile: true,
};
},
created() {
// 获取窗口宽高
const { windowWidth, windowHeight } = uni.getSystemInfoSync();
this.winWidth = windowWidth;
this.winHeight = windowHeight;
// #ifdef H5
// 仅供参考,可自行判断
this.isMobile = !!navigator.userAgent.match(/AppleWebKit.*Mobile.*/);
// #endif
},
mounted() {
this.canvasCtx = uni.createCanvasContext(this.cid, this);
// h5 需延迟绘制,否则绘制失败
// #ifdef H5
setTimeout(() => {
// #endif
this.setBackgroundColor(this.bgColor);
// #ifdef H5
}, 10);
this.canvasDom = document.getElementById(this.canvasCtx.id);
const uniAppNavigatorEl = document.getElementsByTagName("uni-page-head")[0];
// uni-app顶部导航栏的高度
this.navigationBarHeight =
uniAppNavigatorEl &&
parseFloat(window.getComputedStyle(uniAppNavigatorEl, null).height);
// #endif
// 初始化完成,触发 init 事件
this.$emit("init", this.provideSignInterface());
},
methods:{
getMousePosition(e) {
let canvasDomRect = this.canvasDom.getBoundingClientRect();
// 鼠标在视图中的位置 - canvas在视图中的位置(这两个在消失在视图中时为负数)
var left = e.clientX - canvasDomRect.x;
// 使用uni-app的默认顶部导航栏需要加上高度,自定义不需要
var top =
e.clientY -
canvasDomRect.y +
(this.navigationBarHeight > 0 ? this.navigationBarHeight : 0);
return { left, top };
},
onMousedown(e) {
this.isMouseDown = true;
let { left, top } = this.getMousePosition(e);
this.lineData.push({
style: {
color: this.penLineColor || this.lineColor,
width: this.penLineWidth || this.lineWidth,
},
// 屏幕坐标
coordinates: [
{
type: e.type,
x: left,
y: top,
},
],
});
this.drawLine();
},
onMousemove(e) {
if (this.isMouseDown) {
let { left, top } = this.getMousePosition(e);
this.lineData[this.lineData.length - 1].coordinates.push({
type: e.type,
x: left,
y: top,
});
this.drawLine();
}
},
onMouseup(e) {
if (this.isMouseDown) {
this.$emit("end", this.lineData);
}
this.isMouseDown = false;
},
onMouseleave() {
this.onMouseup();
},
}
revoke中:
pos.type == "touchstart"
修改为pos.type == "touchstart" || pos.type == "mousedown"
截图
pc端:
移动端:
修改过的代码已全部提供(由于csdn没有地方标识哪些是新增的或者我没找到,所以就整块贴出了),其余原代码并未全部贴出,可自行下载;
更多推荐
已为社区贡献1条内容
所有评论(0)