<template>
	<!-- 图形编辑器根容器 -->
	<view class="editor-root">
		<!-- 编辑容器包装 - 用于定位控制点，增加额外空间避免裁剪 -->
		<view class="editor-wrapper" :style="wrapperStyle" @touchstart.stop="onWrapperTouchStart"
			@touchmove.stop="onWrapperTouchMove" @touchend.stop="onWrapperTouchEnd" @mousedown.stop="onWrapperMouseDown"
			@mousemove.stop="onWrapperMouseMove" @mouseup.stop="onWrapperMouseUp">

			<!-- 编辑容器 -->
			<view class="editor-container" :style="containerStyle" @click.stop="cancelSelection">
				<!-- 图片层 -->
				<view class="item-layer" :style="itemLayerStyle">
					<image class="editor-image" :src="avatar" @load="onImageLoad" @click.stop="onImageClick"
						:style="imageStyle" />
				</view>

				<!-- 隐藏的canvas用于生成裁剪结果 -->
				<canvas id="croppingCanvas" canvas-id="croppingCanvas" class="cropping-canvas"
					:style="canvasStyle"></canvas>
			</view>

			<!-- 背景遮罩图 - 放在编辑容器之后，这样它会覆盖图片但不会覆盖控制点 -->
			<image v-if="fixturebg.length > 0" class="editor-mask-image" :src="fixturebg" :style="maskImageStyle">
			</image>

			<!-- 辅助线 - 垂直中心线 -->
			<view v-if="showCenterGuides" class="guide-line guide-line-v"
				:style="{ left: '50%', transform: 'translateX(-50%)' }"></view>
			<!-- 辅助线 - 水平中心线 -->
			<view v-if="showCenterGuides" class="guide-line guide-line-h"
				:style="{ top: '35%', transform: 'translateY(-50%)' }"></view>

			<!-- 动态辅助线 - 垂直 -->
			<view v-for="(line, idx) in verticalGuides" :key="'v-' + idx"
				class="guide-line guide-line-v guide-line-active" :style="{ left: (line + 50) + 'px' }"></view>
			<!-- 动态辅助线 - 水平 -->
			<view v-for="(line, idx) in horizontalGuides" :key="'h-' + idx"
				class="guide-line guide-line-h guide-line-active" :style="{ top: (line + 50) + 'px' }"></view>

			<!-- 四角控制点 - 放在 wrapper 中，相对于容器定位但不被裁剪 -->
			<view v-if="showCorners" class="frame-left-top-wrap" :style="cornerWrapStyle('left-top')"
				@touchstart.stop.prevent="(e: UniTouchEvent) => onCornerStart(e, 'left-top')"
				@touchend.stop.prevent="onCornerEnd" @mousedown.stop.prevent="onCornerMouseStart($event, 'left-top')">
				<view class="corner-inner"
					:style="{'border-left-color': currentCorner == 'left-top' ? 'red' : '#fd3da0', 'border-top-color': currentCorner == 'left-top' ? '#F56364' : '#fd3da0'}">
				</view>
			</view>

			<view v-if="showCorners" class="frame-right-top-wrap" :style="cornerWrapStyle('right-top')"
				@touchstart.stop.prevent="(e: UniTouchEvent) => onCornerStart(e, 'right-top')"
				@touchend.stop.prevent="onCornerEnd" @mousedown.stop.prevent="onCornerMouseStart($event, 'right-top')">
				<view class="corner-inner"
					:style="{'border-right-color': currentCorner == 'right-top' ? 'red' : '#fd3da0', 'border-top-color': currentCorner == 'right-top' ? '#F56364' : '#fd3da0'}">
				</view>
			</view>

			<view v-if="showCorners" class="frame-left-bottom-wrap" :style="cornerWrapStyle('left-bottom')"
				@touchstart.stop.prevent="(e: UniTouchEvent) => onCornerStart(e, 'left-bottom')"
				@touchend.stop.prevent="onCornerEnd"
				@mousedown.stop.prevent="onCornerMouseStart($event, 'left-bottom')">
				<view class="corner-inner"
					:style="{'border-left-color': currentCorner == 'left-bottom' ? 'red' : '#fd3da0', 'border-bottom-color': currentCorner == 'left-bottom' ? '#F56364' : '#fd3da0'}">
				</view>
			</view>

			<view v-if="showCorners" class="frame-right-bottom-wrap" :style="cornerWrapStyle('right-bottom')"
				@touchstart.stop.prevent="(e: UniTouchEvent) => onCornerStart(e, 'right-bottom')"
				@touchend.stop.prevent="onCornerEnd"
				@mousedown.stop.prevent="onCornerMouseStart($event, 'right-bottom')">
				<view class="corner-inner"
					:style="{'border-right-color': currentCorner == 'right-bottom' ? 'red' : '#fd3da0', 'border-bottom-color': currentCorner == 'right-bottom' ? '#F56364' : '#fd3da0'}">
				</view>
			</view>

			<!-- 旋转控制点 -->
			<!-- <view v-if="showCorners" :class="[operationType == 'rotate' ? 'rotate-red' : 'rotate']"
				:style="rotateWrapStyle"
				@touchstart.stop.prevent="onRotateStart"
				@touchend.stop.prevent="onRotateEnd"
				@mousedown.stop.prevent="onRotateMouseStart">
				<image class="rotate-icon" src="/static/icon_rotate.png" mode="aspectFit"></image>
			</view> -->
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, watch } from 'vue'
	import { recordPressDownData, dragMove, scaleMove, edgeMove, rotateMove, updateCenterPos, applyAngleSnap, getDistance } from './dragTransform.uts'
	import type { ItemElement, GuideLine } from './dragTransform.uts'

	// 定义 emit
	const emit = defineEmits<{
		cropData : [cropInfo: UTSJSONObject],
		editingChange : [isEditing: boolean]
	}>()

	// Props定义
	const props = defineProps({
		avatar: {
			type: String,
			required: true
		},
		sizewidth: {
			type: Number,
			default: 0
		},
		sizeheight: {
			type: Number,
			default: 0
		},
		isCropping: {
			type: Boolean,
			default: false
		},
		categoryValue: {
			type: String,
			default: ''
		},
		fixturebg: {
			type: String,
			default: ''
		},
		// 新增：是否启用磁性吸附
		enableMagnetic: {
			type: Boolean,
			default: true
		},
		// 新增：是否显示辅助线
		enableGuides: {
			type: Boolean,
			default: true
		}
	})



	// 响应式数据 - 图片元素
	const itemElement = ref<ItemElement>({
		id: 1,
		type: 0, // 图片类型
		index: 1,
		left: 0,
		top: 0,
		width: 0,
		height: 0,
		scale: 1,
		angle: 0,
		active: false,
		activeguide: false,
		activescale: false,
		activehorn: false,
		activeedge: false
	})

	// 编辑状态
	const isSelected = ref<boolean>(false)
	const operationType = ref<string>('') // 'drag', 'scale', 'edge', 'rotate'
	const currentCorner = ref<string>('') // 当前操作的角
	const showCorners = ref<boolean>(true)
	const showEdges = ref<boolean>(false)
	const showRotate = ref<boolean>(false)
	const showCenterGuides = ref<boolean>(false)

	// 辅助线
	const verticalGuides = ref<number[]>([])
	const horizontalGuides = ref<number[]>([])
	const allGuideLines = ref<GuideLine[]>([])

	// 基准尺寸
	const baseWidth = ref<number>(0)
	const baseHeight = ref<number>(0)

	// 触摸/鼠标状态
	const isTouching = ref<boolean>(false)
	const isMouseDown = ref<boolean>(false)
	const touchCount = ref<number>(0)

	// 定义触摸位置类型
	type TouchPosition = {
		x : number
		y : number
	}

	// 触摸状态（已改为触摸触发，不再使用长按）
	const touchStartPos = ref<TouchPosition | null>(null)

	// 双指手势状态
	const isMultiTouch = ref<boolean>(false)
	const initialDistance = ref<number>(0)
	const initialAngle = ref<number>(0)
	const initialScale = ref<number>(1)
	const initialRotation = ref<number>(0)
	const lastTouchTime = ref<number>(0)
	const touchThrottle = 16 // 约60fps，减少更新频率

	// 设备信息
	const screenWidth = ref<number>(375)
	const screenHeight = ref<number>(667)

	// 缩放限制
	const minScale = ref<number>(0.5) // 最小缩放50%
	const maxScale = ref<number>(4) // 最大缩放，将根据屏幕尺寸动态计算

	// ==================== 打印图片左上角位置 ====================
	const printImagePosition = (actionName : string) => {
		const item = itemElement.value

		// 计算缩放比例（显示尺寸相对于原始尺寸的比例）
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const scaleRatio = props.sizewidth / newsizewidth

		// 根据当前缩放值选择合适的偏移系数
		const SCALE_DOWN_ADJUSTMENT = 0.92
		const SCALE_UP_ADJUSTMENT = 1.206
		const OFFSET_ADJUSTMENT = item.scale < 1 ? SCALE_DOWN_ADJUSTMENT : SCALE_UP_ADJUSTMENT

		// 计算图片在容器中的实际显示尺寸（考虑 scale）
		const actualDisplayWidth = item.width * item.scale
		const actualDisplayHeight = item.height * item.scale

		// 计算图片左上角的实际位置（考虑 scale 导致的中心偏移）
		const scaleOffset = (1 - item.scale) / 2 * OFFSET_ADJUSTMENT
		const actualLeft = item.left + item.width * scaleOffset
		const actualTop = item.top + item.height * scaleOffset

		// 将显示坐标和尺寸转换回原始尺寸
		const originalX = actualLeft * scaleRatio
		const originalY = actualTop * scaleRatio
		const originalWidth = actualDisplayWidth * scaleRatio
		const originalHeight = actualDisplayHeight * scaleRatio

		console.log(`========== ${actionName} ==========`)
		console.log('图片左上角位置（显示坐标）:', {
			x: actualLeft.toFixed(2),
			y: actualTop.toFixed(2)
		})
		console.log('图片左上角位置（原始坐标）:', {
			x: originalX.toFixed(2),
			y: originalY.toFixed(2)
		})
		console.log('图片尺寸（显示）:', {
			width: actualDisplayWidth.toFixed(2),
			height: actualDisplayHeight.toFixed(2)
		})
		console.log('图片尺寸（原始）:', {
			width: originalWidth.toFixed(2),
			height: originalHeight.toFixed(2)
		})
		console.log('图片变换:', {
			scale: item.scale.toFixed(3),
			rotation: item.angle.toFixed(2) + '°'
		})
		console.log('==============================')
	}

	// 初始化设备信息
	const initDeviceInfo = () => {
		try {
			const systemInfo = uni.getSystemInfoSync()
			screenWidth.value = systemInfo.screenWidth as number
			screenHeight.value = systemInfo.screenHeight as number
			console.log('[CroppImage] 设备信息初始化完成:', {
				width: systemInfo.screenWidth,
				height: systemInfo.screenHeight
			})
		} catch (error) {
			console.error('[CroppImage] 获取设备信息失败:', error)
		}
	}

	// 计算最大缩放限制
	const calculateMaxScale = () => {
		const item = itemElement.value
		if (item.width <= 0 || item.height <= 0) return

		// 计算容器尺寸
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const aspectRatio = props.sizeheight / props.sizewidth
		const newsizeheight = newsizewidth * aspectRatio

		// 计算最大缩放：图片缩放后不能超过屏幕宽高
		const maxScaleByWidth = screenWidth.value / item.width
		const maxScaleByHeight = screenHeight.value / item.height

		// 取较小值作为最大缩放限制
		maxScale.value = Math.min(maxScaleByWidth, maxScaleByHeight)

		console.log('[CroppImage] 缩放限制计算完成:', {
			minScale: minScale.value,
			maxScale: maxScale.value,
			imageSize: { width: item.width, height: item.height },
			screenSize: { width: screenWidth.value, height: screenHeight.value }
		})
	}

	// ==================== 辅助线管理函数 ====================
	const updateGuideLines = (item : ItemElement) => {
		if (!props.enableGuides) return

		verticalGuides.value = []
		horizontalGuides.value = []

		if (item.isShowLineV == true && item.selectLineLeft != null) {
			verticalGuides.value.push(item.selectLineLeft)
		}
		if (item.isShowLineH == true && item.selectLineTop != null) {
			horizontalGuides.value.push(item.selectLineTop)
		}
	}

	const clearGuideLines = () => {
		verticalGuides.value = []
		horizontalGuides.value = []
	}

	// ==================== 双指手势辅助函数 ====================
	// 计算两点之间的距离（使用 dragTransform.uts 中的 getDistance）
	const getTouchDistance = (touch1X : number, touch1Y : number, touch2X : number, touch2Y : number) : number => {
		return getDistance(touch1X, touch1Y, touch2X, touch2Y)
	}

	// 计算两点连线的角度（用于双指旋转）- 已屏蔽
	// const getTouchAngle = (touch1X : number, touch1Y : number, touch2X : number, touch2Y : number) : number => {
	// 	const dx = touch2X - touch1X
	// 	const dy = touch2Y - touch1Y
	// 	return Math.atan2(dy, dx) * 180 / Math.PI
	// }

	// ==================== 图片拖拽事件处理函数 ====================
	const handleItemTouchStart = (e : UniTouchEvent) => {
		const item = itemElement.value

		// 检查是否是双指操作 - 已屏蔽双指旋转功能
		if (e.touches.length == 2) {
			isMultiTouch.value = true
			operationType.value = 'multi-touch'

			// 记录初始双指距离（仅保留缩放功能）
			initialDistance.value = getTouchDistance(e.touches[0].clientX, e.touches[0].clientY, e.touches[1].clientX, e.touches[1].clientY)
			// initialAngle.value = getTouchAngle(e.touches[0].clientX, e.touches[0].clientY, e.touches[1].clientX, e.touches[1].clientY)
			initialScale.value = item.scale
			// initialRotation.value = item.angle
			lastTouchTime.value = Date.now()
		} else {
			// 单指操作 - 立即触发拖拽（改为触摸触发）
			isTouching.value = true
			operationType.value = 'drag'

			const pos : TouchPosition = {
				x: e.touches[0].clientX,
				y: e.touches[0].clientY
			}
			touchStartPos.value = pos

			item.startX = e.touches[0].clientX
			item.startY = e.touches[0].clientY

			// 立即记录按下数据并触发拖拽
			recordPressDownData(item)

			// 显示中心辅助线
			showCenterGuides.value = true

			// 通知父组件进入编辑状态（隐藏其他UI元素）
			emit('editingChange', true)
		}
	}

	const handleItemTouchMove = (e : UniTouchEvent) => {
		const item = itemElement.value

		// 双指手势处理 - 已屏蔽旋转功能，仅保留缩放
		if (e.touches.length == 2 && isMultiTouch.value) {
			// 节流处理：限制更新频率，减少抖动
			const now = Date.now()
			if (now - lastTouchTime.value < touchThrottle) {
				return
			}
			lastTouchTime.value = now

			// 计算当前双指距离（仅用于缩放）
			const currentDistance = getTouchDistance(e.touches[0].clientX, e.touches[0].clientY, e.touches[1].clientX, e.touches[1].clientY)
			// const currentAngle = getTouchAngle(e.touches[0].clientX, e.touches[0].clientY, e.touches[1].clientX, e.touches[1].clientY)

			// 计算缩放比例变化
			const scaleChange = currentDistance / initialDistance.value
			let newScale = initialScale.value * scaleChange

			// 限制缩放范围：最小50%
			if (newScale < minScale.value) {
				newScale = minScale.value
			}
			// 使用平滑过渡，减少突变
			const smoothFactor = 0.3
			item.scale = item.scale * (1 - smoothFactor) + newScale * smoothFactor

			// 已屏蔽：计算旋转角度变化
			// let angleDiff = currentAngle - initialAngle.value
			// let rawAngle = initialRotation.value + angleDiff

			// 标准化角度到 -180 到 180 范围
			// while (rawAngle > 180) rawAngle -= 360
			// while (rawAngle < -180) rawAngle += 360

			// 应用角度吸附效果
			// let snappedAngle = applyAngleSnap(rawAngle)

			// 使用平滑过渡，减少突变
			// item.angle = item.angle * (1 - smoothFactor) + snappedAngle * smoothFactor

			return
		}

		// 单指操作处理 - 直接执行拖拽（已改为触摸触发）
		if (!isTouching.value) return

		if (operationType.value == 'drag') {
			dragMove(e, item, props.sizewidth, props.sizeheight, allGuideLines.value)

			// 更新辅助线显示
			updateGuideLines(item)
		}
	}

	const handleItemTouchEnd = (e : UniTouchEvent) => {
		// 如果还有触摸点，检查是否从双指变为单指
		if (e.touches.length == 1 && isMultiTouch.value) {
			// 从双指变为单指，立即开始拖拽（改为触摸触发）
			isMultiTouch.value = false
			isTouching.value = true
			operationType.value = 'drag'

			const item = itemElement.value
			const pos : TouchPosition = {
				x: e.touches[0].clientX,
				y: e.touches[0].clientY
			}
			touchStartPos.value = pos
			item.startX = e.touches[0].clientX
			item.startY = e.touches[0].clientY

			// 立即记录按下数据
			recordPressDownData(item)

			// 显示中心辅助线
			showCenterGuides.value = true

			// 通知父组件进入编辑状态（隐藏其他UI元素）
			emit('editingChange', true)
		} else if (e.touches.length == 0) {
			// 所有手指都离开 - 打印图片左上角位置
			printImagePosition('触摸结束')

			// 通知父组件显示UI
			isTouching.value = false
			isMultiTouch.value = false
			operationType.value = ''
			touchStartPos.value = null
			clearGuideLines()

			// 隐藏中心辅助线
			showCenterGuides.value = false

			// 通知父组件退出编辑状态（显示其他UI元素）
			emit('editingChange', false)
		}
	}

	const handleItemMouseDown = (e : any) => {
		isMouseDown.value = true
		operationType.value = 'drag'

		const item = itemElement.value
		const mouseEvent = e as MouseEvent

		// 记录鼠标起始位置
		const pos : TouchPosition = {
			x: mouseEvent.clientX,
			y: mouseEvent.clientY
		}
		touchStartPos.value = pos

		item.startX = mouseEvent.clientX
		item.startY = mouseEvent.clientY

		// 立即记录按下数据并触发拖拽（改为触摸触发）
		recordPressDownData(item)

		// 显示中心辅助线
		showCenterGuides.value = true

		// 通知父组件进入编辑状态（隐藏其他UI元素）
		emit('editingChange', true)
	}

	const handleItemMouseMove = (e : any) => {
		if (!isMouseDown.value) return

		const item = itemElement.value

		// 直接执行拖拽（已改为触摸触发）
		if (operationType.value == 'drag') {
			dragMove(e, item, props.sizewidth, props.sizeheight, allGuideLines.value)
			updateGuideLines(item)
		}
	}

	const handleItemMouseUp = (e : any) => {
		isMouseDown.value = false
		operationType.value = ''
		touchStartPos.value = null
		clearGuideLines()

		// 隐藏中心辅助线
		showCenterGuides.value = false

		// 通知父组件退出编辑状态（显示其他UI元素）
		emit('editingChange', false)
	}

	//  Wrapper 层事件处理（支持图片在容器外拖动）
	const onWrapperTouchStart = (e : UniTouchEvent) => {
		// 检查是否点击在图片层上
		const item = itemElement.value

		// 计算容器尺寸和居中偏移
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const aspectRatio = props.sizeheight / props.sizewidth
		const newsizeheight = newsizewidth * aspectRatio
		const containerOffsetX = (screenWidth.value - newsizewidth) / 2
		// 修正：容器的实际垂直位置 = 35% 的屏幕高度 - 容器高度的一半（因为 transform: translate(-50%, -50%)）
		const containerOffsetY = (screenHeight.value * 0.35) - (newsizeheight / 2)

		// 获取触摸点相对于容器的坐标
		const touchX = e.touches[0].clientX - containerOffsetX
		const touchY = e.touches[0].clientY - containerOffsetY

		// 计算图片层的中心点（相对于容器）
		const itemCenterX = item.left + (item.width * item.scale) / 2
		const itemCenterY = item.top + (item.height * item.scale) / 2

		// 计算触摸点相对于图片中心的距离
		const dx = touchX - itemCenterX
		const dy = touchY - itemCenterY

		// 如果图片有旋转，需要将触摸点坐标转换到图片的本地坐标系
		const angleRad = (-item.angle * Math.PI) / 180 // 反向旋转
		const localX = dx * Math.cos(angleRad) - dy * Math.sin(angleRad)
		const localY = dx * Math.sin(angleRad) + dy * Math.cos(angleRad)

		// 扩大判断范围：增加额外的触摸容差区域（400px增大容差）
		const touchTolerance = 400
		const halfWidth = (item.width * item.scale) / 2 + touchTolerance
		const halfHeight = (item.height * item.scale) / 2 + touchTolerance

		// 在图片的本地坐标系中判断是否在边界内
		const isInImageBounds =
			Math.abs(localX) <= halfWidth &&
			Math.abs(localY) <= halfHeight

		handleItemTouchStart(e)
	}

	const onWrapperTouchMove = (e : UniTouchEvent) => {
		if (!isTouching.value && !isMultiTouch.value) return

		const item = itemElement.value

		// 双指手势处理 - 已屏蔽旋转功能，仅保留缩放
		if (e.touches.length == 2 && isMultiTouch.value) {
			// 节流处理：限制更新频率，减少抖动
			const now = Date.now()
			if (now - lastTouchTime.value < touchThrottle) {
				return
			}
			lastTouchTime.value = now

			// 计算当前双指距离（仅用于缩放）
			const currentDistance = getTouchDistance(e.touches[0].clientX, e.touches[0].clientY, e.touches[1].clientX, e.touches[1].clientY)
			// const currentAngle = getTouchAngle(e.touches[0].clientX, e.touches[0].clientY, e.touches[1].clientX, e.touches[1].clientY)

			// 计算缩放比例变化
			const scaleChange = currentDistance / initialDistance.value
			let newScale = initialScale.value * scaleChange

			// 限制缩放范围：最小50%
			if (newScale < minScale.value) {
				newScale = minScale.value
			}
			// 使用平滑过渡，减少突变
			const smoothFactor = 0.3
			item.scale = item.scale * (1 - smoothFactor) + newScale * smoothFactor

			// 已屏蔽：计算旋转角度变化
			// let angleDiff = currentAngle - initialAngle.value
			// let rawAngle = initialRotation.value + angleDiff

			// 标准化角度到 -180 到 180 范围
			// while (rawAngle > 180) rawAngle -= 360
			// while (rawAngle < -180) rawAngle += 360

			// 应用角度吸附效果
			// let snappedAngle = applyAngleSnap(rawAngle)

			// 使用平滑过渡，减少突变
			// item.angle = item.angle * (1 - smoothFactor) + snappedAngle * smoothFactor

			return
		}

		// 单指操作处理
		if (operationType.value == 'scale') {
			scaleMove(e, item, props.sizewidth, props.sizeheight, allGuideLines.value)
			updateGuideLines(item)
		} else if (operationType.value == 'edge') {
			edgeMove(e, item, props.sizewidth, props.sizeheight, allGuideLines.value)
			updateGuideLines(item)
		} else if (operationType.value == 'rotate') {
			rotateMove(e, item)
		} else if (operationType.value == 'drag') {
			// 拖动处理
			dragMove(e, item, props.sizewidth, props.sizeheight, allGuideLines.value)
			updateGuideLines(item)
		} else {
			// 长按检测阶段的移动处理
			handleItemTouchMove(e)
		}
	}

	const onWrapperTouchEnd = (e : UniTouchEvent) => {
		// 处理触摸结束
		handleItemTouchEnd(e)

		// 额外的清理工作
		if (e.touches.length == 0) {
			if (isTouching.value || isMultiTouch.value) {
				isTouching.value = false
				isMultiTouch.value = false
				operationType.value = ''
				currentCorner.value = ''
				clearGuideLines()

				// 隐藏中心辅助线
				showCenterGuides.value = false

				// 通知父组件退出编辑状态
				emit('editingChange', false)
			}
		}
	}

	const onWrapperMouseDown = (e : any) => {
		// 检查是否点击在图片层上
		const item = itemElement.value
		const mouseEvent = e as MouseEvent

		// 计算容器尺寸和居中偏移
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const aspectRatio = props.sizeheight / props.sizewidth
		const newsizeheight = newsizewidth * aspectRatio
		const containerOffsetX = (screenWidth.value - newsizewidth) / 2
		// 修正：容器的实际垂直位置 = 35% 的屏幕高度 - 容器高度的一半（因为 transform: translate(-50%, -50%)）
		const containerOffsetY = (screenHeight.value * 0.35) - (newsizeheight / 2)

		// 获取鼠标点相对于容器的坐标
		const mouseX = mouseEvent.clientX - containerOffsetX
		const mouseY = mouseEvent.clientY - containerOffsetY

		// 计算图片层的中心点（相对于容器）
		const itemCenterX = item.left + (item.width * item.scale) / 2
		const itemCenterY = item.top + (item.height * item.scale) / 2

		// 计算鼠标点相对于图片中心的距离
		const dx = mouseX - itemCenterX
		const dy = mouseY - itemCenterY

		// 如果图片有旋转，需要将鼠标点坐标转换到图片的本地坐标系
		const angleRad = (-item.angle * Math.PI) / 180
		const localX = dx * Math.cos(angleRad) - dy * Math.sin(angleRad)
		const localY = dx * Math.sin(angleRad) + dy * Math.cos(angleRad)

		// 扩大判断范围：增加额外的触摸容差区域（200px，进一步增大容差）
		const touchTolerance = 200
		const halfWidth = (item.width * item.scale) / 2 + touchTolerance
		const halfHeight = (item.height * item.scale) / 2 + touchTolerance

		// 在图片的本地坐标系中判断是否在边界内
		const isInImageBounds =
			Math.abs(localX) <= halfWidth &&
			Math.abs(localY) <= halfHeight
		// 在图片上，开始处理鼠标事件
		handleItemMouseDown(e)
	}

	const onWrapperMouseMove = (e : any) => {
		if (!isMouseDown.value) return

		const item = itemElement.value

		if (operationType.value == 'scale') {
			scaleMove(e, item, props.sizewidth, props.sizeheight, allGuideLines.value)
			updateGuideLines(item)
		} else if (operationType.value == 'edge') {
			edgeMove(e, item, props.sizewidth, props.sizeheight, allGuideLines.value)
			updateGuideLines(item)
		} else if (operationType.value == 'rotate') {
			rotateMove(e, item)
		} else if (operationType.value == 'drag') {
			// 拖动处理
			dragMove(e, item, props.sizewidth, props.sizeheight, allGuideLines.value)
			updateGuideLines(item)
		} else {
			// 长按检测阶段的移动处理
			handleItemMouseMove(e)
		}
	}

	const onWrapperMouseUp = (e : any) => {
		// 处理鼠标释放
		handleItemMouseUp(e)

		// 额外的清理工作
		if (isMouseDown.value) {
			isMouseDown.value = false
			operationType.value = ''
			currentCorner.value = ''
			clearGuideLines()

			// 隐藏中心辅助线
			showCenterGuides.value = false

			// 通知父组件退出编辑状态
			emit('editingChange', false)
		}
	}

	// 计算属性
	// 计算容器实际显示尺寸的中心位置
	const centerGuideX = computed(() => {
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		return newsizewidth / 2
	})

	const centerGuideY = computed(() => {
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const aspectRatio = props.sizeheight / props.sizewidth
		const newsizeheight = newsizewidth * aspectRatio
		return newsizeheight / 2
	})

	const itemLayerStyle = computed(() => {
		const item = itemElement.value
		return {
			position: 'absolute',
			left: item.left + 'px',
			top: item.top + 'px',
			width: item.width + 'px',
			height: item.height + 'px',
			transform: `scale(${item.scale}) rotate(${item.angle}deg)`,
			transformOrigin: 'center center',
			zIndex: item.index,
			willChange: 'transform', // 优化渲染性能
			transition: isMultiTouch.value ? 'none' : '' // 双指操作时禁用过渡
		}
	})

	const imageStyle = computed(() => {
		return {
			width: '100%',
			height: '100%',
			display: 'block'
		}
	})

	const controlLayerStyle = computed(() => {
		const item = itemElement.value
		return {
			position: 'absolute',
			left: item.left + 'px',
			top: item.top + 'px',
			width: item.width + 'px',
			height: item.height + 'px',
			transform: `scale(${item.scale}) rotate(${item.angle}deg)`,
			transformOrigin: 'center center',
			zIndex: item.index + 100
		}
	})

	const canvasStyle = computed(() => {
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const aspectRatio = props.sizeheight / props.sizewidth
		const newsizeheight = newsizewidth * aspectRatio
		return {
			width: `${newsizewidth}px`,
			height: `${newsizeheight}px`
		}
	})

	const maskImageStyle = computed(() => {
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const aspectRatio = props.sizeheight / props.sizewidth
		const newsizeheight = newsizewidth * aspectRatio
		return {
			width: `${newsizewidth}px`,
			height: `${newsizeheight}px`,
			left: '50%',
			top: '35%',
			transform: 'translate(-50%, -50%)'
		}
	})

	const wrapperStyle = computed(() => {
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const aspectRatio = props.sizeheight / props.sizewidth
		const newsizeheight = newsizewidth * aspectRatio
		// return {
		// 	width: `${newsizewidth + 100}px`,
		// 	height: `${newsizeheight + 100}px`
		// }
		return {
			width: `100%`,
			height: `100%`
		}
	})

	const containerStyle = computed(() => {
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const aspectRatio = props.sizeheight / props.sizewidth
		const newsizeheight = newsizewidth * aspectRatio

		return {
			width: `${newsizewidth}px`,
			height: `${newsizeheight}px`,
			position: 'absolute',
			left: '50%',
			top: '35%',
			transform: 'translate(-50%, -50%)',
			overflow: 'hidden'
		}
	})

	// 四角控制点位置样式
	const cornerWrapStyle = (corner : string) => {
		const item = itemElement.value
		// 当前操作的角放大1.5倍
		const sizeMultiplier = currentCorner.value == corner ? 1.5 : 1

		// 计算控制点的实际宽高（基础60px * 操作放大倍数）
		const controlSize = 60 * sizeMultiplier

		// 计算容器尺寸和居中偏移
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const aspectRatio = props.sizeheight / props.sizewidth
		const newsizeheight = newsizewidth * aspectRatio
		// 容器水平居中在 50%
		const containerOffsetX = (screenWidth.value - newsizewidth) / 2
		// 容器垂直居中在 35%（top: 35% + transform: translate(-50%, -50%)）
		const containerOffsetY = screenHeight.value * 0.35 - newsizeheight / 2

		// 计算图片层的中心点（相对于容器，不包含偏移）
		const itemCenterX = item.left + item.width / 2
		const itemCenterY = item.top + item.height / 2

		// 计算控制点相对于图片中心的偏移（未旋转、未缩放时）
		let offsetX = 0
		let offsetY = 0

		if (corner == 'left-top') {
			offsetX = -item.width / 2
			offsetY = -item.height / 2
		} else if (corner == 'right-top') {
			offsetX = item.width / 2
			offsetY = -item.height / 2
		} else if (corner == 'left-bottom') {
			offsetX = -item.width / 2
			offsetY = item.height / 2
		} else if (corner == 'right-bottom') {
			offsetX = item.width / 2
			offsetY = item.height / 2
		}

		// 先应用缩放
		const scaledOffsetX = offsetX * item.scale
		const scaledOffsetY = offsetY * item.scale

		// 再应用旋转变换
		const angleRad = (item.angle * Math.PI) / 180
		const rotatedX = scaledOffsetX * Math.cos(angleRad) - scaledOffsetY * Math.sin(angleRad)
		const rotatedY = scaledOffsetX * Math.sin(angleRad) + scaledOffsetY * Math.cos(angleRad)

		// 计算最终位置（相对于 wrapper，加上容器居中偏移）
		// 减去控制点尺寸的一半，让控制点中心对齐到角点
		const finalX = itemCenterX + rotatedX + containerOffsetX - controlSize / 2
		const finalY = itemCenterY + rotatedY + containerOffsetY - controlSize / 2

		return {
			position: 'absolute',
			left: finalX + 'px',
			top: finalY + 'px',
			width: controlSize + 'px',
			height: controlSize + 'px',
			transform: `rotate(${item.angle}deg)`,
			transformOrigin: 'center center',
			zIndex: 99999
		}
	}

	// 旋转控制点位置样式
	const rotateWrapStyle = computed(() => {
		const item = itemElement.value
		// 操作时放大1.2倍
		const sizeMultiplier = operationType.value == 'rotate' ? 1.2 : 1

		// 旋转控制点的实际大小（基础40px * 操作放大倍数）
		const controlSize = 50 * sizeMultiplier

		// 计算容器尺寸和居中偏移
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const aspectRatio = props.sizeheight / props.sizewidth
		const newsizeheight = newsizewidth * aspectRatio
		// 容器水平居中在 50%
		const containerOffsetX = (screenWidth.value - newsizewidth) / 2
		// 容器垂直居中在 35%（top: 35% + transform: translate(-50%, -50%)）
		const containerOffsetY = screenHeight.value * 0.35 - newsizeheight / 2

		// 计算图片层的中心点（相对于容器，不包含偏移）
		const itemCenterX = item.left + item.width / 2
		const itemCenterY = item.top + item.height / 2

		// 旋转按钮在图片底部中心，距离底部 30px（未缩放、未旋转时）
		const offsetX = 0
		const offsetY = item.height / 2 + 40

		// 先应用缩放
		const scaledOffsetX = offsetX * item.scale
		const scaledOffsetY = offsetY * item.scale

		// 再应用旋转变换
		const angleRad = (item.angle * Math.PI) / 180
		const rotatedX = scaledOffsetX * Math.cos(angleRad) - scaledOffsetY * Math.sin(angleRad)
		const rotatedY = scaledOffsetX * Math.sin(angleRad) + scaledOffsetY * Math.cos(angleRad)

		// 计算最终位置（相对于 wrapper，加上容器居中偏移）
		// 减去控制点尺寸的一半，让控制点中心对齐到目标位置
		const finalX = itemCenterX + rotatedX + containerOffsetX - controlSize / 2
		const finalY = itemCenterY + rotatedY + containerOffsetY - controlSize / 2

		return {
			position: 'absolute',
			left: finalX + 'px',
			top: finalY + 'px',
			width: controlSize + 'px',
			height: controlSize + 'px',
			transformOrigin: 'center center',
			zIndex: 99999
		}
	})

	// 图片加载完成
	const onImageLoad = (e : UniImageLoadEvent) => {
		console.log('[Editor] 图片加载完成', e.detail)
		const originalWidth = e.detail.width
		const originalHeight = e.detail.height

		if (originalWidth > 0 && originalHeight > 0) {
			baseWidth.value = originalWidth
			baseHeight.value = originalHeight

			// 计算初始化容器尺寸（使用 0.7）
			const initSizeWidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.7
			const aspectRatio = props.sizeheight / props.sizewidth
			const initSizeHeight = initSizeWidth * aspectRatio

			// 计算实际显示容器尺寸（使用 0.51）
			const displaySizeWidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
			const displaySizeHeight = displaySizeWidth * aspectRatio

			// 根据图片的真实宽高比计算适配尺寸（基于 0.7 容器）
			const imageAspectRatio = originalWidth / originalHeight
			let displayWidth = initSizeWidth
			let displayHeight = initSizeHeight

			// 如果图片宽高比大于容器宽高比，以宽度为准
			if (imageAspectRatio > (initSizeWidth / initSizeHeight)) {
				displayWidth = initSizeWidth
				displayHeight = initSizeWidth / imageAspectRatio
			} else {
				// 否则以高度为准
				displayHeight = initSizeHeight
				displayWidth = initSizeHeight * imageAspectRatio
			}

			// 计算在 0.7 容器中的居中位置
			const centerLeftIn07 = (initSizeWidth - displayWidth) / 2
			const centerTopIn07 = (initSizeHeight - displayHeight) / 2

			// 计算从 0.7 容器到 0.51 容器的偏移量
			const offsetX = (initSizeWidth - displaySizeWidth) / 2
			const offsetY = (initSizeHeight - displaySizeHeight) / 2

			// 最终位置 = 0.7容器居中位置 - 偏移量（使图片在 0.51 容器中居中）
			const centerLeft = centerLeftIn07 - offsetX
			const centerTop = centerTopIn07 - offsetY

			const newItem : ItemElement = {
				id: 1,
				type: 0,
				index: 1,
				left: centerLeft,
				top: centerTop,
				width: displayWidth,
				height: displayHeight,
				scale: 1,
				angle: 0,
				active: false,
				activeguide: false,
				activescale: false,
				activehorn: false,
				activeedge: false,
				initialWidth: displayWidth,
				initialHeight: displayHeight
			}
			itemElement.value = newItem

			// 初始化辅助线
			const guides : GuideLine[] = [
				{ type: 'v', left: 0, top: 0 } as GuideLine,
				{ type: 'v', left: props.sizewidth, top: 0 } as GuideLine,
				{ type: 'v', left: props.sizewidth / 2, top: 0 } as GuideLine,
				{ type: 'h', left: 0, top: 0 } as GuideLine,
				{ type: 'h', left: 0, top: props.sizeheight } as GuideLine,
				{ type: 'h', left: 0, top: props.sizeheight / 2 } as GuideLine
			]
			allGuideLines.value = guides

			// 计算缩放限制
			calculateMaxScale()

			// 图片初始化完成后，自动显示控制点
			isSelected.value = true
			itemElement.value.active = true
			showCorners.value = true

			console.log('[Editor] 图片初始化完成:', {
				原图尺寸: { width: originalWidth, height: originalHeight },
				图片宽高比: imageAspectRatio,
				容器尺寸: { width: displaySizeWidth, height: displaySizeHeight },
				显示尺寸: { width: displayWidth, height: displayHeight },
				位置: { left: itemElement.value.left, top: itemElement.value.top }
			})
		}
	}



	// 图片点击事件 
	const onImageClick = () => {
		// 不再通过点击切换选中状态
		// 控制点的显示/隐藏由长按操作控制
		console.log('[Editor] 图片点击（不切换状态）')
	}

	//  四角缩放事件 
	const onCornerStart = (e : UniTouchEvent, corner : string) => {
		operationType.value = 'scale'
		isTouching.value = true
		currentCorner.value = corner

		// 显示中心辅助线
		showCenterGuides.value = true

		// 通知父组件进入编辑状态（隐藏其他UI元素）
		emit('editingChange', true)

		const item = itemElement.value
		item.typetext = corner
		item.touchX = e.touches[0].clientX
		item.touchY = e.touches[0].clientY

		recordPressDownData(item)
	}

	const onCornerEnd = () => {
		currentCorner.value = ''

		// 隐藏中心辅助线
		showCenterGuides.value = false

		// 通知父组件退出编辑状态（显示其他UI元素）
		emit('editingChange', false)
	}


	//四边拉伸事件
	const onCornerMouseStart = (e : any, corner : string) => {
		operationType.value = 'scale'
		isMouseDown.value = true
		currentCorner.value = corner

		// 显示中心辅助线
		showCenterGuides.value = true

		// 通知父组件进入编辑状态（隐藏其他UI元素）
		emit('editingChange', true)

		const item = itemElement.value
		item.typetext = corner
		const mouseEvent = e as MouseEvent
		item.touchX = mouseEvent.clientX
		item.touchY = mouseEvent.clientY

		recordPressDownData(item)
	}

	//  旋转事件 
	const onRotateStart = (e : UniTouchEvent) => {
		operationType.value = 'rotate'
		isTouching.value = true

		// 显示中心辅助线
		showCenterGuides.value = true

		// 通知父组件进入编辑状态（隐藏其他UI元素）
		emit('editingChange', true)

		const item = itemElement.value
		item.touchX = e.touches[0].clientX
		item.touchY = e.touches[0].clientY

		// 计算容器尺寸和居中偏移
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const aspectRatio = props.sizeheight / props.sizewidth
		const newsizeheight = newsizewidth * aspectRatio
		const containerOffsetX = (screenWidth.value - newsizewidth) / 2
		const containerOffsetY = (screenHeight.value - newsizeheight) / 2

		// 记录中心位置（考虑缩放和容器偏移）
		const centerX = item.left + containerOffsetX + (item.width * item.scale) / 2
		const centerY = item.top + containerOffsetY + (item.height * item.scale) / 2
		item.centerPos = { x: centerX, y: centerY }

		// 记录初始角度
		item.anglePre = item.angle

		recordPressDownData(item)
	}

	const onRotateEnd = () => {
		operationType.value = ''
		isTouching.value = false

		// 隐藏中心辅助线
		showCenterGuides.value = false

		// 通知父组件退出编辑状态（显示其他UI元素）
		emit('editingChange', false)

		console.log('[Editor] 旋转结束，通知父组件显示UI，最终角度:', itemElement.value.angle)
	}

	const onRotateMouseStart = (e : any) => {
		operationType.value = 'rotate'
		isMouseDown.value = true

		// 显示中心辅助线
		showCenterGuides.value = true

		// 通知父组件进入编辑状态（隐藏其他UI元素）
		emit('editingChange', true)

		const item = itemElement.value
		const mouseEvent = e as MouseEvent
		item.touchX = mouseEvent.clientX
		item.touchY = mouseEvent.clientY

		// 计算容器尺寸和居中偏移
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const aspectRatio = props.sizeheight / props.sizewidth
		const newsizeheight = newsizewidth * aspectRatio
		const containerOffsetX = (screenWidth.value - newsizewidth) / 2
		const containerOffsetY = (screenHeight.value - newsizeheight) / 2

		// 记录中心位置（考虑缩放和容器偏移）
		const centerX = item.left + containerOffsetX + (item.width * item.scale) / 2
		const centerY = item.top + containerOffsetY + (item.height * item.scale) / 2
		item.centerPos = { x: centerX, y: centerY }

		// 记录初始角度
		item.anglePre = item.angle

		recordPressDownData(item)
	}

	// ==================== 取消选择 ====================
	const cancelSelection = () => {
		// 不再通过点击空白区域取消选择
		// 控制点始终显示，只在长按操作时隐藏
	}

	const printAllInfo = () => {
		const item = itemElement.value

		// 计算缩放比例（显示尺寸相对于原始尺寸的比例）
		const newsizewidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const scaleRatio = props.sizewidth / newsizewidth

		// 🔧 调试参数：根据缩放方向使用不同的偏移系数
		// SCALE_DOWN_ADJUSTMENT: 缩小时的偏移系数（scale < 1）
		// SCALE_UP_ADJUSTMENT: 放大时的偏移系数（scale > 1）
		const SCALE_DOWN_ADJUSTMENT = 1  // 缩小时使用，0.92 位置正确
		const SCALE_UP_ADJUSTMENT = 1     // 放大时使用，根据实际情况调整  1.206  小左上角   大右下角

		// 根据当前缩放值选择合适的偏移系数
		const OFFSET_ADJUSTMENT = item.scale < 1 ? SCALE_DOWN_ADJUSTMENT : SCALE_UP_ADJUSTMENT

		// 计算图片在容器中的实际显示尺寸（考虑 scale）
		const actualDisplayWidth = item.width * item.scale
		const actualDisplayHeight = item.height * item.scale

		// 计算图片左上角的实际位置（考虑 scale 导致的中心偏移）
		// 因为 transform-origin 是 center center，缩放会导致左上角位置变化
		const scaleOffset = (1 - item.scale) / 2 * OFFSET_ADJUSTMENT
		const actualLeft = item.left + item.width * scaleOffset
		const actualTop = item.top + item.height * scaleOffset

		// 将显示坐标和尺寸转换回原始尺寸
		const originalX = actualLeft * scaleRatio
		const originalY = actualTop * scaleRatio
		const originalWidth = actualDisplayWidth * scaleRatio
		const originalHeight = actualDisplayHeight * scaleRatio

		// 构造完整的裁剪信息对象（使用原始尺寸）
		const cropInfo = {
			imageX: originalX,
			imageY: originalY,
			displayWidth: originalWidth,
			displayHeight: originalHeight,
			imageScale: 1,
			imageRotation: item.angle,
			canvasWidth: props.sizewidth,
			canvasHeight: props.sizeheight
		} as UTSJSONObject

		console.log('最终裁剪信息:', cropInfo)

		// 通过 emit 传递给父组件
		emit('cropData', cropInfo)
	}

	// 重置图片到初始状态
	const resetImage = () => {
		const item = itemElement.value

		// 重置为初始尺寸和位置
		if (item.initialWidth != null && item.initialHeight != null) {
			item.width = item.initialWidth
			item.height = item.initialHeight
		}

		// 计算初始化容器尺寸（使用 0.7）
		const initSizeWidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.7
		const aspectRatio = props.sizeheight / props.sizewidth
		const initSizeHeight = initSizeWidth * aspectRatio

		// 计算实际显示容器尺寸（使用 0.51）
		const displaySizeWidth = (screenWidth.value / props.sizewidth) * props.sizewidth * 0.51
		const displaySizeHeight = displaySizeWidth * aspectRatio

		// 计算在 0.7 容器中的居中位置
		const centerLeftIn07 = (initSizeWidth - item.width) / 2
		const centerTopIn07 = (initSizeHeight - item.height) / 2

		// 计算从 0.7 容器到 0.51 容器的偏移量
		const offsetX = (initSizeWidth - displaySizeWidth) / 2
		const offsetY = (initSizeHeight - displaySizeHeight) / 2

		// 重置位置到中心：让图片中心点对齐到 0.51 容器的中心
		item.left = centerLeftIn07 - offsetX
		item.top = centerTopIn07 - offsetY

		// 重置缩放和旋转
		item.scale = 1
		item.angle = 0

		// 清除选中状态和辅助线
		isSelected.value = false
		item.active = false
		clearGuideLines()
	}

	// 暴露方法给父组件
	defineExpose({
		printAllInfo,
		resetImage
	})
	const stopWatchIsCropping = watch(() : boolean => props.isCropping, (newVal : boolean, prevVal : boolean) => {
		if (newVal) {
			printAllInfo()
		}
	})

	// 组件初始化
	initDeviceInfo()
</script>

<style>
	.editor-root {
		overflow: visible;
		height: 100%;
	}

	.editor-wrapper {
		position: relative;
		overflow: visible;
		z-index: 1;
	}

	.editor-container {
		position: absolute;
		overflow: hidden;
		background: #f5f5f5;
		z-index: 1;
		pointer-events: none;
	}

	.editor-mask-image {
		position: absolute;
		z-index: 10;
		pointer-events: none;
	}

	/* 辅助线样式 */
	.guide-line {
		position: absolute;
		pointer-events: none;
		z-index: 9999;
	}

	.guide-line-v {
		width: 1px;
		height: 100%;
		border-left: 1px dashed #fd3da0;
	}

	.guide-line-h {
		width: 100%;
		height: 1px;
		border-top: 1px dashed #fd3da0;
	}

	.guide-line-active {
		background: #F56364;
		border-color: #F56364;
	}

	/* 图片层 */
	.item-layer {
		pointer-events: none;
		position: relative;
		z-index: 1;
	}

	.editor-image {
		width: 100%;
		height: 100%;
	}

	/* 控制层 */
	.control-layer {
		pointer-events: none;
	}

	/* 四角控制点 - 与 index_phone.vue 一致 */
	.frame-left-top-wrap,
	.frame-right-top-wrap,
	.frame-left-bottom-wrap,
	.frame-right-bottom-wrap {
		z-index: 99999 !important;
		pointer-events: auto;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.corner-inner {
		width: 30rpx;
		height: 30rpx;
		transition: border-color 0.2s;
	}

	.frame-left-top-wrap .corner-inner {
		border-left: 2rpx solid #fd3da0;
		border-top: 2rpx solid #fd3da0;
	}

	.frame-right-top-wrap .corner-inner {
		border-right: 2rpx solid #fd3da0;
		border-top: 2rpx solid #fd3da0;
	}

	.frame-left-bottom-wrap .corner-inner {
		border-left: 2rpx solid #fd3da0;
		border-bottom: 2rpx solid #fd3da0;
	}

	.frame-right-bottom-wrap .corner-inner {
		border-right: 2rpx solid #fd3da0;
		border-bottom: 2rpx solid #fd3da0;
	}

	/* 四边控制点 */
	.control-edge {
		position: absolute;
		background: #fd3da0;
		pointer-events: auto;
		z-index: 9;
	}

	.control-edge-l {
		top: 50%;
		left: -4rpx;
		width: 8rpx;
		height: 40rpx;
		transform: translateY(-50%);
	}

	.control-edge-r {
		top: 50%;
		right: -4rpx;
		width: 8rpx;
		height: 40rpx;
		transform: translateY(-50%);
	}

	.control-edge-t {
		top: -4rpx;
		left: 50%;
		width: 40rpx;
		height: 8rpx;
		transform: translateX(-50%);
	}

	.control-edge-b {
		bottom: -4rpx;
		left: 50%;
		width: 40rpx;
		height: 8rpx;
		transform: translateX(-50%);
	}

	/* 旋转控制点 */
	.control-rotate {
		position: absolute;
		bottom: -60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 40rpx;
		pointer-events: auto;
		z-index: 10;
	}

	.control-rotate-icon {
		width: 100%;
		height: 100%;
		background: #fd3da0;
		border-radius: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Canvas */
	.cropping-canvas {
		position: absolute;
		top: -9999rpx;
		left: -9999rpx;
		z-index: -1;
	}

	/* 旋转控制点 */
	.rotate,
	.rotate-red {
		width: 56rpx;
		height: 56rpx;
		position: absolute;
		z-index: 99999 !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.rotate-icon {
		width: 100%;
		height: 100%;
	}

	.rotate-red {
		opacity: 0.8;
	}
</style>