460 lines
13 KiB
Vue
460 lines
13 KiB
Vue
<template>
|
||
<view class="sign-page">
|
||
<view class="sign-body">
|
||
<canvas
|
||
id="signCanvas"
|
||
canvas-id="signCanvas"
|
||
class="sign-canvas"
|
||
disable-scroll
|
||
@touchstart="signCanvasStart"
|
||
@touchmove="signCanvasMove"
|
||
@touchend="signCanvasEnd"
|
||
></canvas>
|
||
<!-- #ifndef APP -->
|
||
<!--用于临时储存横屏图片的canvas容器，H5和小程序需要-->
|
||
<canvas
|
||
v-if="horizontal"
|
||
id="hsignCanvas"
|
||
canvas-id="hsignCanvas"
|
||
style="position: absolute; left: -1000px; z-index: -1"
|
||
:style="{ width: canvasHeight + 'px', height: canvasWidth + 'px' }"
|
||
></canvas>
|
||
<!-- #endif -->
|
||
</view>
|
||
<!-- <view class="sign-footer" :class="[horizontal ? 'horizontal-btns' : 'vertical-btns']">-->
|
||
<!-- <view class="btn" @click="cancel">取消</view>-->
|
||
<!-- <view class="btn" @click="reset">重写</view>-->
|
||
<!-- <view class="btn" @click="confirm">确认</view>-->
|
||
<!-- </view>-->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { pathToBase64, base64ToPath } from './index.js'
|
||
export default {
|
||
name: 'sign',
|
||
props: {
|
||
// 签字板id，用于多签名场景下作为区分
|
||
sid: {
|
||
type: String,
|
||
default: 'sign-board'
|
||
},
|
||
// 背景水印图，优先级大于 bgColor
|
||
bgImg: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 背景纯色底色，为空则透明
|
||
bgColor: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 是否显示水印
|
||
showMark: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 水印内容，可多行
|
||
markText: {
|
||
type: Array,
|
||
default: () => {
|
||
return [] // ['水印1', '水印2']
|
||
}
|
||
},
|
||
// 水印样式
|
||
markStyle: {
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
fontSize: 12, // 水印字体大小
|
||
fontFamily: 'microsoft yahei', // 水印字体
|
||
color: '#cccccc', // 水印字体颜色
|
||
rotate: 60, // 水印旋转角度
|
||
step: 2.2 // 步长，部分场景下可通过调节该参数来调整水印间距，建议为1.4-2.6左右
|
||
}
|
||
}
|
||
},
|
||
// 是否横屏
|
||
horizontal: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 画笔样式
|
||
penStyle: {
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
lineWidth: 3, // 画笔线宽 建议1~5
|
||
color: '#000000' // 画笔颜色
|
||
}
|
||
}
|
||
},
|
||
// 导出图片配置
|
||
expFile: {
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
fileType: 'png', // png/jpg (png不可压缩质量，支持透明；jpg可压缩质量，不支持透明)
|
||
quality: 1 // 范围 0 - 1 (仅jpg支持)
|
||
}
|
||
}
|
||
},
|
||
// 取消时是否需要返回
|
||
needBack: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
canvasCtx: null, // canvascanvasWidth: 0, // canvas宽度
|
||
canvasWidth: 0, // canvas宽度
|
||
canvasHeight: 0, // canvas高度
|
||
x0: 0, // 初始横坐标或上一段touchmove事件中触摸点的横坐标
|
||
y0: 0, // 初始纵坐标或上一段touchmove事件中触摸点的纵坐标
|
||
signFlag: false // 签名旗帜
|
||
}
|
||
},
|
||
computed: {},
|
||
created() {},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.createCanvas()
|
||
})
|
||
},
|
||
methods: {
|
||
// 创建canvas实例
|
||
createCanvas() {
|
||
this.canvasCtx = uni.createCanvasContext('signCanvas', this)
|
||
this.canvasCtx.setLineCap('round') // 向线条的每个末端添加圆形线帽
|
||
|
||
// 获取canvas宽高
|
||
const query = uni.createSelectorQuery().in(this)
|
||
query
|
||
.select('.sign-body')
|
||
.boundingClientRect((data) => {
|
||
this.canvasWidth = data.width
|
||
this.canvasHeight = data.height
|
||
})
|
||
.exec(async () => {
|
||
await this.drawBg()
|
||
this.drawMark(this.markText)
|
||
})
|
||
},
|
||
async drawBg() {
|
||
if (this.bgImg) {
|
||
const img = await uni.getImageInfo({ src: this.bgImg })
|
||
this.canvasCtx.drawImage(img.path, 0, 0, this.canvasWidth, this.canvasHeight)
|
||
} else if (this.bgColor) {
|
||
// 绘制底色填充，否则为透明
|
||
this.canvasCtx.setFillStyle(this.bgColor)
|
||
this.canvasCtx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
|
||
}
|
||
},
|
||
// 绘制动态水印
|
||
drawMark(textArray) {
|
||
if (!this.showMark) {
|
||
this.canvasCtx.draw()
|
||
return
|
||
}
|
||
// 绘制背景
|
||
this.drawBg()
|
||
|
||
// 水印参数
|
||
const markStyle = Object.assign(
|
||
{
|
||
fontSize: 12, // 水印字体大小
|
||
fontFamily: 'microsoft yahei', // 水印字体
|
||
color: '#cccccc', // 水印字体颜色
|
||
rotate: 60, // 水印旋转角度
|
||
step: 2 // 步长，部分场景下可通过调节该参数来调整水印间距，建议为1.4-2.6左右
|
||
},
|
||
this.markStyle
|
||
)
|
||
this.canvasCtx.font = `${markStyle.fontSize}px ${markStyle.fontFamily}`
|
||
this.canvasCtx.fillStyle = markStyle.color
|
||
// 文字坐标
|
||
const maxPx = Math.max(this.canvasWidth / 2, this.canvasHeight / 2)
|
||
const stepPx = Math.floor(maxPx / markStyle.step)
|
||
let arrayX = [0] // 初始水印位置 canvas坐标 0 0 点
|
||
while (arrayX[arrayX.length - 1] < maxPx / 2) {
|
||
arrayX.push(arrayX[arrayX.length - 1] + stepPx)
|
||
}
|
||
arrayX.push(
|
||
...arrayX.slice(1, arrayX.length).map((item) => {
|
||
return -item
|
||
})
|
||
)
|
||
|
||
for (let i = 0; i < arrayX.length; i++) {
|
||
for (let j = 0; j < arrayX.length; j++) {
|
||
this.canvasCtx.save()
|
||
this.canvasCtx.translate(this.canvasWidth / 2, this.canvasHeight / 2) // 画布旋转原点 移到 图片中心
|
||
this.canvasCtx.rotate(Math.PI * (markStyle.rotate / 180))
|
||
textArray.forEach((item, index) => {
|
||
let offsetY = markStyle.fontSize * index
|
||
this.canvasCtx.fillText(item, arrayX[i], arrayX[j] + offsetY)
|
||
})
|
||
this.canvasCtx.restore()
|
||
}
|
||
}
|
||
|
||
this.canvasCtx.draw()
|
||
},
|
||
cancel() {
|
||
//取消按钮事件
|
||
this.$emit('cancel')
|
||
this.reset()
|
||
if (this.needBack) uni.navigateBack()
|
||
},
|
||
async reset() {
|
||
this.$emit('reset')
|
||
this.signFlag = false
|
||
this.canvasCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
|
||
await this.drawBg()
|
||
this.drawMark(this.markText)
|
||
},
|
||
async confirm() {
|
||
this.$emit('confirm')
|
||
// 确认按钮事件
|
||
if (!this.signFlag) {
|
||
uni.showToast({
|
||
title: '请签名后再点击确定',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
|
||
// uni.showModal({
|
||
// title: '确认',
|
||
// content: '确认签名无误吗',
|
||
// showCancel: true,
|
||
// success: async ({ confirm }) => {
|
||
// if (confirm) {
|
||
let tempFile
|
||
if (this.horizontal) {
|
||
tempFile = await this.saveHorizontalCanvas()
|
||
} else {
|
||
tempFile = await this.saveCanvas()
|
||
}
|
||
const base64 = await pathToBase64(tempFile)
|
||
const path = await base64ToPath(base64)
|
||
uni.$emit('getSignImg', { base64, path, sid: this.sid })
|
||
if (this.needBack) uni.navigateBack()
|
||
// }
|
||
// }
|
||
// })
|
||
},
|
||
signCanvasEnd(e) {
|
||
// 签名抬起事件
|
||
// console.log(e, 'signCanvasEnd')
|
||
this.x0 = 0
|
||
this.y0 = 0
|
||
},
|
||
signCanvasMove(e) {
|
||
// 签名滑动事件
|
||
// console.log(e, 'signCanvasMove')
|
||
let dx = e.touches[0].x
|
||
let dy = e.touches[0].y
|
||
|
||
this.canvasCtx.moveTo(this.x0, this.y0)
|
||
this.canvasCtx.lineTo(dx, dy)
|
||
this.canvasCtx.setLineWidth(this.penStyle?.lineWidth || 4)
|
||
this.canvasCtx.strokeStyle = this.penStyle?.color || '#000000' // 赋值过去
|
||
this.canvasCtx.stroke()
|
||
this.canvasCtx.draw(true)
|
||
|
||
this.x0 = e.touches[0].x
|
||
this.y0 = e.touches[0].y
|
||
},
|
||
signCanvasStart(e) {
|
||
// 签名按下事件 app获取的e不一样区分小程序app
|
||
// console.log('signCanvasStart', e)
|
||
if (!this.signFlag) {
|
||
// 第一次开始触碰事件
|
||
this.$emit('firstTouchStart')
|
||
}
|
||
this.signFlag = true
|
||
this.x0 = e.touches[0].x
|
||
this.y0 = e.touches[0].y
|
||
},
|
||
// 保存竖屏图片
|
||
async saveCanvas() {
|
||
return await new Promise((resolve, reject) => {
|
||
uni.canvasToTempFilePath(
|
||
{
|
||
canvasId: 'signCanvas',
|
||
fileType: this.expFile.fileType, // 只支持png和jpg
|
||
quality: this.expFile.quality, // 范围 0 - 1
|
||
success: (res) => {
|
||
if (!res.tempFilePath) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '保存签名失败',
|
||
showCancel: false
|
||
})
|
||
return
|
||
}
|
||
resolve(res.tempFilePath)
|
||
},
|
||
fail: (r) => {
|
||
console.log('图片生成失败：' , r)
|
||
resolve(false)
|
||
}
|
||
},
|
||
this
|
||
)
|
||
})
|
||
},
|
||
// 保存横屏图片
|
||
async saveHorizontalCanvas() {
|
||
return await new Promise((resolve, reject) => {
|
||
uni.canvasToTempFilePath(
|
||
{
|
||
canvasId: 'signCanvas',
|
||
fileType: this.expFile.fileType, // 只支持png和jpg
|
||
success: (res) => {
|
||
if (!res.tempFilePath) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '保存签名失败',
|
||
showCancel: false
|
||
})
|
||
return
|
||
}
|
||
|
||
// #ifdef APP
|
||
uni.compressImage({
|
||
src: res.tempFilePath,
|
||
quality: this.expFile.quality * 100, // 范围 0 - 100
|
||
rotate: 270,
|
||
success: (r) => {
|
||
console.log('==== compressImage :', r)
|
||
resolve(r.tempFilePath)
|
||
}
|
||
})
|
||
// #endif
|
||
|
||
// #ifndef APP
|
||
uni.getImageInfo({
|
||
src: res.tempFilePath,
|
||
success: (r) => {
|
||
// console.log('==== getImageInfo :', r)
|
||
// 将signCanvas的内容复制到hsignCanvas中
|
||
const hcanvasCtx = uni.createCanvasContext('hsignCanvas', this)
|
||
// 横屏宽高互换
|
||
hcanvasCtx.translate(this.canvasHeight / 2, this.canvasWidth / 2)
|
||
hcanvasCtx.rotate(Math.PI * (-90 / 180))
|
||
hcanvasCtx.drawImage(
|
||
r.path,
|
||
-this.canvasWidth / 2,
|
||
-this.canvasHeight / 2,
|
||
this.canvasWidth,
|
||
this.canvasHeight
|
||
)
|
||
hcanvasCtx.draw(false, async () => {
|
||
const hpathRes = await uni.canvasToTempFilePath(
|
||
{
|
||
canvasId: 'hsignCanvas',
|
||
fileType: this.expFile.fileType, // 只支持png和jpg
|
||
quality: this.expFile.quality // 范围 0 - 1
|
||
},
|
||
this
|
||
)
|
||
let tempFile = ''
|
||
if (Array.isArray(hpathRes)) {
|
||
hpathRes.some((item) => {
|
||
if (item) {
|
||
tempFile = item.tempFilePath
|
||
return
|
||
}
|
||
})
|
||
} else {
|
||
tempFile = hpathRes.tempFilePath
|
||
}
|
||
resolve(tempFile)
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
},
|
||
fail: (err) => {
|
||
console.log('图片生成失败：' , err)
|
||
resolve(false)
|
||
}
|
||
},
|
||
this
|
||
)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.sign-page {
|
||
height: 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.sign-body {
|
||
width: 100%;
|
||
flex-grow: 1;
|
||
|
||
.sign-canvas {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.sign-footer {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
border-top: 1px solid #cccccc;
|
||
box-sizing: border-box;
|
||
|
||
.btn {
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
border-radius: 12rpx;
|
||
|
||
&:nth-child(1) {
|
||
background-color: #ff0800;
|
||
color: #ffffff;
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
background-color: #00d000;
|
||
color: #ffffff;
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
background-color: #0184ff;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.vertical-btns {
|
||
.btn {
|
||
width: 120rpx;
|
||
height: 66rpx;
|
||
}
|
||
}
|
||
|
||
.horizontal-btns {
|
||
.btn {
|
||
width: 66rpx;
|
||
height: 120rpx;
|
||
writing-mode: vertical-lr;
|
||
transform: rotate(90deg);
|
||
}
|
||
}
|
||
}
|
||
</style>
|