Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front

2026-03-18 10:59:15 +08:00
parent 68a6be6468 ce65e0e5a3
commit 78fa8d965f
24 changed files with 809 additions and 83 deletions
--- a/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
+++ b/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
@@ -2,14 +2,31 @@
 	<div class="header-tools">
 		<template v-for="(v, i) in tools" :key="i">
 			<span class="line" v-if="v.type === 'line'"></span>
-			<span
-				v-else
-				class="icon"
-				@click="onClickTool(v)"
-				:class="{ active: v.name === tool, disabled: v.disabled }"
-			>
-				<svg-icon :name="v.icon" :size="v.iconSize" />
-			</span>
+			<div v-else class="item">
+				<span
+					class="icon"
+					@click="onClickTool(v)"
+					:class="{
+						active: v.name === tool,
+						disabled: v.disabled
+					}"
+				>
+					<svg-icon :name="v.icon" :size="v.iconSize" />
+				</span>
+				<span class="more" v-if="v.child" @click="onClickMore(v)">
+					<svg-icon name="dc-down_arrow2" size="7" />
+				</span>
+				<div v-if="v.child" class="child" v-show="v.showChild">
+					<div v-for="(v_, i_) in v.child" :key="i_" @click="onClickTool(v_, v)">
+						<span v-show="tool === v_.name" class="dui">
+							<svg-icon name="dc-dui" size="9" />
+						</span>
+						<span class="icon"><svg-icon :name="v_.icon" :size="v_.iconSize" /></span>
+						<span class="label">{{ v_.label }}</span>
+						<span class="tip">{{ v_.tip }}</span>
+					</div>
+				</div>
+			</div>
 		</template>
 		<button class="export" @click="emit('export')">
 			<span class="icon"><svg-icon name="export" size="12" /></span>
@@ -42,48 +59,108 @@
 	const toolManager = inject('toolManager') as any
 	const objectManager = inject('objectManager') as any
 	const canvasManager = inject('canvasManager') as any
+	const layerManager = inject('layerManager') as any
 	const tool = computed(() => toolManager.currentTool.value)
 	const historyIndex = computed(() => stateManager.historyIndex.value)
 	const historyList = computed(() => stateManager.historyList.value)
 	const isUndo = computed(() => !historyList.value[historyIndex.value - 1])
 	const isRedo = computed(() => !historyList.value[historyIndex.value + 1])
+	const activeLayerId = computed(() => layerManager.activeID.value)
 	const tools = ref([
-		{ name: OperationType.SELECT, icon: 'dc-select', iconSize: 16, disabled: ref(false) },
-		{ name: OperationType.PAN, icon: 'dc-move', iconSize: 18, disabled: ref(false) },
-		{ name: OperationType.DRAW, icon: 'dc-brush', iconSize: 18, disabled: ref(false) },
-		{ name: OperationType.ERASER, icon: 'dc-eraser', iconSize: 18, disabled: ref(false) },
+		{ name: OperationType.SELECT, icon: 'dc-select', iconSize: 16 },
+		{ name: OperationType.PAN, icon: 'dc-move', iconSize: 18 },
+		{ name: OperationType.DRAW, icon: 'dc-brush', iconSize: 18 },
+		{ name: OperationType.ERASER, icon: 'dc-eraser', iconSize: 18 },
+		{ icon: 'dc-image', iconSize: 17, on: () => onImageClick() },
+		{ name: OperationType.SELECTBOX, icon: 'dc-selectbox', iconSize: 16 },
 		{
-			name: OperationType.IMAGE,
-			icon: 'dc-image',
-			iconSize: 17,
-			disabled: ref(false),
-			on: () => onImageClick()
+			name: OperationType.RECTANGLE,
+			icon: 'dc-rectangle',
+			iconSize: 16,
+			showChild: false,
+			child: [
+				{
+					name: OperationType.RECTANGLE,
+					label: 'Rectangle',
+					icon: 'dc-rectangle',
+					iconSize: 13
+				},
+				{
+					name: OperationType.LINE,
+					label: 'Line',
+					icon: 'dc-line',
+					iconSize: 10
+				},
+				{
+					name: OperationType.ARROW,
+					label: 'Arrow',
+					icon: 'dc-arrow',
+					iconSize: 11
+				},
+				{
+					name: OperationType.ELLIPSE,
+					label: 'Ellipse',
+					icon: 'dc-ellipse',
+					iconSize: 15
+				},
+				{
+					name: OperationType.TRIANGLE,
+					label: 'Polygon',
+					icon: 'dc-triangle',
+					iconSize: 14
+				},
+				{
+					name: OperationType.STAR,
+					label: 'Star',
+					icon: 'dc-star',
+					iconSize: 15
+				}
+			]
 		},
-		{ name: OperationType.SELECTBOX, icon: 'dc-selectbox', iconSize: 16, disabled: ref(false) },
-		{ name: OperationType.RECTANGLE, icon: 'dc-rectangle', iconSize: 16, disabled: ref(false) },
+
 		{ type: 'line' },
 		{
-			name: OperationType.UNDO,
 			icon: 'dc-undo',
 			iconSize: 18,
 			disabled: isUndo,
 			on: () => stateManager.undoState()
 		},
 		{
-			name: OperationType.REDO,
 			icon: 'dc-redo',
 			iconSize: 18,
 			disabled: isRedo,
 			on: () => stateManager.redoState()
+		},
+		{
+			name: 'copy',
+			icon: 'dc-copy',
+			iconSize: 16,
+			disabled: computed(() => !activeLayerId.value),
+			on: () => onCopyActiveLayer()
+		},
+		{
+			name: 'delete',
+			icon: 'dc-delete',
+			iconSize: 18,
+			disabled: computed(() => !activeLayerId.value),
+			on: () => onDeleteActiveLayer()
 		}
 	])
-	const onClickTool = (tool: any) => {
-		if (tool.disabled?.value) return
-		if (tool.on) {
-			tool.on()
-		} else {
-			toolManager.setTool(tool.name)
+	const onClickTool = (v: any, parent?: any) => {
+		if (v.disabled?.value) return
+		if (parent) {
+			parent.name = v.name
+			parent.icon = v.icon
+			parent.iconSize = v.iconSize * 1.23
 		}
+		tools.value.forEach((v) => v.hasOwnProperty('showChild') && (v.showChild = false))
+		v.on ? v.on() : toolManager.setTool(v.name)
+	}
+	const onClickMore = (v: any) => {
+		tools.value.forEach((item) => {
+			if (item.hasOwnProperty('showChild') && item.name !== v.name) item.showChild = false
+		})
+		v.showChild = !v.showChild
 	}
 	const onImageClick = async () => {
 		const layer = await importLocalImage(false)
@@ -91,6 +168,14 @@
 		objectManager.setBlendMode(id, BlendMode.MULTIPLY)
 		objectManager.setFillRepeat(id)
 	}
+	const onCopyActiveLayer = () => {
+		if (!activeLayerId.value) return
+		layerManager.copyLayerById(activeLayerId.value)
+	}
+	const onDeleteActiveLayer = () => {
+		if (!activeLayerId.value) return
+		layerManager.deleteLayerById(activeLayerId.value)
+	}
 	const onWorkbench = async () => {
 		exportCanvasToImage(canvasManager.canvas).then((url) => {
 			emit('workbench', { url })
@@ -123,22 +208,81 @@
 			border-radius: 0.2rem;
 			margin: 0 0.6rem;
 		}
-		> .icon {
-			cursor: pointer;
+		> .item {
+			position: relative;
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			width: 3rem;
-			height: 3rem;
-			--svg-icon-color: #000;
-			border-radius: 0.4rem;
-			&:not(.disabled).active,
-			&:not(.disabled):hover {
-				background-color: #ebebeb;
+			> span {
+				cursor: pointer;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				--svg-icon-color: #000;
+				border-radius: 0.4rem;
+				height: 3rem;
+				&:not(.disabled).active,
+				&:not(.disabled):hover {
+					background-color: #ebebeb;
+				}
+				&.disabled {
+					opacity: 0.5;
+					cursor: not-allowed;
+				}
 			}
-			&.disabled {
-				opacity: 0.5;
-				cursor: not-allowed;
+			> .icon {
+				width: 3rem;
+			}
+			> .more {
+				width: 1.1rem;
+			}
+			> .child {
+				cursor: pointer;
+				position: absolute;
+				min-width: 21rem;
+				top: calc(100% + 2rem);
+				left: 0;
+				padding: 0.6rem 0;
+				border: 0.1remx solid #d9d9d9;
+				background-color: #fff;
+				border-radius: 1.2rem;
+				box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
+				> div {
+					height: 3.2rem;
+					display: flex;
+					align-items: center;
+					// justify-content: center;
+					gap: 0.8rem;
+					position: relative;
+					padding: 0 1.6rem;
+					> .dui {
+						position: absolute;
+						left: 1.5rem;
+						transform: translateX(-50%);
+					}
+					> .icon {
+						width: 2rem;
+						height: 2rem;
+						margin-left: 0.8rem;
+					}
+					> .label {
+						flex: 1;
+						font-size: 1.4rem;
+						color: #000;
+					}
+					> .tip {
+						font-size: 1.3rem;
+						color: rgba(13, 13, 13, 0.65);
+					}
+					&:not(.disabled).active,
+					&:not(.disabled):hover {
+						background-color: #ebebeb;
+					}
+					&.disabled {
+						opacity: 0.5;
+						cursor: not-allowed;
+					}
+				}
 			}
 		}
 		> button {
--- a/src/components/Canvas/DepthCanvas/components/details-panel/fill-repeat.vue
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/fill-repeat.vue
@@ -33,6 +33,19 @@
 						/>
 					</div>
 				</div>
+				<div>
+					<div class="label">Opacity</div>
+					<div class="value">
+						<depth-slider
+							v-model="opacity"
+							:min="0"
+							:max="100"
+							:tipFormatter="(v) => v + '%'"
+							@input="inputOpacity"
+							@change="changeOpacity"
+						/>
+					</div>
+				</div>
 				<div>
 					<div class="label">Gap X</div>
 					<div class="value">
@@ -101,6 +114,7 @@
 	const gapX = ref(0)
 	const gapY = ref(0)
 	const offset = ref({ x: 0, y: 0 })
+	const opacity = ref(100)

 	const updateData = async () => {
 		await nextTick()
@@ -113,6 +127,7 @@
 			x: Math.round((fill.offsetX / props.object.width) * 100),
 			y: Math.round((fill.offsetY / props.object.height) * 100)
 		}
+		opacity.value = Math.round(props.object.opacity * 100)
 	}
 	updateData()

@@ -138,6 +153,15 @@
 		objectManager.updateFillRepeatGap(id.value, options, isRecord)
 	}

+	const inputOpacity = () => setOpacity(false)
+	const changeOpacity = () => setOpacity(true)
+	const setOpacity = (isRecord: boolean) => {
+		const options = {
+			opacity: opacity.value / 100
+		}
+		objectManager.updateOpacity(id.value, options, isRecord)
+	}
+
 	stateManager.event.add('canvas:undo', updateData)
 	stateManager.event.add('canvas:redo', updateData)
 	onBeforeUnmount(() => {
--- a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue
+++ b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue
@@ -22,7 +22,7 @@
 				><svg-icon :name="layer.visible ? 'dc-show' : 'dc-hide'" size="15"
 			/></span>
 			<span @click.stop="onClickDelete"><svg-icon name="dc-delete" size="13" /></span>
-			<span><svg-icon name="dc-down_arrow" size="11" /></span>
+			<!-- <span><svg-icon name="dc-down_arrow" size="11" /></span> -->
 		</div>
 	</div>
 </template>
--- a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
+++ b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
@@ -63,7 +63,7 @@
 		layerManager.dragSort(data.info.id, newIndex)
 	}
 	const addLayer = () => {
-		layerManager.createEmptyLayer()
+		layerManager.createEmptyLayer(true, true)
 	}
 </script>

--- a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
@@ -3,6 +3,7 @@ import { fabric } from 'fabric-with-all'
 import { createId } from '../../tools/tools'
 import { exportObjectsToImage, exportObjectToThumbnail } from '../tools/exportMethod'
 import { OperationType } from '../tools/layerHelper'
+import { getArrowPath, cloneObjects, getStarArr } from '../tools/canvasMethod'

 export class LayerManager {
 	stateManager: any
@@ -53,6 +54,7 @@ export class LayerManager {
 			this.canvasManager.renderAll()
 		}
 	}
+	/** 删除指定图层 */
 	deleteLayerById(id, isActive = true) {
 		this.canvasManager.deleteObjectById(id)
 		if (id === this.activeID.value && isActive) {
@@ -60,6 +62,24 @@ export class LayerManager {
 		}
 		if (isActive) this.stateManager.recordState()
 	}
+	/** 复制指定图层 */
+	copyLayerById(id) {
+		const object = this.canvasManager.getObjectById(id)
+		if (!object) return console.warn('复制图层失败，对象不存在ID:', id)
+		cloneObjects([object]).then(objects => {
+			const newObject = objects[0]
+			const info = JSON.parse(JSON.stringify(newObject.info))
+			info.id = createId("image")
+			// info.name = info.name
+			newObject.set({
+				top: newObject.top + 15,
+				left: newObject.left + 15,
+				info: info,
+			})
+			this.canvasManager.add(newObject)
+			this.setActiveID(newObject.info.id)
+		})
+	}
 	// 拖拽排序
 	dragSort(id, newIndex) {
 		const index = Math.abs(this.layers.value.length - newIndex - 1)
@@ -90,7 +110,7 @@ export class LayerManager {
 		}
 	}
 	/** 创建空图层 */
-	createEmptyLayer(isRecord = true) {
+	createEmptyLayer(isRecord = true, isActive = false) {
 		const emptyObject = new fabric.Rect({
 			width: 0,
 			height: 0,
@@ -102,6 +122,7 @@ export class LayerManager {
 		})
 		this.setLayerPosition(emptyObject)
 		this.canvasManager.add(emptyObject, isRecord)
+		if (isActive) this.setActiveID(emptyObject.info.id, false)
 		return emptyObject
 	}
 	/** 创建文本图层 */
@@ -138,23 +159,109 @@ export class LayerManager {
 		if (isActive) this.setActiveID(rectObject.info.id)
 		return rectObject
 	}
-	/** 创建圆形图层 */
-	async createCircleLayer(options?: any, isActive = false) {
-		const circleObject = new fabric.Circle({
+	/** 创建直线图层 */
+	async createLineLayer(options?: any, isActive = false) {
+		const line = [options?.x1 || 0, options?.y1 || 0, options?.x2 || 100, options?.y2 || 0]
+		delete options.x1
+		delete options.y1
+		delete options.x2
+		delete options.y2
+		const lineObject = new fabric.Line(line, {
+			stroke: 'black',     // 线条颜色
+			strokeWidth: 2,       // 线条粗细
+			...(options || {}),
+			info: {
+				id: createId("line"),
+				name: '直线图层',
+				...(options?.info || {}),
+			}
+		})
+		this.setLayerPosition(lineObject, options)
+		await this.canvasManager.add(lineObject)
+		if (isActive) this.setActiveID(lineObject.info.id)
+		return lineObject
+	}
+	/** 创建椭圆图层 */
+	async createEllipseLayer(options?: any, isActive = false) {
+		const ellipseObject = new fabric.Ellipse({
 			radius: 50,
 			fill: '#000',
 			...(options || {}),
 			info: {
-				id: createId("circle"),
-				name: '圆形图层',
+				id: createId("ellipse"),
+				name: '椭圆图层',
 				...(options?.info || {}),
 			}
 		})
-		this.setLayerPosition(circleObject, options)
-		await this.canvasManager.add(circleObject)
-		if (isActive) this.setActiveID(circleObject.info.id)
-		return circleObject
+		this.setLayerPosition(ellipseObject, options)
+		await this.canvasManager.add(ellipseObject)
+		if (isActive) this.setActiveID(ellipseObject.info.id)
+		return ellipseObject
 	}
+	/** 创建三角形图层 */
+	async createTriangleLayer(options?: any, isActive = false) {
+		const triangleObject = new fabric.Triangle({
+			width: 100,
+			height: 100,
+			fill: '#000',
+			...(options || {}),
+			info: {
+				id: createId("triangle"),
+				name: '三角形图层',
+				...(options?.info || {}),
+			}
+		})
+		this.setLayerPosition(triangleObject, options)
+		await this.canvasManager.add(triangleObject)
+		if (isActive) this.setActiveID(triangleObject.info.id)
+		return triangleObject
+	}
+	/** 创建五角星图层 */
+	async createStarLayer(options?: any, isActive = false) {
+		const width = options?.width || 100
+		const height = options?.height || 100
+		delete options.points
+		const starObject = new fabric.Polygon(getStarArr(width, height), {
+			fill: '#000',
+			...(options || {}),
+			info: {
+				id: createId("star"),
+				name: '五角星图层',
+				...(options?.info || {}),
+			}
+		})
+		this.setLayerPosition(starObject, options)
+		await this.canvasManager.add(starObject)
+		if (isActive) this.setActiveID(starObject.info.id)
+		return starObject
+	}
+	/** 创建箭头图层 */
+	async createArrowLayer(options?: any, isActive = false) {
+		const width = options?.width || 100
+		const height = options?.height || 10
+		delete options.width
+		delete options.height
+		const arrowObject = new fabric.Path(getArrowPath(width, height), {
+			stroke: '#000',        // 只设置边框颜色
+			strokeWidth: 3,       // 边框宽度
+			fill: 'transparent',  // 不填充
+			strokeLineCap: 'round',
+			strokeLineJoin: 'round',
+			...(options || {}),
+			info: {
+				id: createId("star"),
+				name: '箭头图层',
+				...(options?.info || {}),
+			}
+		});
+		this.setLayerPosition(arrowObject, options)
+		this.canvasManager.add(arrowObject)
+		if (isActive) this.setActiveID(arrowObject.info.id)
+		return arrowObject
+	}
+
+
+
 	/** 创建图片图层 */
 	async createImageLayer(imgOrUrl: string | HTMLImageElement, options?: any, isRecord = true) {
 		const canvasWidth = this.canvasManager.canvasWidth
--- a/src/components/Canvas/DepthCanvas/manager/ObjectManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/ObjectManager.ts
@@ -207,5 +207,24 @@ export class ObjectManager {
 		}
 	}

+
+	/** 修改透明度
+	 * @param id 目标对象ID
+	 * @param options 透明度参数
+	 * @param options.opacity 透明度
+	 * @param isRecord 是否记录
+	 */
+	async updateOpacity(id: string, options: any, isRecord: boolean) {
+		const object = this.getFillRepeatObject(id)
+		if (!object) return null
+		const opacity = options.opacity
+		object.set("opacity", opacity);
+		this.canvasManager.renderAll()
+		if (isRecord) {
+			this.stateManager.recordState()
+			this.layerManager.updateLayerThumbnailsById(id)
+		}
+	}
+
 	dispose() { }
 }
--- a/src/components/Canvas/DepthCanvas/manager/RectToolManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/RectToolManager.ts
@@ -1,3 +1,4 @@
+import { OperationType, OperationTypes } from "../tools/layerHelper";
 import { fabric } from 'fabric-with-all'
 /** 矩形工具管理器 */
 export class RectToolManager {
@@ -10,6 +11,9 @@ export class RectToolManager {
 	startX: number = 0
 	startY: number = 0
 	demoObject: any
+	tools = [
+		OperationType.RECTANGLE
+	]
 	constructor(options) {
 		this.canvasManager = options.canvasManager
 		this.stateManager = options.stateManager
--- a/src/components/Canvas/DepthCanvas/manager/ShapeToolManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/ShapeToolManager.ts
@@ -0,0 +1,255 @@
+import { OperationType, OperationTypes } from "../tools/layerHelper";
+import { getStarArr, getArrowPath, distance, angleBetweenPointsDegrees } from "../tools/canvasMethod";
+import { fabric } from 'fabric-with-all'
+/** 形状管理器 */
+export class ShapeToolManager {
+	// 管理器	
+	canvasManager: any
+	stateManager: any
+	layerManager: any
+	toolManager: any
+
+	isDragging: boolean = false
+	startX: number = 0
+	startY: number = 0
+	demoObject: any
+	tools = [
+		OperationType.RECTANGLE,
+		OperationType.LINE,
+		OperationType.ARROW,
+		OperationType.ELLIPSE,
+		OperationType.TRIANGLE,
+		OperationType.STAR,
+	]
+	constructor(options) {
+		this.canvasManager = options.canvasManager
+		this.stateManager = options.stateManager
+		this.layerManager = options.layerManager
+		this.toolManager = options.toolManager
+	}
+	mouseDownEvent(e) {
+		this.isDragging = false
+		this.demoObject = null
+
+		this.startX = e.absolutePointer.x
+		this.startY = e.absolutePointer.y
+		const currentTool = this.toolManager.currentTool.value
+		if (currentTool === OperationType.RECTANGLE) {
+			this.demoObject = this.downRectangle()
+		} else if (currentTool === OperationType.LINE) {
+			this.demoObject = this.downLine()
+		} else if (currentTool === OperationType.ELLIPSE) {
+			this.demoObject = this.downEllipse()
+		} else if (currentTool === OperationType.TRIANGLE) {
+			this.demoObject = this.downTriangle()
+		} else if (currentTool === OperationType.STAR) {
+			this.demoObject = this.downStar()
+		} else if (currentTool === OperationType.ARROW) {
+			this.demoObject = this.downArrow()
+		}
+		if (!this.demoObject) return;
+		this.demoObject.set({
+			evented: false,
+		})
+		this.demoObject.set
+		this.isDragging = true
+		this.canvasManager.canvas.add(this.demoObject)
+		this.canvasManager.canvas.renderAll()
+	}
+	mouseMoveEvent(e) {
+		if (!this.isDragging) return;
+		var width = e.absolutePointer.x - this.startX
+		var height = e.absolutePointer.y - this.startY
+		var left = this.startX
+		var top = this.startY
+		if (width < 0) {
+			left += width
+			width = -width
+		}
+		if (height < 0) {
+			top += height
+			height = -height
+		}
+		const currentTool = this.toolManager.currentTool.value
+		if (currentTool === OperationType.RECTANGLE) {
+			this.moveRectangle({ width, height, left, top })
+		} else if (currentTool === OperationType.LINE) {
+			this.moveLine(e.absolutePointer)
+		} else if (currentTool === OperationType.ELLIPSE) {
+			this.moveEllipse({ width, height, left, top })
+		} else if (currentTool === OperationType.TRIANGLE) {
+			this.moveTriangle({ width, height, left, top })
+		} else if (currentTool === OperationType.STAR) {
+			this.moveStar({ width, height, left, top })
+		} else if (currentTool === OperationType.ARROW) {
+			this.moveArrow(e.absolutePointer)
+		}
+		this.demoObject.set({
+			evented: false,
+		})
+		this.canvasManager.canvas.renderAll()
+	}
+	mouseUpEvent(e) {
+		if (!this.isDragging) return;
+		this.isDragging = false;
+		const object = this.demoObject.toJSON("evented")
+		const currentTool = this.toolManager.currentTool.value
+		if (currentTool === OperationType.RECTANGLE) {
+			this.upRectangle(object)
+		} else if (currentTool === OperationType.LINE) {
+			this.upLine(object)
+		} else if (currentTool === OperationType.ELLIPSE) {
+			this.upEllipse(object)
+		} else if (currentTool === OperationType.TRIANGLE) {
+			this.upTriangle(object)
+		} else if (currentTool === OperationType.STAR) {
+			this.upStar(object)
+		} else if (currentTool === OperationType.ARROW) {
+			this.upArrow(object)
+		}
+		this.canvasManager.canvas.remove(this.demoObject)
+		this.demoObject = null
+		this.canvasManager.canvas.renderAll()
+	}
+
+	/** 绘制矩形 */
+	downRectangle() {
+		const rect = new fabric.Rect({
+			left: this.startX,
+			top: this.startY,
+			width: 0,
+			height: 0,
+			fill: '#000',
+		})
+		return rect
+	}
+	moveRectangle({ width, height, left, top }) {
+		this.demoObject.set({ width, height, left, top })
+
+	}
+	upRectangle(object) {
+		if (object.width === 0) object.width = 100
+		if (object.height === 0) object.height = 100
+		this.layerManager.createRectLayer(object, true)
+	}
+
+	/** 绘制直线 */
+	downLine() {
+		const line = new fabric.Line([this.startX, this.startY, this.startX, this.startY], {
+			stroke: 'black',     // 线条颜色
+			strokeWidth: 2       // 线条粗细
+		})
+		return line
+	}
+	moveLine({ x, y }) {
+		this.demoObject.set({
+			x1: this.startX,
+			y1: this.startY,
+			x2: x,
+			y2: y,
+		})
+	}
+	upLine(object) {
+		this.layerManager.createLineLayer(object, true)
+	}
+
+	/** 绘制椭圆 */
+	downEllipse() {
+		const circle = new fabric.Ellipse({
+			left: this.startX,
+			top: this.startY,
+			fill: '#000',
+		})
+		return circle
+	}
+	moveEllipse({ width, height, left, top }) {
+		this.demoObject.set({ rx: width / 2, ry: height / 2, left, top })
+	}
+	upEllipse(object) {
+		if (object.rx === 0) object.rx = 50
+		if (object.ry === 0) object.ry = 50
+		this.layerManager.createEllipseLayer(object, true)
+	}
+
+
+	/** 绘制三角形 */
+	downTriangle() {
+		const triangle = new fabric.Triangle({
+			left: this.startX,
+			top: this.startY,
+			width: 0,
+			height: 0,
+			fill: '#000',
+		})
+		return triangle
+	}
+	moveTriangle({ width, height, left, top }) {
+		this.demoObject.set({ width, height, left, top })
+	}
+	upTriangle(object) {
+		if (object.width === 0) object.width = 100
+		if (object.height === 0) object.height = 100
+		this.layerManager.createTriangleLayer(object, true)
+	}
+
+
+	/** 绘制五角星 */
+	downStar() {
+		const star = new fabric.Polygon(getStarArr(0, 0), {
+			left: this.startX,
+			top: this.startY,
+			width: 0,
+			height: 0,
+			fill: '#000',
+			strokeLineJoin: 'round',    // 圆角连接
+			strokeLineCap: 'round',     // 圆角端点
+		});
+
+		return star
+	}
+	moveStar({ width, height, left, top }) {
+		this.demoObject.set({ left, top, width, height, points: getStarArr(width, height) })
+	}
+	upStar(object) {
+		if (object.width === 0) object.width = 100
+		if (object.height === 0) object.height = 100
+		this.layerManager.createStarLayer(object, true)
+	}
+
+	/** 绘制箭头 */
+	downArrow() {
+		return new fabric.Path();
+	}
+	moveArrow({ x, y }) {
+		const width = distance(this.startX, this.startY, x, y)
+		const angle = angleBetweenPointsDegrees(this.startX, this.startY, x, y)
+		this.canvasManager.canvas.remove(this.demoObject)
+		const arrow = new fabric.Path(getArrowPath(width, 10), {
+			left: this.startX,
+			top: this.startY,
+			stroke: '#000',        // 只设置边框颜色
+			strokeWidth: 3,       // 边框宽度
+			fill: 'transparent',  // 不填充
+			strokeLineCap: 'round',
+			strokeLineJoin: 'round',
+			originY: 'center',
+			angle: angle,
+		});
+		this.canvasManager.canvas.add(arrow)
+		this.demoObject = arrow
+	}
+	upArrow(object) {
+		if (object.originY !== "center") {
+			this.layerManager.createArrowLayer({
+				left: this.startX,
+				top: this.startY,
+			}, true)
+		} else {
+			this.layerManager.createArrowLayer(object, true)
+		}
+	}
+
+
+
+	dispose() { }
+}
--- a/src/components/Canvas/DepthCanvas/manager/ToolManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/ToolManager.ts
@@ -54,6 +54,32 @@ export class ToolManager {
 				name: OperationType.RECTANGLE,
 				cursor: "crosshair",
 			},
+			/** 直线工具 */
+			{
+				name: OperationType.LINE,
+				cursor: "crosshair",
+			},
+			/** 箭头工具 */
+			{
+				name: OperationType.ARROW,
+				cursor: "crosshair",
+			},
+			/** 椭圆工具 */
+			{
+				name: OperationType.ELLIPSE,
+				cursor: "crosshair",
+			},
+			/** 三角形工具 */
+			{
+				name: OperationType.TRIANGLE,
+				cursor: "crosshair",
+			},
+			/** 五角星工具 */
+			{
+				name: OperationType.STAR,
+				cursor: "crosshair",
+			},
+
 		]
 	}
 	onMounted() {
--- a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
+++ b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
@@ -1,6 +1,6 @@
 import { isBoolean } from "lodash-es";
 import { OperationType, OperationTypes } from "../../tools/layerHelper";
-import { RectToolManager } from "../RectToolManager"
+import { ShapeToolManager } from "../ShapeToolManager"
 import { AISelectboxToolManager } from "../AISelectboxToolManager"


@@ -32,7 +32,7 @@ export class CanvasEventManager {
 			toolManager: this.toolManager,
 			layerManager: this.layerManager,
 		}
-		this.rectToolManager = new RectToolManager(managers)
+		this.shapeToolManager = new ShapeToolManager(managers)
 		this.aiSelectboxToolManager = new AISelectboxToolManager(managers)

 		// 初始化所有事件
@@ -209,9 +209,9 @@ export class CanvasEventManager {
 			} else if (currentTool === OperationType.SELECTBOX) {
 				// 选择框模式
 				this.aiSelectboxToolManager.mouseDownEvent(opt);
-			} else if (currentTool === OperationType.RECTANGLE) {
-				// 矩形模式
-				this.rectToolManager.mouseDownEvent(opt);
+			} else if (this.shapeToolManager.tools.includes(currentTool)) {
+				// 形状模式
+				this.shapeToolManager.mouseDownEvent(opt);
 			} else if (opt.e.altKey || opt.e.which === 2 || currentTool === OperationType.PAN) {
 				this.canvas.isDragging = true;
 				this.canvas.lastPosX = opt.e.clientX;
@@ -237,9 +237,9 @@ export class CanvasEventManager {
 			} else if (currentTool === OperationType.SELECTBOX) {
 				// 选择框模式
 				this.aiSelectboxToolManager.mouseMoveEvent(opt);
-			} else if (currentTool === OperationType.RECTANGLE) {
-				// 矩形模式
-				this.rectToolManager.mouseMoveEvent(opt);
+			} else if (this.shapeToolManager.tools.includes(currentTool)) {
+				// 形状模式
+				this.shapeToolManager.mouseMoveEvent(opt);
 			} else if (this.canvas.isDragging) {
 				const vpt = this.canvas.viewportTransform;
 				vpt[4] += opt.e.clientX - this.canvas.lastPosX;
@@ -321,9 +321,9 @@ export class CanvasEventManager {
 			} else if (currentTool === OperationType.SELECTBOX) {
 				// 选择框模式
 				this.aiSelectboxToolManager.mouseUpEvent(opt);
-			} else if (currentTool === OperationType.RECTANGLE) {
-				// 矩形模式
-				this.rectToolManager.mouseDownEvent(opt);
+			} else if (this.shapeToolManager.tools.includes(currentTool)) {
+				// 形状模式
+				this.shapeToolManager.mouseDownEvent(opt);
 			} else if (currentTool === OperationType.PAN) {

 				// 平滑停止任何正在进行的惯性动画
@@ -386,9 +386,9 @@ export class CanvasEventManager {
 			} else if (currentTool === OperationType.SELECTBOX) {
 				// 选择框模式
 				this.aiSelectboxToolManager.mouseMoveEvent(opt);
-			} else if (currentTool === OperationType.RECTANGLE) {
-				// 矩形模式
-				this.rectToolManager.mouseMoveEvent(opt);
+			} else if (this.shapeToolManager.tools.includes(currentTool)) {
+				// 形状模式
+				this.shapeToolManager.mouseMoveEvent(opt);
 			} else if (currentTool === OperationType.PAN) {

 				// 检查是否是触摸事件
@@ -496,9 +496,9 @@ export class CanvasEventManager {
 			} else if (currentTool === OperationType.SELECTBOX) {
 				// 选择框模式
 				this.aiSelectboxToolManager.mouseUpEvent(opt);
-			} else if (currentTool === OperationType.RECTANGLE) {
-				// 矩形模式
-				this.rectToolManager.mouseUpEvent(opt);
+			} else if (this.shapeToolManager.tools.includes(currentTool)) {
+				// 形状模式
+				this.shapeToolManager.mouseUpEvent(opt);
 			} else if (currentTool === OperationType.PAN) {

 				// 重置触摸状态
@@ -668,9 +668,9 @@ export class CanvasEventManager {
 		} else if (currentTool === OperationType.SELECTBOX) {
 			// 选择框模式
 			this.aiSelectboxToolManager.mouseUpEvent(opt);
-		} else if (currentTool === OperationType.RECTANGLE) {
-			// 矩形模式
-			this.rectToolManager.mouseUpEvent(opt);
+		} else if (this.shapeToolManager.tools.includes(currentTool)) {
+			// 形状模式
+			this.shapeToolManager.mouseUpEvent(opt);
 		} else if (this.canvas.isDragging) {
 			// if (this.lastMousePositions.length > 1 && opt && opt.e) {
 			// 	this.animationManager.applyInertiaEffect(
@@ -1074,7 +1074,7 @@ export class CanvasEventManager {
 	}

 	dispose() {
-		this.rectToolManager?.dispose()
+		this.shapeToolManager?.dispose()
 		this.aiSelectboxToolManager?.dispose()
 		// 移除所有事件监听
 		this.canvas.off();
--- a/src/components/Canvas/DepthCanvas/manager/events/KeyEventManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/events/KeyEventManager.ts
@@ -9,13 +9,14 @@ export class KeyEventManager {
 	/** 处理键盘事件 */
 	_handleKeyDown: any
 	handleKeyDown(event: any) {
+		const activeID = this.stateManager.layerManager.activeID.value
 		const ctrl = event.ctrlKey ? 'ctrl-' : "";
 		const shift = event.shiftKey ? 'shift-' : "";
 		const key = event.key;
 		const reg = new RegExp(`^${ctrl}${shift}${key}$`, 'i')
 		const list = [
-			// { key: "ctrl-c", handler: () => this.handleCopy(event) },
-			// { key: "delete", handler: () => this.handleDelete(event) },
+			{ key: "ctrl-c", handler: () => this.stateManager.layerManager.copyLayerById(activeID) },
+			{ key: "delete", handler: () => this.stateManager.layerManager.deleteLayerById(activeID) },
 			{ key: "ctrl-z", handler: () => this.stateManager.undoState() },
 			{ key: "ctrl-shift-z", handler: () => this.stateManager.redoState() },
 		]
--- a/src/components/Canvas/DepthCanvas/tools/canvasMethod.js
+++ b/src/components/Canvas/DepthCanvas/tools/canvasMethod.js
@@ -39,4 +39,57 @@ export async function getObjectsBoundingBox(objects = []) {
 		width: box2.x - box1.x,
 		height: box2.y - box1.y,
 	}
-}
+}
+
+/** 获取五角星数组 */
+export function getStarArr(width = 0, height = 0) {
+	const arr = [
+		{ x: 0, y: -0.5 },     // 顶点0 (上)
+		{ x: 0.15, y: -0.15 },    // 顶点1 (内)
+		{ x: 0.50, y: -0.15 },    // 顶点2 (右上外)
+		{ x: 0.20, y: 0.10 },     // 顶点3 (内)
+		{ x: 0.30, y: 0.50 },     // 顶点4 (右下外)
+		{ x: 0.0, y: 0.25 },      // 顶点5 (内)
+		{ x: -0.30, y: 0.50 },    // 顶点6 (左下外)
+		{ x: -0.20, y: 0.10 },    // 顶点7 (内)
+		{ x: -0.50, y: -0.15 },   // 顶点8 (左上外)
+		{ x: -0.15, y: -0.15 }    // 顶点9 (内)
+	]
+	return arr.map(item => ({
+		x: item.x * width,
+		y: item.y * height,
+	}))
+}
+/** 获取箭头路径 */
+export function getArrowPath(width = 0, height = 0) {
+	const arr = [
+		["M", 0, height / 2],
+		["L", width, height / 2],
+		["M", width - 8, 0],
+		["L", width, height / 2],
+		["L", width - 8, height],
+	]
+	var path = ""
+	arr.forEach(item => {
+		path += item.join(" ") + " "
+	})
+	return path
+}
+
+/** 计算两点之间的距离 */
+export function distance(x1, y1, x2, y2) {
+	const dx = x2 - x1;
+	const dy = y2 - y1;
+	return Math.sqrt(dx * dx + dy * dy);
+}
+/** 计算两点之间的角度（角度） */
+export function angleBetweenPointsDegrees(x1, y1, x2, y2) {
+	const dx = x2 - x1;
+	const dy = y2 - y1;
+
+	// 计算弧度并转换为角度
+	const rad = Math.atan2(dy, dx);
+	const deg = rad * 180 / Math.PI;
+
+	return deg;
+}
--- a/src/components/Canvas/DepthCanvas/tools/layerHelper.js
+++ b/src/components/Canvas/DepthCanvas/tools/layerHelper.js
@@ -29,12 +29,16 @@ export const OperationType = {
 	PAN: "pan", // 拖拽模式
 	DRAW: "draw", // 绘画模式
 	ERASER: "eraser", // 橡皮擦模式
-	IMAGE: "image",// 图片工具模式
 	SELECTBOX: "selectbox",// 选择框工具模式
+
 	RECTANGLE: "rectangle",// 矩形工具模式
+	LINE: "line",// 直线工具模式
+	ARROW: "arrow",// 箭头工具模式
+	ELLIPSE: "ellipse",// 椭圆工具模式
+	TRIANGLE: "triangle",// 三角形工具模式
+	STAR: "star",// 五角星工具模式
+
 	TEXT: "text",// 文字工具模式
-	UNDO: "undo",// 撤销工具模式
-	REDO: "redo",// 重做工具模式
 };

 // 所有操作模式类型列表