fusions-ui 1.2.7 → 1.2.9

package/components/sign-board/src/composables/use-sign-board.ts

@@ -0,0 +1,552 @@
+import { getCurrentInstance, onMounted, ref, watch, type SetupContext, nextTick } from 'vue';
+import type { SignBoardProps, SignBoardEmits } from '../sign-board';
+import { useCommon } from '../../../../hooks';
+
+export const useSignBoard = (props: SignBoardProps, $emit: SetupContext<SignBoardEmits>['emit']) => {
+	const instance = getCurrentInstance();
+	const { getRect } = useCommon();
+	const canvasId = uni.$fu.uuid();
+	const canvasWidth = ref<number>(0);
+	const canvasHeight = ref<number>(0);
+	const currentSelectColor = ref(props.signSelectColor[0]);
+	const firstTouch = ref<boolean>(false); // 第一次触摸
+	const transparent = ref<number>(1); // 透明度
+	const lineSize = ref<number>(1.5); // 笔迹倍数
+	const minLine = ref<number>(0.5); // 最小画笔半径
+	const maxLine = ref<number>(4); // 最大画笔半径
+	const pressure = ref<number>(1); // 画笔压力
+	const smoothness = ref<number>(60); // 顺滑度，用60的距离来计算速度
+	const currentPoint = ref({}); // 当前触摸的点
+	const currentLine = ref([]); // 当前线条
+	const radius = ref<number>(1); // 画笔圆半径
+	const cutArea = ref({
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	}); // 裁剪区域
+	const lastPoint = ref(0); // 上一个点
+	const chirography = ref([]); // 笔迹
+	const linePrack = ref([]); // 画线轨迹，生成线条的实际点
+	let secondParam: any;
+	let ctx: any = null;
+	
+	// 获取画板的相关信息
+	const getCanvasInfo = () => {
+		getRect('.fu-sign-board__content__canvas').then((res: any) => {
+			canvasWidth.value = res.width;
+			canvasHeight.value = res.height;
+
+			// 初始化Canvas
+			nextTick(() => {
+				initCanvas('#FFFFFF')
+			})
+		})
+	};
+	
+	// 初始化Canvas
+	const initCanvas = (color: string) => {
+		/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
+		// rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
+		// 矩形的宽高需要减去边框的宽度
+		ctx.rect(0, 0, canvasWidth.value - uni.upx2px(4), canvasHeight.value - uni.upx2px(4))
+		ctx.setFillStyle(color)
+		ctx.fill()
+		ctx.draw()
+	};
+	
+	// 开始画
+	const onTouchStart = (e: any) => {
+		// #ifdef APP
+		if(e.type != 'onTouchstart') return false
+		// #endif
+		// #ifdef MP-ALIPAY
+		if(e.type != 'touchStart') return false
+		// #endif
+		// #ifndef APP || MP-ALIPAY
+		if (e.type != 'touchstart') return false
+		// #endif
+		
+		// 设置线条颜色
+		ctx.setFillStyle(currentSelectColor.value)
+		// 设置透明度
+		ctx.setGlobalAlpha(transparent.value)
+		let currentPointData = {
+			x: e.touches[0].x,
+			y: e.touches[0].y
+		}
+		let currentLineData = currentLine.value;
+		currentLineData.unshift({
+			time: new Date().getTime(),
+			dis: 0,
+			x: currentPointData.x,
+			y: currentPointData.y
+		})
+		currentPoint.value = currentPointData;
+
+		if (firstTouch.value) {
+			cutArea.value = {
+				top: currentPointData.y,
+				right: currentPointData.x,
+				bottom: currentPointData.y,
+				left: currentPointData.x
+			}
+			firstTouch.value = false;
+		}
+
+		pointToLine(currentLine.value)
+	};
+	
+	// 正在画
+	const onTouchMove = (e: any) => {
+		// #ifdef APP
+		if(e.type != 'onTouchmove') return false
+		// #endif
+		// #ifdef MP-ALIPAY
+		if(e.type != 'touchMove') return false
+		// #endif
+		// #ifndef APP || 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 < cutArea.value.top) {
+			cutArea.value.top = point.y;
+		}
+		if (point.y < 0) cutArea.value.top = 0
+
+		if (point.x < cutArea.value.right) {
+			cutArea.value.right = point.x;
+		}
+		if (canvasWidth.value - point.x <= 0) {
+			cutArea.value.right = canvasWidth.value;
+		}
+		if (point.y > cutArea.value.bottom) {
+			cutArea.value.bottom = canvasHeight.value;
+		}
+		if (canvasHeight.value - point.y <= 0) {
+			cutArea.value.bottom = canvasHeight.value;
+		}
+		if (point.x < cutArea.value.left) {
+			cutArea.value.left = point.x;
+		}
+		if (point.x < 0) cutArea.value.left = 0
+
+		lastPoint.value = (currentPoint.value as number);
+		currentPoint.value = point;
+
+		let currentLineData = currentLine.value;
+		currentLineData.unshift({
+			time: new Date().getTime(),
+			dis: distance(currentPoint.value, lastPoint.value),
+			x: point.x,
+			y: point.y
+		})
+
+		pointToLine(currentLine.value)
+	};
+	
+	// 移动结束
+	const onTouchEnd = (e: any) => {
+		// #ifdef APP
+		if(e.type != 'onTouchend') return false
+		// #endif
+		// #ifdef MP-ALIPAY
+		if(e.type != 'touchEnd') return false
+		// #endif
+		// #ifndef APP || MP-ALIPAY
+		if (e.type != 'touchend') return false
+		// #endif
+		let point = {
+			x: e.changedTouches[0].x,
+			y: e.changedTouches[0].y
+		}
+		lastPoint.value = (currentPoint.value as number);
+		currentPoint.value = point;
+
+		let currentLineData = currentLine.value;
+		currentLineData.unshift({
+			time: new Date().getTime(),
+			dis: distance(currentPoint.value, lastPoint.value),
+			x: point.x,
+			y: point.y
+		})
+
+		//一笔结束，保存笔迹的坐标点，清空，当前笔迹
+		//增加判断是否在手写区域
+		pointToLine(currentLine.value)
+		let currentChirography = {
+			lineSize: lineSize.value,
+			lineColor: currentSelectColor.value
+		}
+
+		chirography.value.unshift(currentChirography)
+		linePrack.value.unshift(currentLine.value)
+		currentLine.value = [];
+	};
+	
+	// 绘制两点之间的线条
+	const pointToLine = (line: any) => {
+		calcBethelLine(line)
+	};
+	
+	// 求两点之间的距离
+	const distance = (a: any, b: any): number => {
+		let x = b.x - a.x;
+		let y = b.y - a.y;
+		return Math.sqrt(x * x + y * y)
+	};
+	
+	// 计算插值，让线条更加圆滑
+	const calcBethelLine = (line: any) => {
+		if (line.length <= 1) {
+			line[0].r = radius.value;
+			return
+		}
+		let x0: number,
+			x1: number,
+			x2: number,
+			y0: number,
+			y1: number,
+			y2: number,
+			r0: number,
+			r1: number,
+			r2: number,
+			len: number,
+			lastRadius: number,
+			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 = distance({
+			x: x2,
+			y: y2
+		}, {
+			x: x0,
+			y: y0
+		});
+		lastRadius = radius.value;
+		for (let i = 0; i < line.length - 1; i++) {
+			dis += line[i].dis;
+			time += line[i].time - line[i + 1].time;
+			if (dis > smoothness.value) break
+		}
+
+		radius.value = Math.min((time / len) * pressure.value + minLine.value, maxLine.value) * lineSize.value;
+		line[0].r = radius.value;
+		// 计算笔迹半径
+		if (line.length <= 2) {
+			r0 = (lastRadius + radius.value) / 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 + ((radius.value - lastRadius) / n) * i;
+			point.push({
+				x,
+				y,
+				r
+			})
+			if (point.length === 3) {
+				let a = 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 = currentSelectColor.value
+
+				drawBethel(a, true)
+				point = [{
+					x,
+					y,
+					r
+				}]
+			}
+		}
+		currentLine.value = line;
+	};
+	
+	// 计算点信息
+	const ctaCalc = (x0: number, y0: number, r0: number, x1: number, y1: number, r1: number, x2: number, y2: number, r2: number) => {
+		let a = [],
+			vx01: number,
+			vy01: number,
+			norm: number,
+			n_x0: number,
+			n_y0: number,
+			vx21: number,
+			vy21: number,
+			n_x2: number,
+			n_y2: number;
+		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
+	};
+	
+	// 绘制贝塞尔曲线
+	const drawBethel = (point: any, is_fill?: boolean, color?: string) => {
+		ctx.beginPath()
+		ctx.moveTo(point[0].mx, point[0].my)
+		if (color != undefined) {
+			ctx.setFillStyle(color)
+			ctx.setStrokeStyle(color)
+		} else {
+			ctx.setFillStyle(point[0].color)
+			ctx.setStrokeStyle(point[0].color)
+		}
+		for (let i = 1; i < point.length; i++) {
+			ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey)
+		}
+		ctx.stroke()
+		if (is_fill != undefined) {
+			//填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )
+			ctx.fill()
+		}
+		ctx.draw(true)
+	};
+	
+	// 重置绘画板
+	const resetDraw = () => {
+		initCanvas('#FFFFFF')
+	};
+	
+	// 保存
+	const handleSave = () => {
+		// 在组件内使用需要第二个参数instance
+		uni.canvasToTempFilePath({
+			canvasId,
+			fileType: 'png',
+			quality: 1,
+			success: (res) => {
+				if (props.rotate) {
+					getRotateImage(res.tempFilePath).then((res: any) => {
+						$emit('save', res)
+					}).catch(() => {
+						uni.$fu.toast('旋转图片失败')
+					})
+				} else {
+					$emit('save', res.tempFilePath)
+				}
+			},
+			fail: () => {
+				uni.$fu.toast('保存失败')
+			}
+		}, secondParam)
+	};
+	
+	// 预览图片
+	const previewImage = () => {
+		// 在组件内使用需要第二个参数instance
+		uni.canvasToTempFilePath({
+			canvasId,
+			fileType: 'png',
+			quality: 1,
+			success: (res) => {
+				const tempFilePath = res.tempFilePath;
+				const previewImage = (urls: any) => {
+					uni.previewImage({
+					  urls: urls
+					});
+				};
+				if (props.rotate) {
+					getRotateImage(tempFilePath).then((ret: any) => previewImage([ret])).catch(() => {
+						uni.$fu.toast('旋转图片失败');
+					});
+				} else {
+					previewImage([tempFilePath]);
+				}
+			},
+			fail: () => {
+				uni.$fu.toast('预览失败')
+			}
+		}, secondParam)
+	};
+	
+	// 关闭签名板
+	const closeBoard = () => {
+		uni.showModal({
+			title: '提示信息',
+			content: '关闭后内容将被清除，是否确认关闭？',
+			success: res => {
+				if (res.confirm) {
+					$emit('close')
+				}
+			}
+		})
+	};
+	
+	// 切换画笔颜色
+	const colorSwitch = (color: string) => {
+		currentSelectColor.value = color;
+	};
+	
+	// 旋转图片
+	const getRotateImage = async (dataUrl: string): Promise<string> => {
+		const url = dataUrl;
+		// 创建新画布
+		const tempCtx = uni.createCanvasContext('temp-fu-sign-canvas', secondParam);
+		const width = canvasWidth.value;
+		const height = canvasHeight.value;
+		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
+				}, secondParam)
+			}, 50)
+		})
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		// 创建canvas上下文
+		// #ifndef MP-ALIPAY
+		secondParam = instance?.proxy;
+		// #endif
+		ctx = uni.createCanvasContext(canvasId, secondParam);
+	});
+	
+	// watch监听事件
+	watch(() => props.show, (newVal) => {
+		if (newVal && canvasWidth.value === 0 && canvasHeight.value === 0) {
+			// 获取画板的相关信息
+			nextTick(() => {
+				getCanvasInfo()
+			})
+		} else {
+			nextTick(() => {
+				ctx && initCanvas('#FFFFFF')
+			})
+		}
+	}, { immediate: true });
+	
+	watch(() => props.signSelectColor, (newVal) => {
+		if (newVal.length > 0) {
+			currentSelectColor.value = newVal[0];
+		}
+	});
+	
+	return {
+		canvasId,
+		canvasWidth,
+		canvasHeight,
+		currentSelectColor,
+		onTouchStart,
+		onTouchMove,
+		onTouchEnd,
+		resetDraw,
+		handleSave,
+		previewImage,
+		closeBoard,
+		colorSwitch
+	}
+}

package/components/sign-board/src/sign-board.ts

@@ -0,0 +1,48 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const signBoardProps = {
+	/**
+	 * @description 是否显示
+	 * @default false
+	 */
+	show: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 可选签名颜色
+	 */
+	signSelectColor: {
+		type: Array,
+		default: () => (['#060606', '#ec3930'])
+	},
+	/**
+	 * @description 是否旋转输出图片
+	 * @default true
+	 */
+	rotate: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 自定义顶栏的高度
+	 */
+	customBarHeight: {
+		type: [Number, String],
+		default: 0
+	}
+};
+
+export const signBoardEmits = {
+	/**
+	 * 保存时触发回调
+	 */
+	save: (_e: any) => true,
+	/**
+	 * 关闭时触发回调
+	 */
+	close: () => true
+};
+
+export type SignBoardProps = ExtractPropTypes<typeof signBoardProps>;
+export type SignBoardEmits = typeof signBoardEmits;