fusions-ui 1.2.6 → 1.2.8

package/components/fu-sign-board/fu-sign-board.vue

@@ -1,728 +0,0 @@
-<template>
-	<view class="fu-sign-board-class fu-sign-board" :style="{top: `${customBarHeight}px`, height: `calc(100% - ${customBarHeight}px)`}" v-if="show">
-		<!-- 签名canvas -->
-		<view class="fu-sign-board__content">
-			<view class="fu-sign-board__content__wrapper">
-				<canvas class="fu-sign-board__content__canvas" :canvas-id="canvasName" :disableScroll="true" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></canvas>
-			</view>
-		</view>
-
-		<!-- 底部工具栏 -->
-		<view class="fu-sign-board__tools">
-			<!-- 可选颜色 -->
-			<view class="fu-sign-board__tools__color">
-				<view class="fu-sign-board__tools__color__item"
-					:class="[{'fu-sign-board__tools__color__item--active': currentSelectColor === item}]"
-					:style="{backgroundColor: item}" v-for="(item, index) in signSelectColor" :key="index"
-					@tap="colorSwitch(item)"></view>
-			</view>
-
-			<!-- 按钮 -->
-			<view class="fu-sign-board__tools__button">
-				<view class="fu-sign-board__tools__button__item fu-bg-red" @tap="reDraw">清除</view>
-				<view class="fu-sign-board__tools__button__item fu-bg-blue" @tap="save">保存</view>
-				<view class="fu-sign-board__tools__button__item fu-bg-indigo" @tap="previewImage">预览</view>
-				<view class="fu-sign-board__tools__button__item fu-bg-orange" @tap="closeBoard">关闭</view>
-			</view>
-		</view>
-
-		<!-- 伪全屏生成旋转图片canvas容器，不在页面上展示 -->
-		<view style="position: fixed; left: -2000px;width: 0;height: 0;overflow: hidden;">
-			<canvas canvas-id="temp-fu-sign-canvas" :style="{width: `${canvasHeight}px`, height: `${canvasHeight}px`}"></canvas>
-		</view>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js'
-	/**
-	 * @description SignBoard签名板
-	 * @property {Boolean} show = [true|false] 是否显示（默认 false）
-	 * @property {Array} signSelectColor 可选签名颜色（默认 ['#060606', '#ec3930']）
-	 * @property {Boolean} rotate 是否旋转输出图片（默认 true）
-	 * @property {String,Number} customBarHeight 自定义顶栏的高度（默认 0）
-	 * 
-	 * @event {Function} save 保存时触发
-	 * @event {Function} close 关闭时触发
-	 */
-	export default {
-		name: 'FuSignBoard',
-		emits: ['save', 'close'],
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				canvasName: 'fu-sign-canvas',
-				ctx: null,
-				canvasWidth: 0,
-				canvasHeight: 0,
-				currentSelectColor: this.signSelectColor[0],
-				// 第一次触摸
-				firstTouch: false,
-				// 透明度
-				transparent: 1,
-				// 笔迹倍数
-				lineSize: 1.5,
-				// 最小画笔半径
-				minLine: 0.5,
-				// 最大画笔半径
-				maxLine: 4,
-				// 画笔压力
-				pressure: 1,
-				// 顺滑度，用60的距离来计算速度
-				smoothness: 60,
-				// 当前触摸的点
-				currentPoint: {},
-				// 当前线条
-				currentLine: [],
-				// 画笔圆半径
-				radius: 1,
-				// 裁剪区域
-				cutArea: {
-					top: 0,
-					right: 0,
-					bottom: 0,
-					left: 0
-				},
-				// 上一个点
-				lastPoint: 0,
-				// 笔迹
-				chirography: [],
-				// 画线轨迹，生成线条的实际点
-				linePrack: []
-			}
-		},
-		created() {
-			// 创建canvas
-			this.ctx = uni.createCanvasContext(this.canvasName, this);
-		},
-		methods: {
-			// 获取画板的相关信息
-			getCanvasInfo() {
-				this.$fuGetRect('.fu-sign-board__content__canvas').then(res => {
-					this.canvasWidth = res.width;
-					this.canvasHeight = res.height;
-
-					// 初始化Canvas
-					this.$nextTick(() => {
-						this.initCanvas('#FFFFFF')
-					})
-				})
-			},
-
-			// 初始化Canvas
-			initCanvas(color) {
-				/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
-				// rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
-				// 矩形的宽高需要减去边框的宽度
-				this.ctx.rect(0, 0, this.canvasWidth - uni.upx2px(4), this.canvasHeight - uni.upx2px(4))
-				this.ctx.setFillStyle(color)
-				this.ctx.fill()
-				this.ctx.draw()
-			},
-			
-			// 开始画
-			onTouchStart(e) {
-				// #ifdef APP
-				if(e.type != 'onTouchstart') return false
-				// #endif
-				// #ifndef APP || MP-ALIPAY
-				if (e.type != 'touchstart') return false
-				// #endif
-				// #ifdef MP-ALIPAY
-				if(e.type != 'touchStart') return false
-				// #endif
-				// 设置线条颜色
-				this.ctx.setFillStyle(this.currentSelectColor)
-				// 设置透明度
-				this.ctx.setGlobalAlpha(this.transparent)
-				let currentPoint = {
-					x: e.touches[0].x,
-					y: e.touches[0].y
-				}
-				let currentLine = this.currentLine;
-				currentLine.unshift({
-					time: new Date().getTime(),
-					dis: 0,
-					x: currentPoint.x,
-					y: currentPoint.y
-				})
-				this.currentPoint = currentPoint;
-
-				if (this.firstTouch) {
-					this.cutArea = {
-						top: currentPoint.y,
-						right: currentPoint.x,
-						bottom: currentPoint.y,
-						left: currentPoint.x
-					}
-					this.firstTouch = false;
-				}
-
-				this.pointToLine(currentLine)
-			},
-			
-			// 正在画
-			onTouchMove(e) {
-				// #ifdef APP
-				if(e.type != 'onTouchmove') return false
-				// #endif
-				// #ifndef APP || MP-ALIPAY
-				if (e.type != 'touchmove') return false
-				// #endif
-				// #ifdef MP-ALIPAY
-				if(e.type != 'touchMove') return false
-				// #endif
-				if (e.cancelable) {
-					// 判断默认行为是否已经被禁用
-					if (!e.defaultPrevented) {
-						e.preventDefault()
-					}
-				}
-				let point = {
-					x: e.touches[0].x,
-					y: e.touches[0].y
-				};
-
-				if (point.y < this.cutArea.top) {
-					this.cutArea.top = point.y;
-				}
-				if (point.y < 0) this.cutArea.top = 0
-
-				if (point.x < this.cutArea.right) {
-					this.cutArea.right = point.x;
-				}
-				if (this.canvasWidth - point.x <= 0) {
-					this.cutArea.right = this.canvasWidth;
-				}
-				if (point.y > this.cutArea.bottom) {
-					this.cutArea.bottom = this.canvasHeight;
-				}
-				if (this.canvasHeight - point.y <= 0) {
-					this.cutArea.bottom = this.canvasHeight;
-				}
-				if (point.x < this.cutArea.left) {
-					this.cutArea.left = point.x;
-				}
-				if (point.x < 0) this.cutArea.left = 0
-
-				this.lastPoint = this.currentPoint;
-				this.currentPoint = point;
-
-				let currentLine = this.currentLine;
-				currentLine.unshift({
-					time: new Date().getTime(),
-					dis: this.distance(this.currentPoint, this.lastPoint),
-					x: point.x,
-					y: point.y
-				})
-
-				this.pointToLine(currentLine)
-			},
-			
-			// 移动结束
-			onTouchEnd(e) {
-				// #ifdef APP
-				if(e.type != 'onTouchend') return false
-				// #endif
-				// #ifndef APP || MP-ALIPAY
-				if (e.type != 'touchend') return false
-				// #endif
-				// #ifdef MP-ALIPAY
-				if(e.type != 'touchEnd') return false
-				// #endif
-				let point = {
-					x: e.changedTouches[0].x,
-					y: e.changedTouches[0].y
-				}
-				this.lastPoint = this.currentPoint;
-				this.currentPoint = point;
-
-				let currentLine = this.currentLine;
-				currentLine.unshift({
-					time: new Date().getTime(),
-					dis: this.distance(this.currentPoint, this.lastPoint),
-					x: point.x,
-					y: point.y
-				})
-
-				//一笔结束，保存笔迹的坐标点，清空，当前笔迹
-				//增加判断是否在手写区域
-				this.pointToLine(currentLine)
-				let currentChirography = {
-					lineSize: this.lineSize,
-					lineColor: this.currentSelectColor
-				}
-
-				let chirography = this.chirography;
-				chirography.unshift(currentChirography)
-				this.chirography = chirography;
-
-				let linePrack = this.linePrack;
-				linePrack.unshift(this.currentLine)
-				this.linePrack = linePrack;
-				this.currentLine = [];
-			},
-			
-			// 重置绘画板
-			reDraw() {
-				this.initCanvas('#FFFFFF')
-			},
-			
-			// 保存
-			save() {
-				// 在组件内使用需要第二个参数this
-				uni.canvasToTempFilePath({
-					canvasId: this.canvasName,
-					fileType: 'png',
-					quality: 1,
-					success: (res) => {
-						if (this.rotate) {
-							this.getRotateImage(res.tempFilePath).then((res) => {
-								this.$emit('save', res)
-							}).catch(err => {
-								this.$fu.toast('旋转图片失败')
-							})
-						} else {
-							this.$emit('save', res.tempFilePath)
-						}
-					},
-					fail: () => {
-						this.$fu.toast('保存失败')
-					}
-				}, this)
-			},
-			
-			// 预览图片
-			previewImage() {
-				// 在组件内使用需要第二个参数this
-				uni.canvasToTempFilePath({
-					canvasId: this.canvasName,
-					fileType: 'png',
-					quality: 1,
-					success: (res) => {
-						const tempFilePath = res.tempFilePath;
-						const previewImage = (urls) => {
-							uni.previewImage({
-							  urls: urls
-							});
-						};
-						if (this.rotate) {
-							this.getRotateImage(tempFilePath).then(ret => previewImage([ret])).catch(err => {
-								this.$fu.toast('旋转图片失败');
-							});
-						} else {
-							previewImage([tempFilePath]);
-						}
-					},
-					fail: (e) => {
-						this.$fu.toast('预览失败')
-					}
-				}, this)
-			},
-
-			// 关闭签名板
-			closeBoard() {
-				uni.showModal({
-					title: '提示信息',
-					content: '关闭后内容将被清除，是否确认关闭？',
-					success: res => {
-						if (res.confirm) {
-							this.$emit('close')
-						}
-					}
-				})
-			},
-			
-			// 切换画笔颜色
-			colorSwitch(color) {
-				this.currentSelectColor = color;
-			},
-			
-			// 绘制两点之间的线条
-			pointToLine(line) {
-				this.calcBethelLine(line)
-			},
-			
-			// 计算插值，让线条更加圆滑
-			calcBethelLine(line) {
-				if (line.length <= 1) {
-					line[0].r = this.radius;
-					return
-				}
-				let x0,
-					x1,
-					x2,
-					y0,
-					y1,
-					y2,
-					r0,
-					r1,
-					r2,
-					len,
-					lastRadius,
-					dis = 0,
-					time = 0,
-					curveValue = 0.5;
-				if (line.length <= 2) {
-					x0 = line[1].x;
-					y0 = line[1].y;
-					x2 = line[1].x + (line[0].x - line[1].x) * curveValue;
-					y2 = line[1].y + (line[0].y - line[1].y) * curveValue;
-					x1 = x0 + (x2 - x0) * curveValue;
-					y1 = y0 + (y2 - y0) * curveValue;
-				} else {
-					x0 = line[2].x + (line[1].x - line[2].x) * curveValue;
-					y0 = line[2].y + (line[1].y - line[2].y) * curveValue;
-					x1 = line[1].x;
-					y1 = line[1].y;
-					x2 = x1 + (line[0].x - x1) * curveValue;
-					y2 = y1 + (line[0].y - y1) * curveValue;
-				}
-				// 三个点分别是(x0,y0),(x1,y1),(x2,y2) ；(x1,y1)这个是控制点，控制点不会落在曲线上；实际上，这个点还会手写获取的实际点，却落在曲线上
-				len = this.distance({
-					x: x2,
-					y: y2
-				}, {
-					x: x0,
-					y: y0
-				});
-				lastRadius = this.radius;
-				for (let i = 0; i < line.length - 1; i++) {
-					dis += line[i].dis;
-					time += line[i].time - line[i + 1].time;
-					if (dis > this.smoothness) break
-				}
-
-				this.radius = Math.min((time / len) * this.pressure + this.minLine, this.maxLine) * this.lineSize;
-				line[0].r = this.radius;
-				// 计算笔迹半径
-				if (line.length <= 2) {
-					r0 = (lastRadius + this.radius) / 2;
-					r1 = r0;
-					r2 = r1;
-				} else {
-					r0 = (line[2].r + line[1].r) / 2;
-					r1 = line[1].r;
-					r2 = (line[1].r + line[0].r) / 2;
-				}
-				let n = 5;
-				let point = [];
-				for (let i = 0; i < n; i++) {
-					let t = i / (n - 1);
-					let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2;
-					let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2;
-					let r = lastRadius + ((this.radius - lastRadius) / n) * i;
-					point.push({
-						x,
-						y,
-						r
-					})
-					if (point.length === 3) {
-						let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[
-							2].x, point[2].y, point[2].r)
-						a[0].color = this.currentSelectColor
-
-						this.drawBethel(a, true)
-						point = [{
-							x,
-							y,
-							r
-						}]
-					}
-				}
-				this.currentLine = line;
-			},
-			
-			// 求两点之间的距离
-			distance(a, b) {
-				let x = b.x - a.x;
-				let y = b.y - a.y;
-				return Math.sqrt(x * x + y * y)
-			},
-			
-			// 计算点信息
-			ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) {
-				let a = [],
-					vx01,
-					vy01,
-					norm,
-					n_x0,
-					n_y0,
-					vx21,
-					vy21,
-					n_x2,
-					n_y2;
-				vx01 = x1 - x0;
-				vy01 = y1 - y0;
-				norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2;
-				vx01 = (vx01 / norm) * r0;
-				vy01 = (vy01 / norm) * r0;
-				n_x0 = vy01;
-				n_y0 = -vx01;
-				vx21 = x1 - x2;
-				vy21 = y1 - y2;
-				norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2;
-				vx21 = (vx21 / norm) * r2;
-				vy21 = (vy21 / norm) * r2;
-				n_x2 = -vy21;
-				n_y2 = vx21;
-				a.push({
-					mx: x0 + n_x0,
-					my: y0 + n_y0,
-					color: '#080808'
-				})
-				a.push({
-					c1x: x1 + n_x0,
-					c1y: y1 + n_y0,
-					c2x: x1 + n_x2,
-					c2y: y1 + n_y2,
-					ex: x2 + n_x2,
-					ey: y2 + n_y2
-				})
-				a.push({
-					c1x: x2 + n_x2 - vx21,
-					c1y: y2 + n_y2 - vy21,
-					c2x: x2 - n_x2 - vx21,
-					c2y: y2 - n_y2 - vy21,
-					ex: x2 - n_x2,
-					ey: y2 - n_y2
-				})
-				a.push({
-					c1x: x1 - n_x2,
-					c1y: y1 - n_y2,
-					c2x: x1 - n_x0,
-					c2y: y1 - n_y0,
-					ex: x0 - n_x0,
-					ey: y0 - n_y0
-				})
-				a.push({
-					c1x: x0 - n_x0 - vx01,
-					c1y: y0 - n_y0 - vy01,
-					c2x: x0 + n_x0 - vx01,
-					c2y: y0 + n_y0 - vy01,
-					ex: x0 + n_x0,
-					ey: y0 + n_y0
-				})
-				a[0].mx = a[0].mx.toFixed(1);
-				a[0].mx = parseFloat(a[0].mx);
-				a[0].my = a[0].my.toFixed(1);
-				a[0].my = parseFloat(a[0].my);
-				for (let i = 1; i < a.length; i++) {
-					a[i].c1x = a[i].c1x.toFixed(1);
-					a[i].c1x = parseFloat(a[i].c1x);
-					a[i].c1y = a[i].c1y.toFixed(1);
-					a[i].c1y = parseFloat(a[i].c1y);
-					a[i].c2x = a[i].c2x.toFixed(1);
-					a[i].c2x = parseFloat(a[i].c2x);
-					a[i].c2y = a[i].c2y.toFixed(1);
-					a[i].c2y = parseFloat(a[i].c2y);
-					a[i].ex = a[i].ex.toFixed(1);
-					a[i].ex = parseFloat(a[i].ex);
-					a[i].ey = a[i].ey.toFixed(1);
-					a[i].ey = parseFloat(a[i].ey);
-				}
-				return a
-			},
-			
-			// 绘制贝塞尔曲线
-			drawBethel(point, is_fill, color) {
-				this.ctx.beginPath()
-				this.ctx.moveTo(point[0].mx, point[0].my)
-				if (color != undefined) {
-					this.ctx.setFillStyle(color)
-					this.ctx.setStrokeStyle(color)
-				} else {
-					this.ctx.setFillStyle(point[0].color)
-					this.ctx.setStrokeStyle(point[0].color)
-				}
-				for (let i = 1; i < point.length; i++) {
-					this.ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey)
-				}
-				this.ctx.stroke()
-				if (is_fill != undefined) {
-					//填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )
-					this.ctx.fill()
-				}
-				this.ctx.draw(true)
-			},
-			
-			// 旋转图片
-			async getRotateImage(dataUrl) {
-				// const url = await this.base64ToPath(dataUrl)
-				const url = dataUrl;
-				// 创建新画布
-				const tempCtx = uni.createCanvasContext('temp-fu-sign-canvas', this);
-				const width = this.canvasWidth;
-				const height = this.canvasHeight;
-				tempCtx.restore()
-				tempCtx.save()
-				tempCtx.translate(0, height)
-				tempCtx.rotate(270 * Math.PI / 180)
-				tempCtx.drawImage(url, 0, 0, width, height)
-				tempCtx.draw()
-				return new Promise((resolve, reject) => {
-					setTimeout(() => {
-						uni.canvasToTempFilePath({
-							canvasId: 'temp-fu-sign-canvas',
-							fileType: 'png',
-							x: 0,
-							y: height - width,
-							width: height,
-							height: width,
-							success: res => resolve(res.tempFilePath),
-							fail: reject
-						}, this)
-					}, 50)
-				})
-			},
-			
-			// 将base64转换为本地
-			base64ToPath(dataUrl) {
-				return new Promise((resolve, reject) => {
-					// 判断地址是否包含bas64字样，不包含直接返回
-					if (dataUrl.indexOf('base64') !== -1) {
-						const data = uni.base64ToArrayBuffer(dataUrl.replace(/^data:image\/\w+;base64,/, ''));
-						// #ifdef MP-WEIXIN
-						const filePath = `${wx.env.USER_DATA_PATH}/${new Date().getTime()}-${Math.random().toString(32).slice(2)}.png`;
-						// #endif
-						// #ifndef MP-WEIXIN
-						const filePath = `${new Date().getTime()}-${Math.random().toString(32).slice(2)}.png`;
-						// #endif
-						uni.getFileSystemManager().writeFile({
-							filePath,
-							data,
-							encoding: 'base64',
-							success: () => resolve(filePath),
-							fail: reject
-						})
-					} else {
-						resolve(dataUrl)
-					}
-				})
-			}
-		},
-		watch: {
-			show(value) {
-				if (value && this.canvasWidth === 0 && this.canvasHeight === 0) {
-					// 获取画板的相关信息
-					this.$nextTick(() => {
-						this.getCanvasInfo()
-					})
-				}
-			},
-			signSelectColor(value) {
-				if (value.length > 0) {
-					this.currentSelectColor = value[0];
-				}
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.fu-sign-board {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		width: 100%;
-		height: 100%;
-		background-color: #E6E6E6;
-		z-index: 997;
-		display: flex;
-		flex-direction: row-reverse;
-
-		&__content {
-			width: 84%;
-			height: 100%;
-
-			&__wrapper {
-				width: calc(100% - 60rpx);
-				height: calc(100% - 60rpx);
-				margin: 30rpx;
-				border-radius: 20rpx;
-				border: 2rpx dotted #AAAAAA;
-				overflow: hidden;
-			}
-
-			&__canvas {
-				width: 100%;
-				height: 100%;
-				background-color: #FFFFFF;
-			}
-		}
-
-		&__tools {
-			width: 16%;
-			height: 100%;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: space-between;
-
-			&__color {
-				margin-top: 30rpx;
-
-				&__item {
-					width: 70rpx;
-					height: 70rpx;
-					border-radius: 100rpx;
-					margin: 20rpx auto;
-
-					&--active {
-						position: relative;
-
-						&::after {
-							content: '';
-							position: absolute;
-							top: 50%;
-							left: 50%;
-							width: 40%;
-							height: 40%;
-							border-radius: 100rpx;
-							background-color: #FFFFFF;
-							transform: translate(-50%, -50%);
-						}
-					}
-				}
-			}
-
-			&__button {
-				margin-bottom: 30rpx;
-				display: flex;
-				flex-direction: column;
-
-				&__item {
-					width: 130rpx;
-					height: 60rpx;
-					line-height: 60rpx;
-					text-align: center;
-					margin: 60rpx auto;
-					border-radius: 10rpx;
-					color: #FFFFFF;
-					transform-origin: center center;
-					transform: rotateZ(90deg);
-				}
-			}
-		}
-	}
-
-	.fu-bg-red {
-		background-color: #E83A30;
-	}
-
-	.fu-bg-blue {
-		background-color: #3D7EFF;
-	}
-
-	.fu-bg-indigo {
-		background-color: #31C9E8;
-	}
-
-	.fu-bg-orange {
-		background-color: #FFA726;
-	}
-</style>