youxi-app/uni_modules/cool-ui/components/cl-sign/cl-sign.uvue

<template>
	<view class="cl-sign" :class="[pt.className]">
		<canvas
			class="cl-sign__canvas"
			ref="canvasRef"
			:id="canvasId"
			:style="{
				height: `${height}px`,
				width: `${width}px`
			}"
			@touchstart="onTouchStart"
			@touchmove.stop.prevent="onTouchMove"
			@touchend="onTouchEnd"
		></canvas>
	</view>
</template>

<script lang="ts" setup>
import { canvasToPng, getDevicePixelRatio, parsePt, uuid } from "@/cool";
import { computed, getCurrentInstance, nextTick, onMounted, ref, shallowRef, watch } from "vue";

defineOptions({
	name: "cl-sign"
});

// 定义组件属性
const props = defineProps({
	pt: {
		type: Object,
		default: () => ({})
	},
	// 画布宽度
	width: {
		type: Number,
		default: 300
	},
	// 画布高度
	height: {
		type: Number,
		default: 200
	},
	// 线条颜色
	strokeColor: {
		type: String,
		default: "#000000"
	},
	// 线条宽度
	strokeWidth: {
		type: Number,
		default: 3
	},
	// 背景颜色
	backgroundColor: {
		type: String,
		default: "#ffffff"
	},
	// 是否启用毛笔效果
	enableBrush: {
		type: Boolean,
		default: true
	},
	// 最小线条宽度
	minStrokeWidth: {
		type: Number,
		default: 1
	},
	// 最大线条宽度
	maxStrokeWidth: {
		type: Number,
		default: 6
	},
	// 速度敏感度
	velocitySensitivity: {
		type: Number,
		default: 0.7
	}
});

// 定义事件发射器
const emit = defineEmits(["change", "clear"]);

// 获取当前实例
const { proxy } = getCurrentInstance()!;

// 获取设备像素比
const dpr = getDevicePixelRatio();

// 触摸点类型
type Point = { x: number; y: number; time: number };

// 矩形类型
type Rect = { left: number; top: number };

// 透传样式类型定义
type PassThrough = {
	className?: string;
};

// 解析透传样式配置
const pt = computed(() => parsePt<PassThrough>(props.pt));

// 签名组件画布
const canvasRef = shallowRef<UniElement | null>(null);

// 绘图上下文
let drawCtx: CanvasRenderingContext2D | null = null;

// 生成唯一的canvas ID
const canvasId = `cl-sign__${uuid()}`;

// 触摸状态
const isDrawing = ref(false);

// 上一个触摸点
let lastPoint: Point | null = null;

// 当前线条宽度
let currentStrokeWidth = ref(3);

// 速度缓冲数组（用于平滑速度变化）
const velocityBuffer: number[] = [];

// canvas位置信息缓存
let canvasRect: Rect | null = null;

// 获取canvas位置信息
function getCanvasRect(): Promise<Rect> {
	return new Promise((resolve) => {
		// #ifdef MP
		uni.createSelectorQuery()
			.in(proxy)
			.select(`#${canvasId}`)
			.boundingClientRect((rect: any) => {
				if (rect) {
					canvasRect = { left: rect.left, top: rect.top };
					resolve(canvasRect!);
				} else {
					resolve({ left: 0, top: 0 });
				}
			})
			.exec();
		// #endif

		// #ifndef MP
		// 非小程序平台，在需要时通过DOM获取位置信息
		canvasRect = { left: 0, top: 0 };
		resolve(canvasRect!);
		// #endif
	});
}

// 获取触摸点在canvas中的坐标
function getTouchPos(e: TouchEvent): Point {
	const touch = e.touches[0];

	// #ifdef H5
	const rect = (e.target as any).getBoundingClientRect();

	return {
		x: touch.clientX - rect.left,
		y: touch.clientY - rect.top,
		time: Date.now()
	};
	// #endif

	// #ifndef H5
	// 小程序中使用缓存的位置信息或直接使用触摸坐标
	const left = canvasRect?.left ?? 0;
	const top = canvasRect?.top ?? 0;

	return {
		x: touch.clientX - left,
		y: touch.clientY - top,
		time: Date.now()
	};
	// #endif
}

// 计算速度并返回动态线条宽度
function calculateStrokeWidth(currentPoint: Point): number {
	if (lastPoint == null || !props.enableBrush) {
		return props.strokeWidth;
	}

	// 计算距离和时间差
	const distance = Math.sqrt(
		Math.pow(currentPoint.x - lastPoint!.x, 2) + Math.pow(currentPoint.y - lastPoint!.y, 2)
	);
	const timeDelta = currentPoint.time - lastPoint!.time;

	if (timeDelta <= 0) return currentStrokeWidth.value;

	// 计算速度 (像素/毫秒)
	const velocity = distance / timeDelta;

	// 添加到速度缓冲区（用于平滑）
	velocityBuffer.push(velocity);
	if (velocityBuffer.length > 5) {
		velocityBuffer.shift();
	}

	// 计算平均速度
	const avgVelocity = velocityBuffer.reduce((sum, v) => sum + v, 0) / velocityBuffer.length;

	// 根据速度计算线条宽度（速度越快越细）
	const normalizedVelocity = Math.min(avgVelocity * props.velocitySensitivity, 1);
	const widthRange = props.maxStrokeWidth - props.minStrokeWidth;
	const targetWidth = props.maxStrokeWidth - normalizedVelocity * widthRange;

	// 平滑过渡到目标宽度
	const smoothFactor = 0.3;
	return currentStrokeWidth.value + (targetWidth - currentStrokeWidth.value) * smoothFactor;
}

// 触摸开始
async function onTouchStart(e: TouchEvent) {
	e.preventDefault();
	isDrawing.value = true;

	// #ifdef MP
	// 小程序中，如果没有缓存位置信息，先获取
	if (canvasRect == null) {
		await getCanvasRect();
	}
	// #endif

	lastPoint = getTouchPos(e);

	// 初始化线条宽度和清空速度缓冲
	currentStrokeWidth.value = props.enableBrush ? props.maxStrokeWidth : props.strokeWidth;
	velocityBuffer.length = 0;
}

// 触摸移动
function onTouchMove(e: TouchEvent) {
	e.preventDefault();
	if (!isDrawing.value || lastPoint == null || drawCtx == null) return;

	const currentPoint = getTouchPos(e);

	// 计算动态线条宽度
	const strokeWidth = calculateStrokeWidth(currentPoint);
	currentStrokeWidth.value = strokeWidth;

	// 绘制线条
	drawCtx!.beginPath();
	drawCtx!.moveTo(lastPoint!.x * dpr, lastPoint!.y * dpr);
	drawCtx!.lineTo(currentPoint.x * dpr, currentPoint.y * dpr);
	drawCtx!.strokeStyle = props.strokeColor;
	drawCtx!.lineWidth = strokeWidth * dpr;
	drawCtx!.lineCap = "round";
	drawCtx!.lineJoin = "round";
	drawCtx!.stroke();

	lastPoint = currentPoint;
	emit("change");
}

// 触摸结束
function onTouchEnd(e: TouchEvent) {
	e.preventDefault();
	isDrawing.value = false;
	lastPoint = null;
}

// 清除画布
function clear() {
	if (drawCtx == null) return;

	// #ifdef APP
	drawCtx!.reset();
	// #endif

	// #ifndef APP
	drawCtx!.clearRect(0, 0, props.width * dpr, props.height * dpr);
	// #endif

	// 填充背景色
	drawCtx!.fillStyle = props.backgroundColor;
	drawCtx!.fillRect(0, 0, props.width * dpr, props.height * dpr);

	emit("clear");
}

// 获取签名图片
function toPng(): Promise<string> {
	return canvasToPng(canvasRef.value!);
}

// 初始化画布
function initCanvas() {
	uni.createCanvasContextAsync({
		id: canvasId,
		component: proxy,
		success: (context: CanvasContext) => {
			// 获取绘图上下文
			drawCtx = context.getContext("2d")!;
			// 设置宽高
			drawCtx!.canvas.width = props.width * dpr;
			drawCtx!.canvas.height = props.height * dpr;

			// 优化渲染质量
			drawCtx!.textBaseline = "middle";
			drawCtx!.textAlign = "center";
			drawCtx!.miterLimit = 10;

			// 初始化背景
			clear();

			// #ifdef MP
			// 小程序中初始化时获取canvas位置信息
			getCanvasRect();
			// #endif
		}
	});
}

onMounted(() => {
	initCanvas();

	watch(
		computed(() => [props.width, props.height]),
		() => {
			nextTick(() => {
				initCanvas();
			});
		}
	);
});

defineExpose({
	clear,
	toPng
});
</script>