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

<template>
	<view
		class="cl-cropper"
		:class="[
			{
				'is-disabled': disabled
			},
			pt.className
		]"
		@touchmove.stop.prevent
	>
		<view
			class="cl-cropper__container"
			:class="[pt.inner?.className]"
			@touchstart="onImageTouchStart"
			@touchmove="onImageTouchMove"
			@touchend="onImageTouchEnd"
			@touchcancel="onImageTouchEnd"
		>
			<!-- 图片容器 - 可拖拽和缩放的图片区域 -->
			<view class="cl-cropper__image-container">
				<image
					class="cl-cropper__image"
					:class="[pt.image?.className]"
					:src="src"
					:style="imageStyle"
					@load="onImageLoaded"
				></image>
			</view>

			<!-- 遮罩层 - 覆盖裁剪框外的区域 -->
			<view class="cl-cropper__mask">
				<view
					v-for="(item, index) in ['top', 'right', 'bottom', 'left']"
					:key="index"
					:class="`cl-cropper__mask-item cl-cropper__mask-item--${item}`"
					:style="maskStyle[item]!"
				></view>
			</view>

			<!-- 裁剪框 - 可拖拽和调整大小的选择区域 -->
			<view
				class="cl-cropper__crop-box"
				:class="[pt.cropBox?.className]"
				:style="cropBoxStyle"
			>
				<!-- 裁剪区域 - 内部可继续拖拽图片 -->
				<view class="cl-cropper__crop-area" :class="{ 'is-resizing': isResizing }">
					<!-- 九宫格辅助线 - 在调整大小时显示 -->
					<view
						class="cl-cropper__guide-lines"
						:class="{
							'is-show': showGuideLines
						}"
					>
						<view class="cl-cropper__guide-line cl-cropper__guide-line--h1"></view>
						<view class="cl-cropper__guide-line cl-cropper__guide-line--h2"></view>
						<view class="cl-cropper__guide-line cl-cropper__guide-line--v1"></view>
						<view class="cl-cropper__guide-line cl-cropper__guide-line--v2"></view>
					</view>

					<view
						v-for="item in ['tl', 'tr', 'bl', 'br']"
						:key="item"
						class="cl-cropper__drag-point"
						:class="[`cl-cropper__drag-point--${item}`]"
						@touchstart="onResizeStart($event as TouchEvent, item)"
					>
						<view class="cl-cropper__corner-indicator"></view>
					</view>
				</view>
			</view>

			<!-- 操作按钮组 -->
			<view class="cl-cropper__buttons" v-if="showButtons">
				<cl-button
					type="light"
					size="small"
					:pt="{ className: pt.button?.className }"
					@tap="resetCropper"
				>
					重置
				</cl-button>
				<cl-button
					type="primary"
					size="small"
					:pt="{ className: pt.button?.className }"
					@tap="performCrop"
				>
					裁剪
				</cl-button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
// 导入 Vue 3 组合式 API 相关函数
import { computed, ref, reactive, onMounted, type PropType } from "vue";
// 导入透传属性类型定义
import type { PassThroughProps } from "../../types";
// 导入工具函数：解析透传属性和页面钩子
import { parsePt, usePage } from "@/cool";

// 定义容器尺寸类型
type Container = {
	height: number; // 容器高度
	width: number; // 容器宽度
};

// 定义遮罩层样式类型
type MaskStyle = {
	top: UTSJSONObject; // 上方遮罩样式
	right: UTSJSONObject; // 右侧遮罩样式
	bottom: UTSJSONObject; // 下方遮罩样式
	left: UTSJSONObject; // 左侧遮罩样式
};

// 定义图片信息类型
type ImageInfo = {
	width: number; // 图片原始宽度
	height: number; // 图片原始高度
	isLoaded: boolean; // 图片是否已加载
};

// 定义图片变换类型
type Transform = {
	translateX: number; // 水平位移
	translateY: number; // 垂直位移
};

// 定义尺寸类型
type Size = {
	width: number; // 宽度
	height: number; // 高度
};

// 定义裁剪框类型
type CropBox = {
	x: number; // 裁剪框 x 坐标
	y: number; // 裁剪框 y 坐标
	width: number; // 裁剪框宽度
	height: number; // 裁剪框高度
};

// 定义触摸状态类型
type TouchState = {
	startX: number; // 触摸开始 x 坐标
	startY: number; // 触摸开始 y 坐标
	startDistance: number; // 双指触摸开始距离
	startImageWidth: number; // 触摸开始时图片宽度
	startImageHeight: number; // 触摸开始时图片高度
	startTranslateX: number; // 触摸开始时水平位移
	startTranslateY: number; // 触摸开始时垂直位移
	startCropBoxWidth: number; // 触摸开始时裁剪框宽度
	startCropBoxHeight: number; // 触摸开始时裁剪框高度
	isTouching: boolean; // 是否正在触摸
	mode: string; // 触摸模式：image/resizing
	direction: string; // 调整方向：tl/tr/bl/br
};

// 定义组件选项
defineOptions({
	name: "cl-cropper" // 组件名称
});

// 定义组件属性
const props = defineProps({
	// 透传样式配置对象
	pt: {
		type: Object, // 属性类型为对象
		default: () => ({}) // 默认值为空对象
	},
	// 图片源地址
	src: {
		type: String, // 属性类型为字符串
		default: "" // 默认值为空字符串
	},
	// 裁剪框初始宽度（像素）
	cropWidth: {
		type: Number, // 属性类型为数字
		default: 300 // 默认值为 300 像素
	},
	// 裁剪框初始高度（像素）
	cropHeight: {
		type: Number, // 属性类型为数字
		default: 300 // 默认值为 300 像素
	},
	// 图片最大缩放倍数
	maxScale: {
		type: Number, // 属性类型为数字
		default: 3 // 默认值为 3 倍
	},
	// 图片最小缩放倍数
	minScale: {
		type: Number, // 属性类型为数字
		default: 0.5 // 默认值为 0.5 倍
	},
	// 是否显示底部操作按钮
	showButtons: {
		type: Boolean, // 属性类型为布尔值
		default: true // 默认值为显示
	},
	// 输出图片质量（0-1 之间）
	quality: {
		type: Number, // 属性类型为数字
		default: 0.9 // 默认值为 0.9
	},
	// 输出图片格式：jpg 或 png
	format: {
		type: String as PropType<"jpg" | "png">, // 属性类型为联合字符串类型
		default: "jpg" // 默认值为 jpg 格式
	},
	// 是否禁用所有交互操作
	disabled: {
		type: Boolean, // 属性类型为布尔值
		default: false // 默认值为不禁用
	}
});

// 定义事件发射器，支持 crop、load、error 事件
const emit = defineEmits(["crop", "load", "error"]);

// 获取页面实例，用于获取视图尺寸
const page = usePage();

// 定义透传样式配置类型
type PassThrough = {
	className?: string; // 组件根元素类名
	inner?: PassThroughProps; // 内部容器透传属性
	image?: PassThroughProps; // 图片元素透传属性
	cropBox?: PassThroughProps; // 裁剪框透传属性
	button?: PassThroughProps; // 按钮透传属性
};

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

// 创建容器尺寸响应式对象
const container = reactive<Container>({
	height: page.getViewHeight(), // 获取视图高度
	width: page.getViewWidth() // 获取视图宽度
});

// 创建图片信息响应式对象
const imageInfo = reactive<ImageInfo>({
	width: 0, // 初始宽度为 0
	height: 0, // 初始高度为 0
	isLoaded: false // 初始加载状态为未加载
});

// 创建图片变换响应式对象
const transform = reactive<Transform>({
	translateX: 0, // 初始水平位移为 0
	translateY: 0 // 初始垂直位移为 0
});

// 创建图片尺寸响应式对象
const imageSize = reactive<Size>({
	width: 0, // 初始显示宽度为 0
	height: 0 // 初始显示高度为 0
});

// 创建裁剪框响应式对象
const cropBox = reactive<CropBox>({
	x: 0, // 初始 x 坐标为 0
	y: 0, // 初始 y 坐标为 0
	width: props.cropWidth, // 使用传入的裁剪框宽度
	height: props.cropHeight // 使用传入的裁剪框高度
});

// 创建触摸状态响应式对象
const touch = reactive<TouchState>({
	startX: 0, // 初始触摸 x 坐标为 0
	startY: 0, // 初始触摸 y 坐标为 0
	startDistance: 0, // 初始双指距离为 0
	startImageWidth: 0, // 初始图片宽度为 0
	startImageHeight: 0, // 初始图片高度为 0
	startTranslateX: 0, // 初始水平位移为 0
	startTranslateY: 0, // 初始垂直位移为 0
	startCropBoxWidth: 0, // 初始裁剪框宽度为 0
	startCropBoxHeight: 0, // 初始裁剪框高度为 0
	isTouching: false, // 初始触摸状态为未触摸
	mode: "", // 初始触摸模式为空
	direction: "" // 初始调整方向为空
});

// 是否正在调整裁剪框大小的响应式引用
const isResizing = ref(false);

// 是否显示九宫格辅助线的响应式引用
const showGuideLines = ref(false);

// 计算图片样式的计算属性
const imageStyle = computed(() => {
	// 创建基础样式对象
	const style = {
		transform: `translate(${transform.translateX}px, ${transform.translateY}px)`, // 设置图片位移变换
		height: imageSize.height + "px", // 设置图片显示高度
		width: imageSize.width + "px" // 设置图片显示宽度
	};

	// 如果不在触摸状态，添加过渡动画
	if (!touch.isTouching) {
		style["transitionDuration"] = "0.3s"; // 设置过渡动画时长
	}

	// 返回样式对象
	return style;
});

// 计算裁剪框样式的计算属性
const cropBoxStyle = computed(() => {
	// 返回裁剪框定位和尺寸样式
	return {
		left: `${cropBox.x}px`, // 设置裁剪框左边距
		top: `${cropBox.y}px`, // 设置裁剪框上边距
		width: `${cropBox.width}px`, // 设置裁剪框宽度
		height: `${cropBox.height}px` // 设置裁剪框高度
	};
});

// 计算遮罩层样式的计算属性
const maskStyle = computed<MaskStyle>(() => {
	// 返回四个方向的遮罩样式
	return {
		// 上方遮罩样式
		top: {
			height: `${cropBox.y}px`, // 遮罩高度到裁剪框顶部
			width: `${cropBox.width}px`, // 遮罩宽度占满容器
			left: `${cropBox.x}px`
		},
		// 右侧遮罩样式
		right: {
			width: `${container.width - cropBox.x - cropBox.width}px`, // 遮罩宽度为容器宽度减去裁剪框右边距
			height: "100%", // 遮罩高度与裁剪框相同
			top: 0, // 遮罩顶部对齐裁剪框
			left: `${cropBox.x + cropBox.width}px` // 遮罩贴右边
		},
		// 下方遮罩样式
		bottom: {
			height: `${container.height - cropBox.y - cropBox.height}px`, // 遮罩高度为容器高度减去裁剪框下边距
			width: `${cropBox.width}px`, // 遮罩宽度占满容器
			bottom: 0, // 遮罩贴底部
			left: `${cropBox.x}px`
		},
		// 左侧遮罩样式
		left: {
			width: `${cropBox.x}px`, // 遮罩宽度到裁剪框左边
			height: "100%", // 遮罩高度与裁剪框相同
			left: 0
		}
	};
});

// 计算图片最小尺寸的函数
function getMinImageSize(): Size {
	// 如果图片未加载或尺寸无效，返回零尺寸
	if (!imageInfo.isLoaded || imageInfo.width == 0 || imageInfo.height == 0) {
		return { width: 0, height: 0 }; // 返回空尺寸对象
	}

	// 计算图片宽高比
	const ratio = imageInfo.width / imageInfo.height;
	// 计算容器宽高比
	const containerRatio = container.width / container.height;

	// 声明基础显示尺寸变量
	let baseW: number; // 基础显示宽度
	let baseH: number; // 基础显示高度

	// 根据图片和容器的宽高比决定缩放方式
	if (ratio > containerRatio) {
		baseW = container.width; // 宽度占满容器
		baseH = container.width / ratio; // 高度按比例缩放
	} else {
		baseH = container.height; // 高度占满容器
		baseW = container.height * ratio; // 宽度按比例缩放
	}

	// 计算覆盖裁剪框所需的最小缩放比例
	const scaleW = cropBox.width / baseW; // 宽度缩放比例
	const scaleH = cropBox.height / baseH; // 高度缩放比例
	const minScale = Math.max(scaleW, scaleH); // 取最大缩放比例确保完全覆盖

	// 应用最小缩放限制，增加少量容差
	const finalScale = Math.max(props.minScale, minScale * 1.01);

	// 返回最终尺寸
	return {
		width: baseW * finalScale, // 计算最终宽度
		height: baseH * finalScale // 计算最终高度
	};
}

// 初始化裁剪框的函数
function initCropBox() {
	// 设置裁剪框尺寸为传入的初始值
	cropBox.width = props.cropWidth; // 设置裁剪框宽度
	cropBox.height = props.cropHeight; // 设置裁剪框高度
	// 计算裁剪框居中位置
	cropBox.x = (container.width - cropBox.width) / 2; // 水平居中
	cropBox.y = (container.height - cropBox.height) / 2; // 垂直居中

	// 如果图片已加载，确保图片尺寸满足最小要求
	if (imageInfo.isLoaded) {
		const minSize = getMinImageSize(); // 获取最小尺寸
		// 如果当前尺寸小于最小尺寸，更新为最小尺寸
		if (imageSize.width < minSize.width || imageSize.height < minSize.height) {
			imageSize.width = minSize.width; // 更新图片显示宽度
			imageSize.height = minSize.height; // 更新图片显示高度
		}
	}
}

// 设置初始图片尺寸的函数
function setInitialImageSize() {
	// 如果图片未加载或尺寸无效，直接返回
	if (!imageInfo.isLoaded || imageInfo.width == 0 || imageInfo.height == 0) {
		return; // 提前退出函数
	}

	// 计算图片宽高比
	const ratio = imageInfo.width / imageInfo.height;
	// 计算容器宽高比
	const containerRatio = container.width / container.height;

	// 声明基础显示尺寸变量
	let baseW: number; // 基础显示宽度
	let baseH: number; // 基础显示高度

	// 根据图片和容器的宽高比决定缩放方式
	if (ratio > containerRatio) {
		baseW = container.width; // 宽度占满容器
		baseH = container.width / ratio; // 高度按比例缩放
	} else {
		baseH = container.height; // 高度占满容器
		baseW = container.height * ratio; // 宽度按比例缩放
	}

	// 计算覆盖裁剪框所需的缩放比例
	const scaleW = cropBox.width / baseW; // 宽度缩放比例
	const scaleH = cropBox.height / baseH; // 高度缩放比例
	const scale = Math.max(scaleW, scaleH); // 取最大缩放比例

	// 设置图片显示尺寸
	imageSize.width = baseW * scale; // 计算最终显示宽度
	imageSize.height = baseH * scale; // 计算最终显示高度
}

// 调整图片边界的函数，确保图片完全覆盖裁剪框
function adjustBounds() {
	// 如果图片未加载，直接返回
	if (!imageInfo.isLoaded) return;

	// 计算图片中心点坐标
	const centerX = container.width / 2 + transform.translateX; // 图片中心 x 坐标
	const centerY = container.height / 2 + transform.translateY; // 图片中心 y 坐标

	// 计算图片四个边界坐标
	const imgLeft = centerX - imageSize.width / 2; // 图片左边界
	const imgRight = centerX + imageSize.width / 2; // 图片右边界
	const imgTop = centerY - imageSize.height / 2; // 图片上边界
	const imgBottom = centerY + imageSize.height / 2; // 图片下边界

	// 计算裁剪框四个边界坐标
	const cropLeft = cropBox.x; // 裁剪框左边界
	const cropRight = cropBox.x + cropBox.width; // 裁剪框右边界
	const cropTop = cropBox.y; // 裁剪框上边界
	const cropBottom = cropBox.y + cropBox.height; // 裁剪框下边界

	// 获取当前位移值
	let x = transform.translateX; // 当前水平位移
	let y = transform.translateY; // 当前垂直位移

	// 水平方向边界调整
	if (imgLeft > cropLeft) {
		x -= imgLeft - cropLeft; // 如果图片左边界超出裁剪框，向左调整
	} else if (imgRight < cropRight) {
		x += cropRight - imgRight; // 如果图片右边界不足，向右调整
	}

	// 垂直方向边界调整
	if (imgTop > cropTop) {
		y -= imgTop - cropTop; // 如果图片上边界超出裁剪框，向上调整
	} else if (imgBottom < cropBottom) {
		y += cropBottom - imgBottom; // 如果图片下边界不足，向下调整
	}

	// 应用调整后的位移值
	transform.translateX = x; // 更新水平位移
	transform.translateY = y; // 更新垂直位移
}

// 处理图片加载完成事件的函数
function onImageLoaded(e: UniImageLoadEvent) {
	// 更新图片原始尺寸信息
	imageInfo.width = e.detail.width; // 保存图片原始宽度
	imageInfo.height = e.detail.height; // 保存图片原始高度
	imageInfo.isLoaded = true; // 标记图片已加载

	// 执行初始化流程
	initCropBox(); // 初始化裁剪框位置和尺寸
	setInitialImageSize(); // 设置图片初始显示尺寸
	adjustBounds(); // 调整图片边界确保覆盖裁剪框

	// 触发加载完成事件
	emit("load", e); // 向父组件发送加载事件
}

// 开始调整裁剪框尺寸的函数
function onResizeStart(e: TouchEvent, direction: string) {
	// 如果组件被禁用，直接返回
	if (props.disabled) return;

	// 阻止事件冒泡到图片容器
	e.stopPropagation(); // 避免触发图片的触摸事件

	// 设置调整状态
	touch.isTouching = true; // 标记正在触摸
	touch.mode = "resizing"; // 设置为调整尺寸模式
	touch.direction = direction; // 记录调整方向（tl/tr/bl/br）
	isResizing.value = true; // 标记正在调整尺寸
	showGuideLines.value = true; // 显示九宫格辅助线

	// 如果是单指触摸，记录初始状态
	if (e.touches.length == 1) {
		touch.startX = e.touches[0].clientX; // 记录起始 x 坐标
		touch.startY = e.touches[0].clientY; // 记录起始 y 坐标
		touch.startCropBoxWidth = cropBox.width; // 记录起始裁剪框宽度
		touch.startCropBoxHeight = cropBox.height; // 记录起始裁剪框高度
	}
}

// 处理调整裁剪框尺寸移动的函数
function onResizeMove(e: TouchEvent) {
	// 如果组件被禁用、不在触摸状态或不是调整模式，直接返回
	if (props.disabled || !touch.isTouching || touch.mode != "resizing") return;

	// 阻止默认行为和事件冒泡
	e.preventDefault(); // 阻止页面滚动等默认行为
	e.stopPropagation(); // 阻止事件向上冒泡

	// 如果是单指触摸
	if (e.touches.length == 1) {
		// 计算位移差
		const dx = e.touches[0].clientX - touch.startX; // 水平位移差
		const dy = e.touches[0].clientY - touch.startY; // 垂直位移差
		const MIN_SIZE = 50; // 最小裁剪框尺寸

		// 初始化新的裁剪框参数
		let newX = cropBox.x; // 新的 x 坐标
		let newY = cropBox.y; // 新的 y 坐标
		let newW = cropBox.width; // 新的宽度
		let newH = cropBox.height; // 新的高度

		// 根据拖拽方向调整裁剪框
		switch (touch.direction) {
			case "tl": // 左上角拖拽
				newX = Math.max(0, cropBox.x + dx); // x 坐标向右移动
				newY = Math.max(0, cropBox.y + dy); // y 坐标向下移动
				newW = cropBox.width - dx; // 宽度相应减少
				newH = cropBox.height - dy; // 高度相应减少
				break;
			case "tr": // 右上角拖拽
				newY = Math.max(0, cropBox.y + dy); // y 坐标向下移动
				newW = cropBox.width + dx; // 宽度增加
				newH = cropBox.height - dy; // 高度减少
				break;
			case "bl": // 左下角拖拽
				newX = Math.max(0, cropBox.x + dx); // x 坐标向右移动
				newW = cropBox.width - dx; // 宽度减少
				newH = cropBox.height + dy; // 高度增加
				break;
			case "br": // 右下角拖拽
				newW = cropBox.width + dx; // 宽度增加
				newH = cropBox.height + dy; // 高度增加
				break;
		}

		// 验证新尺寸和位置的有效性
		const validSize = newW >= MIN_SIZE && newH >= MIN_SIZE; // 检查尺寸是否满足最小要求
		const inBounds =
			newX >= 0 && // 左边界不超出容器
			newY >= 0 && // 上边界不超出容器
			newX + newW <= container.width && // 右边界不超出容器
			newY + newH <= container.height; // 下边界不超出容器

		// 如果新参数有效，应用更改
		if (validSize && inBounds) {
			cropBox.x = newX; // 更新 x 坐标
			cropBox.y = newY; // 更新 y 坐标
			cropBox.width = newW; // 更新宽度
			cropBox.height = newH; // 更新高度
			// 更新起始坐标为当前位置，用于下次计算增量
			touch.startX = e.touches[0].clientX; // 更新起始 x 坐标
			touch.startY = e.touches[0].clientY; // 更新起始 y 坐标
		}
	}
}

// 居中并调整图片和裁剪框的函数
function centerAndAdjust() {
	// 如果图片未加载，直接返回
	if (!imageInfo.isLoaded) return;

	// 获取当前图片尺寸
	const currentW = imageSize.width; // 当前图片宽度
	const currentH = imageSize.height; // 当前图片高度

	// 计算裁剪框缩放比例
	const scaleX = cropBox.width / touch.startCropBoxWidth; // 水平缩放比例
	const scaleY = cropBox.height / touch.startCropBoxHeight; // 垂直缩放比例
	const cropScale = Math.max(scaleX, scaleY); // 取最大缩放比例

	// 计算图片反向缩放比例
	let imgScale = 1 / cropScale; // 图片缩放倍数（与裁剪框缩放相反）

	// 计算调整后的图片尺寸
	let newW = currentW * imgScale; // 新的图片宽度
	let newH = currentH * imgScale; // 新的图片高度

	// 确保图片能完全覆盖裁剪框
	const minScaleW = cropBox.width / newW; // 宽度最小缩放比例
	const minScaleH = cropBox.height / newH; // 高度最小缩放比例
	const minScale = Math.max(minScaleW, minScaleH); // 取最大值确保完全覆盖

	// 如果需要进一步放大图片
	if (minScale > 1) {
		imgScale *= minScale; // 调整缩放倍数
		newW = currentW * imgScale; // 重新计算宽度
		newH = currentH * imgScale; // 重新计算高度
	}

	// 应用新的图片尺寸
	imageSize.width = newW; // 更新图片显示宽度
	imageSize.height = newH; // 更新图片显示高度

	// 将裁剪框居中显示
	cropBox.x = (container.width - cropBox.width) / 2; // 水平居中
	cropBox.y = (container.height - cropBox.height) / 2; // 垂直居中

	// 调整图片边界
	adjustBounds(); // 确保图片完全覆盖裁剪框
}

// 处理调整尺寸结束事件的函数
function onResizeEnd() {
	// 重置触摸状态
	touch.isTouching = false; // 标记触摸结束
	touch.mode = ""; // 清空触摸模式
	touch.direction = ""; // 清空调整方向
	isResizing.value = false; // 标记停止调整尺寸

	// 执行居中和调整
	centerAndAdjust(); // 重新调整图片和裁剪框

	// 延迟隐藏辅助线
	setTimeout(() => {
		showGuideLines.value = false; // 隐藏九宫格辅助线
	}, 200); // 200ms 后隐藏
}

// 处理图片触摸开始事件的函数
function onImageTouchStart(e: TouchEvent) {
	// 如果组件被禁用或图片未加载，直接返回
	if (props.disabled || !imageInfo.isLoaded) return;

	// 设置触摸状态
	touch.isTouching = true; // 标记正在触摸
	touch.mode = "image"; // 设置触摸模式为图片操作

	// 根据触摸点数量判断操作类型
	if (e.touches.length == 1) {
		// 单指拖拽模式
		touch.startX = e.touches[0].clientX; // 记录起始 x 坐标
		touch.startY = e.touches[0].clientY; // 记录起始 y 坐标
		touch.startTranslateX = transform.translateX; // 记录起始水平位移
		touch.startTranslateY = transform.translateY; // 记录起始垂直位移
	} else if (e.touches.length == 2) {
		// 双指缩放模式
		const t1 = e.touches[0]; // 第一个触摸点
		const t2 = e.touches[1]; // 第二个触摸点

		// 计算两个触摸点之间的初始距离
		touch.startDistance = Math.sqrt(
			Math.pow(t2.clientX - t1.clientX, 2) + Math.pow(t2.clientY - t1.clientY, 2)
		);

		// 记录触摸开始时的图片尺寸
		touch.startImageWidth = imageSize.width; // 起始图片宽度
		touch.startImageHeight = imageSize.height; // 起始图片高度

		// 计算并记录缩放中心点（两个触摸点的中点）
		touch.startX = (t1.clientX + t2.clientX) / 2; // 缩放中心 x 坐标
		touch.startY = (t1.clientY + t2.clientY) / 2; // 缩放中心 y 坐标
		// 记录触摸开始时的位移状态
		touch.startTranslateX = transform.translateX; // 起始水平位移
		touch.startTranslateY = transform.translateY; // 起始垂直位移
	}
}

// 处理图片触摸移动事件的函数
function onImageTouchMove(e: TouchEvent) {
	if (touch.mode == "resizing") {
		onResizeMove(e);
		return;
	}

	// 如果组件被禁用、不在触摸状态或不是图片操作模式，直接返回
	if (props.disabled || !touch.isTouching || touch.mode != "image") return;

	// 阻止默认行为和事件冒泡
	e.preventDefault(); // 阻止页面滚动等默认行为
	e.stopPropagation(); // 阻止事件向上冒泡

	// 根据触摸点数量判断操作类型
	if (e.touches.length == 1) {
		// 单指拖拽模式
		const dx = e.touches[0].clientX - touch.startX; // 计算水平位移差
		const dy = e.touches[0].clientY - touch.startY; // 计算垂直位移差

		// 更新图片位移
		transform.translateX = touch.startTranslateX + dx; // 应用水平位移
		transform.translateY = touch.startTranslateY + dy; // 应用垂直位移
	} else if (e.touches.length == 2) {
		// 双指缩放模式
		const t1 = e.touches[0]; // 第一个触摸点
		const t2 = e.touches[1]; // 第二个触摸点

		// 计算当前两个触摸点之间的距离
		const distance = Math.sqrt(
			Math.pow(t2.clientX - t1.clientX, 2) + Math.pow(t2.clientY - t1.clientY, 2)
		);

		// 计算缩放倍数（当前距离 / 初始距离）
		const scale = distance / touch.startDistance;

		// 计算缩放后的新尺寸
		const newW = touch.startImageWidth * scale; // 新宽度
		const newH = touch.startImageHeight * scale; // 新高度

		// 获取尺寸约束条件
		const minSize = getMinImageSize(); // 最小尺寸限制
		const maxW = container.width * props.maxScale; // 最大宽度限制
		const maxH = container.height * props.maxScale; // 最大高度限制

		// 应用尺寸约束，确保在允许范围内
		const finalW = Math.max(minSize.width, Math.min(maxW, newW)); // 最终宽度
		const finalH = Math.max(minSize.height, Math.min(maxH, newH)); // 最终高度

		// 计算当前缩放中心点
		const centerX = (t1.clientX + t2.clientX) / 2; // 缩放中心 x 坐标
		const centerY = (t1.clientY + t2.clientY) / 2; // 缩放中心 y 坐标

		// 计算尺寸变化量
		const dw = finalW - touch.startImageWidth; // 宽度变化量
		const dh = finalH - touch.startImageHeight; // 高度变化量

		// 计算位移补偿，使缩放围绕触摸中心进行
		const offsetX = ((centerX - container.width / 2) * dw) / (2 * touch.startImageWidth); // 水平位移补偿
		const offsetY = ((centerY - container.height / 2) * dh) / (2 * touch.startImageHeight); // 垂直位移补偿

		// 更新图片尺寸和位移
		imageSize.width = finalW; // 应用新宽度
		imageSize.height = finalH; // 应用新高度
		transform.translateX = touch.startTranslateX - offsetX; // 应用补偿后的水平位移
		transform.translateY = touch.startTranslateY - offsetY; // 应用补偿后的垂直位移
	}
}

// 处理图片触摸结束事件的函数
function onImageTouchEnd() {
	if (touch.mode == "resizing") {
		onResizeEnd();
		return;
	}

	// 重置触摸状态
	touch.isTouching = false; // 标记触摸结束
	touch.mode = ""; // 清空触摸模式
	// 调整图片边界确保完全覆盖裁剪框
	adjustBounds(); // 执行边界调整
}

// 重置裁剪器到初始状态的函数
function resetCropper() {
	// 重新初始化裁剪框
	initCropBox(); // 恢复裁剪框到初始位置和尺寸

	// 根据图片加载状态进行不同处理
	if (imageInfo.isLoaded) {
		setInitialImageSize(); // 重新设置图片初始尺寸
		adjustBounds(); // 调整图片边界
	} else {
		// 如果图片未加载，重置所有状态
		imageSize.width = 0; // 重置图片显示宽度
		imageSize.height = 0; // 重置图片显示高度
		transform.translateX = 0; // 重置水平位移
		transform.translateY = 0; // 重置垂直位移
	}
}

// 执行裁剪操作的函数
function performCrop() {
	// 检查图片是否已加载
	if (!imageInfo.isLoaded) {
		emit("error", "图片尚未加载完成，无法执行裁剪操作"); // 发送错误事件
		return; // 提前退出
	}
}

// 组件挂载时执行的钩子函数
onMounted(() => {
	initCropBox(); // 初始化裁剪框
});
</script>

<style lang="scss" scoped>
.cl-cropper {
	@apply bg-black absolute left-0 top-0 w-full h-full;
	z-index: 100;

	&.is-disabled {
		@apply opacity-50;
	}

	&__container {
		@apply relative w-full h-full;
	}

	&__image-container {
		@apply absolute top-0 left-0 flex items-center justify-center w-full h-full;
	}

	&__mask {
		@apply absolute top-0 left-0 w-full h-full z-10 pointer-events-none;

		&-item {
			@apply absolute;
			background-color: rgba(0, 0, 0, 0.4);
		}
	}

	&__crop-box {
		@apply absolute overflow-visible pointer-events-none;
		z-index: 10;
	}

	&__crop-area {
		@apply relative w-full h-full overflow-visible duration-200 pointer-events-none;
		@apply border border-solid;
		border-color: rgba(255, 255, 255, 0.5);

		&.is-resizing {
			@apply border-primary-500;
		}
	}

	&__guide-lines {
		@apply absolute top-0 left-0 w-full h-full pointer-events-none opacity-0 duration-200;

		&.is-show {
			@apply opacity-100;
		}
	}

	&__guide-line {
		@apply absolute bg-white opacity-70;

		&--h1 {
			@apply top-1/3 left-0 w-full;
			height: 0.5px;
		}

		&--h2 {
			@apply top-2/3 left-0 w-full;
			height: 0.5px;
		}

		&--v1 {
			@apply left-1/3 top-0 h-full;
			width: 0.5px;
		}

		&--v2 {
			@apply left-2/3 top-0 h-full;
			width: 0.5px;
		}
	}

	&__corner-indicator {
		@apply border-white border-solid border-b-transparent border-l-transparent absolute duration-200;
		width: 20px;
		height: 20px;
		border-width: 1px;
	}

	&__drag-point {
		@apply absolute duration-200 flex items-center justify-center pointer-events-auto;
		width: 40px;
		height: 40px;

		&--tl {
			top: -20px;
			left: -20px;

			.cl-cropper__corner-indicator {
				transform: rotate(-90deg);
				left: 20px;
				top: 20px;
			}
		}

		&--tr {
			top: -20px;
			right: -20px;

			.cl-cropper__corner-indicator {
				transform: rotate(0deg);
				right: 20px;
				top: 20px;
			}
		}

		&--bl {
			bottom: -20px;
			left: -20px;

			.cl-cropper__corner-indicator {
				transform: rotate(180deg);
				bottom: 20px;
				left: 20px;
			}
		}

		&--br {
			bottom: -20px;
			right: -20px;

			.cl-cropper__corner-indicator {
				transform: rotate(90deg);
				bottom: 20px;
				right: 20px;
			}
		}
	}

	&__buttons {
		@apply absolute bottom-4 left-0 right-0 flex flex-row justify-center;
	}
}
</style>