修改
This commit is contained in:
曹辉
parent
c85d8901d7
commit
f7a022c3e8
@ -1,238 +1,245 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="signature-wrap">
|
<view class="signature-wrap">
|
||||||
<canvas
|
<canvas :canvas-id="cid" :id="cid" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"
|
||||||
:canvas-id="cid"
|
style="height:600rpx" :style="[{ width: formatSize(width)}, customStyle]"></canvas>
|
||||||
:id="cid"
|
|
||||||
@touchstart="onTouchStart"
|
|
||||||
@touchmove="onTouchMove"
|
|
||||||
@touchend="onTouchEnd"
|
|
||||||
style="height:600rpx"
|
|
||||||
:style="[{ width: formatSize(width)}, customStyle]"
|
|
||||||
></canvas>
|
|
||||||
<slot />
|
<slot />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/**
|
/**
|
||||||
* sign canvas 手写签名
|
* sign canvas 手写签名
|
||||||
* @description 设置线条宽度、颜色，撤回，清空
|
* @description 设置线条宽度、颜色，撤回，清空
|
||||||
* @tutorial
|
* @tutorial
|
||||||
* @property {String} cid canvas id 不设置则默认为 v-sign-时间戳
|
* @property {String} cid canvas id 不设置则默认为 v-sign-时间戳
|
||||||
* @property {String, Number} width canvas 宽度
|
* @property {String, Number} width canvas 宽度
|
||||||
* @property {String, Number} height canvas 高度
|
* @property {String, Number} height canvas 高度
|
||||||
* @property {Object} customStyle 自定义样式
|
* @property {Object} customStyle 自定义样式
|
||||||
* @property {String} lineColor 画笔颜色
|
* @property {String} lineColor 画笔颜色
|
||||||
* @property {Number} lineWidth 画笔大小，权重大于 v-sign-pen 组件设置的画笔大小
|
* @property {Number} lineWidth 画笔大小，权重大于 v-sign-pen 组件设置的画笔大小
|
||||||
* @event {Function} init 当创建完 canvas 实例后触发，向外提供 canvas实例，撤回，清空方法
|
* @event {Function} init 当创建完 canvas 实例后触发，向外提供 canvas实例，撤回，清空方法
|
||||||
* @example <v-sign @init="signInit"></v-sign>
|
* @example <v-sign @init="signInit"></v-sign>
|
||||||
*/
|
*/
|
||||||
import { formatSize } from './utils'
|
import {
|
||||||
// convas 实例
|
formatSize
|
||||||
let canvasCtx
|
} from './utils'
|
||||||
|
// convas 实例
|
||||||
|
let canvasCtx
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'v-sign',
|
name: 'v-sign',
|
||||||
props: {
|
props: {
|
||||||
// canvas id
|
// canvas id
|
||||||
cid: {
|
cid: {
|
||||||
type: String,
|
type: String,
|
||||||
default: `v-sign-${Date.now()}`
|
default: `v-sign-${Date.now()}`
|
||||||
// required: true
|
// required: true
|
||||||
},
|
},
|
||||||
// canvas 宽度
|
// canvas 宽度
|
||||||
width: {
|
width: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
default: '100%'
|
default: '100%'
|
||||||
},
|
},
|
||||||
// canvas 高度
|
// canvas 高度
|
||||||
height: {
|
height: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
default: 300
|
default: 300
|
||||||
},
|
},
|
||||||
// 画笔大小，权重大于 v-sign-pen 组件设置的画笔大小
|
// 画笔大小，权重大于 v-sign-pen 组件设置的画笔大小
|
||||||
lineWidth: {
|
lineWidth: {
|
||||||
type: Number
|
type: Number
|
||||||
},
|
},
|
||||||
// 线颜色
|
// 线颜色
|
||||||
lineColor: {
|
lineColor: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '#000'
|
default: '#000'
|
||||||
},
|
},
|
||||||
// canvas自定义样式
|
// canvas自定义样式
|
||||||
customStyle: {
|
customStyle: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
}
|
|
||||||
},
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
getInterface: this.provideInterface
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
formatSize,
|
|
||||||
lineData: [],
|
|
||||||
winWidth: 0,
|
|
||||||
winHeight: 0,
|
|
||||||
penLineWidth: null, // v-sign-pen 组件设置的画笔大小
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
canvasCtx = uni.createCanvasContext(this.cid, this)
|
|
||||||
// 初始化完成，向外暴露接口
|
|
||||||
this.$emit('init', this.provideInterface())
|
|
||||||
// 获取窗口宽高
|
|
||||||
uni.getSystemInfo({
|
|
||||||
success: res => {
|
|
||||||
this.winWidth = res.windowWidth
|
|
||||||
this.winHeight = res.windowHeight
|
|
||||||
}
|
}
|
||||||
})
|
},
|
||||||
},
|
provide() {
|
||||||
methods: {
|
return {
|
||||||
onTouchStart(e) {
|
getInterface: this.provideInterface
|
||||||
const pos = e.touches[0]
|
}
|
||||||
this.lineData.push({
|
},
|
||||||
style: {
|
data() {
|
||||||
color: this.lineColor,
|
return {
|
||||||
width: this.lineWidth || this.penLineWidth || 4
|
formatSize,
|
||||||
},
|
lineData: [],
|
||||||
// 屏幕坐标
|
winWidth: 0,
|
||||||
coordinates: [
|
winHeight: 0,
|
||||||
{
|
penLineWidth: null, // v-sign-pen 组件设置的画笔大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
canvasCtx = uni.createCanvasContext(this.cid, this)
|
||||||
|
// 初始化完成，向外暴露接口
|
||||||
|
this.$emit('init', this.provideInterface())
|
||||||
|
// 获取窗口宽高
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success: res => {
|
||||||
|
this.winWidth = res.windowWidth
|
||||||
|
this.winHeight = res.windowHeight
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onTouchStart(e) {
|
||||||
|
const pos = e.touches[0]
|
||||||
|
this.lineData.push({
|
||||||
|
style: {
|
||||||
|
color: this.lineColor,
|
||||||
|
width: this.lineWidth || this.penLineWidth || 4
|
||||||
|
},
|
||||||
|
// 屏幕坐标
|
||||||
|
coordinates: [{
|
||||||
type: e.type,
|
type: e.type,
|
||||||
x: pos.x,
|
x: pos.x,
|
||||||
y: pos.y
|
y: pos.y
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
this.drawLine()
|
||||||
|
},
|
||||||
|
onTouchMove(e) {
|
||||||
|
const pos = e.touches[0]
|
||||||
|
this.lineData[this.lineData.length - 1].coordinates.push({
|
||||||
|
type: e.type,
|
||||||
|
x: pos.x,
|
||||||
|
y: pos.y
|
||||||
|
})
|
||||||
|
this.drawLine()
|
||||||
|
},
|
||||||
|
onTouchEnd(e) {
|
||||||
|
// console.log(e.type, e)
|
||||||
|
},
|
||||||
|
// 清空画布
|
||||||
|
clear() {
|
||||||
|
this.lineData = []
|
||||||
|
canvasCtx.clearRect(0, 0, this.winWidth, this.winHeight)
|
||||||
|
canvasCtx.draw()
|
||||||
|
},
|
||||||
|
// 撤销
|
||||||
|
revoke() {
|
||||||
|
this.lineData.pop()
|
||||||
|
this.lineData.forEach((item, index) => {
|
||||||
|
canvasCtx.beginPath()
|
||||||
|
canvasCtx.setLineCap('round')
|
||||||
|
canvasCtx.setStrokeStyle(item.style.color)
|
||||||
|
canvasCtx.setLineWidth(item.style.width)
|
||||||
|
item.coordinates.forEach(pos => {
|
||||||
|
if (pos.type == 'touchstart') {
|
||||||
|
canvasCtx.moveTo(pos.x, pos.y)
|
||||||
|
} else {
|
||||||
|
canvasCtx.lineTo(pos.x, pos.y)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
canvasCtx.stroke()
|
||||||
|
})
|
||||||
|
canvasCtx.draw()
|
||||||
|
},
|
||||||
|
// 绘制线条
|
||||||
|
drawLine() {
|
||||||
|
const lineDataLen = this.lineData.length
|
||||||
|
if (!lineDataLen) return
|
||||||
|
const currentLineData = this.lineData[lineDataLen - 1]
|
||||||
|
const coordinates = currentLineData.coordinates
|
||||||
|
const coordinatesLen = coordinates.length
|
||||||
|
if (!coordinatesLen) return
|
||||||
|
let startPos
|
||||||
|
let endPos
|
||||||
|
if (coordinatesLen < 2) {
|
||||||
|
// only start, no move event
|
||||||
|
startPos = coordinates[coordinatesLen - 1]
|
||||||
|
endPos = {
|
||||||
|
x: startPos.x + 1,
|
||||||
|
y: startPos.y
|
||||||
}
|
}
|
||||||
]
|
} else {
|
||||||
})
|
startPos = coordinates[coordinatesLen - 2]
|
||||||
this.drawLine()
|
endPos = coordinates[coordinatesLen - 1]
|
||||||
},
|
}
|
||||||
onTouchMove(e) {
|
|
||||||
const pos = e.touches[0]
|
const style = currentLineData.style
|
||||||
this.lineData[this.lineData.length - 1].coordinates.push({
|
|
||||||
type: e.type,
|
|
||||||
x: pos.x,
|
|
||||||
y: pos.y
|
|
||||||
})
|
|
||||||
this.drawLine()
|
|
||||||
},
|
|
||||||
onTouchEnd(e) {
|
|
||||||
// console.log(e.type, e)
|
|
||||||
},
|
|
||||||
// 清空画布
|
|
||||||
clear() {
|
|
||||||
this.lineData = []
|
|
||||||
canvasCtx.clearRect(0, 0, this.winWidth, this.winHeight)
|
|
||||||
canvasCtx.draw()
|
|
||||||
},
|
|
||||||
// 撤销
|
|
||||||
revoke() {
|
|
||||||
this.lineData.pop()
|
|
||||||
this.lineData.forEach((item, index) => {
|
|
||||||
canvasCtx.beginPath()
|
canvasCtx.beginPath()
|
||||||
canvasCtx.setLineCap('round')
|
canvasCtx.setLineCap('round')
|
||||||
canvasCtx.setStrokeStyle(item.style.color)
|
canvasCtx.setStrokeStyle(style.color)
|
||||||
canvasCtx.setLineWidth(item.style.width)
|
canvasCtx.setLineWidth(style.width)
|
||||||
item.coordinates.forEach(pos => {
|
canvasCtx.moveTo(startPos.x, startPos.y)
|
||||||
if (pos.type == 'touchstart') {
|
canvasCtx.lineTo(endPos.x, endPos.y)
|
||||||
canvasCtx.moveTo(pos.x, pos.y)
|
// const P1 = this.caculateBezier(startPos, endPos, centerPos)
|
||||||
} else {
|
// console.log(P1.x, P1.y)
|
||||||
canvasCtx.lineTo(pos.x, pos.y)
|
// canvasCtx.moveTo(startPos.x, startPos.y)
|
||||||
}
|
// canvasCtx.quadraticCurveTo(P1.x, P1.y, endPos.x, endPos.y)
|
||||||
})
|
|
||||||
canvasCtx.stroke()
|
canvasCtx.stroke()
|
||||||
})
|
canvasCtx.draw(true)
|
||||||
canvasCtx.draw()
|
},
|
||||||
},
|
canvasToTempFilePath(conf = {}) {
|
||||||
// 绘制线条
|
return new Promise((resolve, reject) => {
|
||||||
drawLine() {
|
uni.canvasToTempFilePath({
|
||||||
const lineDataLen = this.lineData.length
|
canvasId: this.cid,
|
||||||
if (!lineDataLen) return
|
...conf,
|
||||||
const currentLineData = this.lineData[lineDataLen - 1]
|
success: res => {
|
||||||
const coordinates = currentLineData.coordinates
|
resolve(res.tempFilePath)
|
||||||
const coordinatesLen = coordinates.length
|
},
|
||||||
if (!coordinatesLen) return
|
fail: err => {
|
||||||
let startPos
|
console.log('fail', err)
|
||||||
let endPos
|
reject(err)
|
||||||
if (coordinatesLen < 2) {
|
}
|
||||||
// only start, no move event
|
|
||||||
startPos = coordinates[coordinatesLen - 1]
|
|
||||||
endPos = { x: startPos.x + 1, y: startPos.y }
|
|
||||||
} else {
|
|
||||||
startPos = coordinates[coordinatesLen - 2]
|
|
||||||
endPos = coordinates[coordinatesLen - 1]
|
|
||||||
}
|
|
||||||
|
|
||||||
const style = currentLineData.style
|
|
||||||
canvasCtx.beginPath()
|
|
||||||
canvasCtx.setLineCap('round')
|
|
||||||
canvasCtx.setStrokeStyle(style.color)
|
|
||||||
canvasCtx.setLineWidth(style.width)
|
|
||||||
canvasCtx.moveTo(startPos.x, startPos.y)
|
|
||||||
canvasCtx.lineTo(endPos.x, endPos.y)
|
|
||||||
// const P1 = this.caculateBezier(startPos, endPos, centerPos)
|
|
||||||
// console.log(P1.x, P1.y)
|
|
||||||
// canvasCtx.moveTo(startPos.x, startPos.y)
|
|
||||||
// canvasCtx.quadraticCurveTo(P1.x, P1.y, endPos.x, endPos.y)
|
|
||||||
canvasCtx.stroke()
|
|
||||||
canvasCtx.draw(true)
|
|
||||||
},
|
|
||||||
canvasToTempFilePath(conf = {}) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
uni.canvasToTempFilePath(
|
|
||||||
{
|
|
||||||
canvasId: this.cid,
|
|
||||||
...conf,
|
|
||||||
success: res => {
|
|
||||||
resolve(res.tempFilePath)
|
|
||||||
},
|
},
|
||||||
fail: err => {
|
this
|
||||||
console.log('fail', err)
|
)
|
||||||
reject(err)
|
})
|
||||||
}
|
},
|
||||||
},
|
setLineWidth(numberVal) {
|
||||||
this
|
this.penLineWidth = numberVal
|
||||||
)
|
},
|
||||||
})
|
provideInterface() {
|
||||||
},
|
return {
|
||||||
setLineWidth(numberVal) {
|
cid: this.cid,
|
||||||
this.penLineWidth = numberVal
|
ctx: canvasCtx,
|
||||||
},
|
clear: this.clear,
|
||||||
provideInterface() {
|
revoke: this.revoke,
|
||||||
return {
|
canvasToTempFilePath: this.canvasToTempFilePath,
|
||||||
cid: this.cid,
|
setLineWidth: this.setLineWidth
|
||||||
ctx: canvasCtx,
|
}
|
||||||
clear: this.clear,
|
},
|
||||||
revoke: this.revoke,
|
/**
|
||||||
canvasToTempFilePath: this.canvasToTempFilePath,
|
* 计算二次贝塞尔曲线 控制点 P1
|
||||||
setLineWidth: this.setLineWidth
|
* 起点 P0(x0,y0)、控制点P1(x1, y1)、P2(x2, y2)、曲线上任意点B(x, y)
|
||||||
|
* 二次贝塞尔公式：B(t) = (1-t)²P0 + 2t(1-t)P1 + t²P2
|
||||||
|
* 代入坐标得：
|
||||||
|
* x = (1-t)²*x0 + 2t(1-t)*x1 + t²*x2
|
||||||
|
* 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
|
||||||
|
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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 计算二次贝塞尔曲线 控制点 P1
|
|
||||||
* 起点 P0(x0,y0)、控制点P1(x1, y1)、P2(x2, y2)、曲线上任意点B(x, y)
|
|
||||||
* 二次贝塞尔公式：B(t) = (1-t)²P0 + 2t(1-t)P1 + t²P2
|
|
||||||
* 代入坐标得：
|
|
||||||
* x = (1-t)²*x0 + 2t(1-t)*x1 + t²*x2
|
|
||||||
* 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
|
|
||||||
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 }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.signature-wrap {
|
.signature-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -51,7 +51,8 @@
|
|||||||
"path": "pages/confirmCompletion/confirmCompletion",
|
"path": "pages/confirmCompletion/confirmCompletion",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "当前工单",
|
"navigationBarTitleText": "当前工单",
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false,
|
||||||
|
"disableScroll": true
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
"path": "pages/taskReturn/taskReturn",
|
"path": "pages/taskReturn/taskReturn",
|
||||||
|
|||||||
@ -72,7 +72,7 @@
|
|||||||
<view class="attendantImg" style="border-bottom: 1rpx solid #BAB7B8;">
|
<view class="attendantImg" style="border-bottom: 1rpx solid #BAB7B8;">
|
||||||
用户签名
|
用户签名
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="receive">
|
<!-- <view class="receive">
|
||||||
我确认已接受服务
|
我确认已接受服务
|
||||||
</view> -->
|
</view> -->
|
||||||
<view class="uppicture" @tap='show=true'>
|
<view class="uppicture" @tap='show=true'>
|
||||||
@ -101,8 +101,14 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</u-popup>
|
</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
|
<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>
|
style='background-color: #F4F5F7;position:absolute;bottom:0%;width: 100%;height: 800rpx;'></signature>
|
||||||
</u-mask>
|
</u-mask>
|
||||||
<u-toast ref="uToast" />
|
<u-toast ref="uToast" />
|
||||||
@ -284,7 +290,9 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.app {
|
.app {
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
padding: 0 0 100rpx;
|
padding: 0;
|
||||||
|
overflow: scroll;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
.finishmask {
|
.finishmask {
|
||||||
height: 300rpx;
|
height: 300rpx;
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="" style="background-color: #F4F5F7;">
|
<view class="" style="background-color: #F4F5F7;" @touchmove.stop.prevent>
|
||||||
<Signature @init="onSignInit" style='background-color: #fff;'></Signature>
|
<Signature @init="onSignInit" style='background-color: #fff;'></Signature>
|
||||||
<view class="btns">
|
<view class="btns">
|
||||||
<button @click="clear">清空</button>
|
<button @click="clear">清空</button>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user