This commit is contained in:
曹辉 2023-04-12 11:01:29 +08:00
parent c85d8901d7
commit f7a022c3e8
4 changed files with 235 additions and 219 deletions

View File

@ -1,20 +1,13 @@
<template>
<view class="signature-wrap">
<canvas
:canvas-id="cid"
:id="cid"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
style="height:600rpx"
:style="[{ width: formatSize(width)}, customStyle]"
></canvas>
<canvas :canvas-id="cid" :id="cid" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"
style="height:600rpx" :style="[{ width: formatSize(width)}, customStyle]"></canvas>
<slot />
</view>
</template>
<script>
/**
/**
* sign canvas 手写签名
* @description 设置线条宽度、颜色,撤回,清空
* @tutorial
@ -27,11 +20,13 @@
* @event {Function} init 当创建完 canvas 实例后触发,向外提供 canvas实例,撤回,清空方法
* @example <v-sign @init="signInit"></v-sign>
*/
import { formatSize } from './utils'
// convas 实例
let canvasCtx
import {
formatSize
} from './utils'
// convas 实例
let canvasCtx
export default {
export default {
name: 'v-sign',
props: {
// canvas id
@ -100,13 +95,11 @@ export default {
width: this.lineWidth || this.penLineWidth || 4
},
// 屏幕坐标
coordinates: [
{
coordinates: [{
type: e.type,
x: pos.x,
y: pos.y
}
]
}]
})
this.drawLine()
},
@ -160,7 +153,10 @@ export default {
if (coordinatesLen < 2) {
// only start, no move event
startPos = coordinates[coordinatesLen - 1]
endPos = { x: startPos.x + 1, y: startPos.y }
endPos = {
x: startPos.x + 1,
y: startPos.y
}
} else {
startPos = coordinates[coordinatesLen - 2]
endPos = coordinates[coordinatesLen - 1]
@ -182,8 +178,7 @@ export default {
},
canvasToTempFilePath(conf = {}) {
return new Promise((resolve, reject) => {
uni.canvasToTempFilePath(
{
uni.canvasToTempFilePath({
canvasId: this.cid,
...conf,
success: res => {
@ -220,19 +215,31 @@ export default {
* y = (1-t)²*y0 + 2t(1-t)*y1 + t²*y2
*/
caculateBezier(P0, P2, B, t = 0.5) {
const { x: x0, y: y0 } = P0
const { x: x2, y: y2 } = P2
const { x, y } = B
const {
x: x0,
y: y0
} = P0
const {
x: x2,
y: y2
} = P2
const {
x,
y
} = B
let x1 = (x - (1 - t) * (1 - t) * x0 - t * t * x2) / (2 * t * (1 - t))
let y1 = (y - (1 - t) * (1 - t) * y0 - t * t * y2) / (2 * t * (1 - t))
return { x: x1, y: y1 }
return {
x: x1,
y: y1
}
}
}
}
}
</script>
<style lang="scss" scoped>
.signature-wrap {
.signature-wrap {
position: relative;
}
}
</style>

View File

@ -51,7 +51,8 @@
"path": "pages/confirmCompletion/confirmCompletion",
"style": {
"navigationBarTitleText": "当前工单",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"disableScroll": true
}
}, {
"path": "pages/taskReturn/taskReturn",

View File

@ -101,8 +101,14 @@
</view>
</view>
</u-popup>
<u-mask :show="show" @click="show = false">
<!-- <u-popup v-model="show" mode='bottom' :closeable='true' :safe-area-inset-bottom='true' @touchmove.stop.prevent
height='900'>
<signature @userSignaturePictureUrl='userSignaturePicture' @click.native.stop
style='background-color: #F4F5F7;width: 100%;height: 800rpx;'>
</signature>
</u-popup> -->
<u-mask :show="show" @click="show = false" @touchmove.stop.prevent>
<signature @userSignaturePictureUrl='userSignaturePicture' @click.native.stop v-if='show'
style='background-color: #F4F5F7;position:absolute;bottom:0%;width: 100%;height: 800rpx;'></signature>
</u-mask>
<u-toast ref="uToast" />
@ -284,7 +290,9 @@
<style lang="scss">
.app {
font-size: 36rpx;
padding: 0 0 100rpx;
padding: 0;
overflow: scroll;
height: 100vh;
.finishmask {
height: 300rpx;

View File

@ -1,5 +1,5 @@
<template>
<view class="" style="background-color: #F4F5F7;">
<view class="" style="background-color: #F4F5F7;" @touchmove.stop.prevent>
<Signature @init="onSignInit" style='background-color: #fff;'></Signature>
<view class="btns">
<button @click="clear">清空</button>