From c87ed70e7c4572d6a1d03c3bae05e3f272bbd0bc Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Wed, 11 Mar 2026 15:34:56 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E6=B7=B1=E5=BA=A6=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/brush-control-panel.vue        |  118 ++
 ...eader-tools.vue => depth-header-tools.vue} |   12 +-
 .../components/layer-panel/layer-item.vue     |   16 +-
 .../components/layer-panel/layer-list.vue     |    6 +-
 .../components/tools/depth-input.vue          |   79 +
 .../components/tools/depth-offset-tool.vue    |  217 +++
 .../components/tools/depth-select.vue         |   52 +
 .../components/tools/depth-slider.vue         |  171 ++
 .../Canvas/DepthCanvas/depth-canvas.vue       |   80 +-
 .../DepthCanvas/manager/AnimationManager.js   |    9 +-
 .../DepthCanvas/manager/BrushIndicator.js     |  520 ++++++
 .../DepthCanvas/manager/CanvasManager.ts      |  117 +-
 .../DepthCanvas/manager/EraserStateManager.js |   99 +
 .../DepthCanvas/manager/EventManager.ts       |   84 -
 .../DepthCanvas/manager/LayerManager.ts       |  169 +-
 .../DepthCanvas/manager/StateManager.ts       |    7 +-
 .../Canvas/DepthCanvas/manager/ToolManager.ts |  107 +-
 .../DepthCanvas/manager/brushes/BaseBrush.js  |  359 ++++
 .../manager/brushes/BrushRegistry.js          |  201 +++
 .../DepthCanvas/manager/brushes/BrushStore.js |  694 +++++++
 .../manager/brushes/FABRIC_ERASING_GUIDE.md   |  106 ++
 .../DepthCanvas/manager/brushes/README.md     |  280 +++
 .../manager/brushes/TexturePresetManager.js   |  617 +++++++
 .../manager/brushes/brushManager.js           | 1000 +++++++++++
 .../manager/brushes/data/sprayBrushData.js    |    4 +
 .../manager/brushes/fabric.brushes.js         | 1596 +++++++++++++++++
 .../manager/brushes/types/CrayonBrush.js      |  245 +++
 .../brushes/types/CustomBrushExample.js       | 1344 ++++++++++++++
 .../manager/brushes/types/CustomPenBrush.js   |  196 ++
 .../manager/brushes/types/FurBrush.js         |  201 +++
 .../manager/brushes/types/InkBrush.js         |  267 +++
 .../manager/brushes/types/LongfurBrush.js     |  303 ++++
 .../manager/brushes/types/MarkerBrush.js      |  230 +++
 .../manager/brushes/types/PencilBrush.js      |  378 ++++
 .../manager/brushes/types/RibbonBrush.js      |  357 ++++
 .../manager/brushes/types/ShadedBrush.js      |  362 ++++
 .../manager/brushes/types/SketchyBrush.js     |  371 ++++
 .../manager/brushes/types/SprayBrush.js       |  246 +++
 .../manager/brushes/types/SpraypaintBrush.js  |  315 ++++
 .../manager/brushes/types/TextureBrush.js     |  945 ++++++++++
 .../manager/brushes/types/WritingBrush.js     |  264 +++
 .../manager/events/CanvasEventManager.js      |   13 +-
 .../Canvas/DepthCanvas/tools/canvasMethod.js  |   40 +
 .../Canvas/DepthCanvas/tools/exportMethod.js  |   26 +
 .../Canvas/DepthCanvas/tools/index.d.ts       |   45 -
 .../components/nodes/result-image.vue         |    2 +-
 46 files changed, 12646 insertions(+), 224 deletions(-)
 create mode 100644 src/components/Canvas/DepthCanvas/components/brush-control-panel.vue
 rename src/components/Canvas/DepthCanvas/components/{header-tools.vue => depth-header-tools.vue} (92%)
 create mode 100644 src/components/Canvas/DepthCanvas/components/tools/depth-input.vue
 create mode 100644 src/components/Canvas/DepthCanvas/components/tools/depth-offset-tool.vue
 create mode 100644 src/components/Canvas/DepthCanvas/components/tools/depth-select.vue
 create mode 100644 src/components/Canvas/DepthCanvas/components/tools/depth-slider.vue
 create mode 100644 src/components/Canvas/DepthCanvas/manager/BrushIndicator.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/EraserStateManager.js
 delete mode 100644 src/components/Canvas/DepthCanvas/manager/EventManager.ts
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/BaseBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/BrushRegistry.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/BrushStore.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/FABRIC_ERASING_GUIDE.md
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/README.md
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/TexturePresetManager.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/brushManager.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/data/sprayBrushData.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/fabric.brushes.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/CrayonBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/CustomBrushExample.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/CustomPenBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/FurBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/InkBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/LongfurBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/MarkerBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/PencilBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/RibbonBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/ShadedBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/SketchyBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/SprayBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/SpraypaintBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/TextureBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/manager/brushes/types/WritingBrush.js
 create mode 100644 src/components/Canvas/DepthCanvas/tools/canvasMethod.js
 create mode 100644 src/components/Canvas/DepthCanvas/tools/exportMethod.js
 delete mode 100644 src/components/Canvas/DepthCanvas/tools/index.d.ts

diff --git a/src/components/Canvas/DepthCanvas/components/brush-control-panel.vue b/src/components/Canvas/DepthCanvas/components/brush-control-panel.vue
new file mode 100644
index 0000000..af24f34
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/components/brush-control-panel.vue
@@ -0,0 +1,118 @@
+<template>
+	<transition name="fade">
+		<div v-if="show" class="brush-control-panel">
+			<div class="input-box">
+				<div class="label">Size</div>
+				<depth-slider
+					:is-input="false"
+					v-model="brushSize"
+					:tip-formatter="(v) => v + 'px'"
+					:min="5"
+					:max="100"
+					@input="onInputSize"
+				/>
+			</div>
+			<div class="input-box" v-if="currentTool === OperationType.DRAW">
+				<div class="label">Opacity</div>
+				<depth-slider
+					:is-input="false"
+					v-model="brushOpacity"
+					:tip-formatter="(v) => (v * 100).toFixed(0) + '%'"
+					:min="0"
+					:max="1"
+					:step="0.01"
+					@input="onInputOpacity"
+				/>
+			</div>
+			<div class="color-box" v-if="currentTool === OperationType.DRAW">
+				<input type="color" v-model="brushColor" @input="onInputColor" />
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script setup lang="ts">
+	import { ref, inject, computed, watch } from 'vue'
+	import depthSlider from './tools/depth-slider.vue'
+	import { OperationType } from '../tools/layerHelper'
+	const props = defineProps({
+		currentTool: { required: true, type: [String, null] }
+	})
+	const stateManager = inject('stateManager') as any
+	const toolManager = inject('toolManager') as any
+	const brushState = computed(() => stateManager.brushManager.brushStore.state)
+	const showTools = [OperationType.DRAW, OperationType.ERASER]
+	const show = computed(() => showTools.includes(props.currentTool))
+	watch(brushState, (value) => {
+		if (value) updateBrushState()
+	})
+	const brushSize = ref(40)
+	const brushOpacity = ref(100)
+	const brushColor = ref('#000000')
+	const onInputSize = (value: number) => {
+		stateManager.brushManager.setBrushSize(value)
+	}
+	const onInputOpacity = (value: number) => {
+		stateManager.brushManager.setBrushOpacity(value)
+	}
+	const onInputColor = () => {
+		stateManager.brushManager.setBrushColor(brushColor.value)
+	}
+	const updateBrushState = () => {
+		brushSize.value = brushState.value.size
+		brushOpacity.value = brushState.value.opacity
+		brushColor.value = brushState.value.color
+	}
+	updateBrushState()
+</script>
+<style lang="less" scoped>
+	// 淡入淡出动画
+	.fade-enter-active,
+	.fade-leave-active {
+		transition: opacity 0.3s;
+	}
+	.fade-enter-from,
+	.fade-leave-to {
+		opacity: 0;
+	}
+
+	.brush-control-panel {
+		position: absolute;
+		top: 8.8rem;
+		left: 50%;
+		transform: translateX(-50%);
+		height: 4.1rem;
+		padding: 0 2rem;
+		border: 0.2rem solid #ebebeb;
+		background: #ffffff;
+		border-radius: 1.1rem;
+		box-shadow: 0 1.66rem 2.33rem 0 rgba(0, 0, 0, 0.05);
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		user-select: none;
+		gap: 1.5rem;
+		> .input-box {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 1rem;
+			> .label {
+				font-size: 1.4rem;
+				color: #000;
+			}
+			> .depth-slider {
+				width: 8.4rem;
+			}
+		}
+		> .color-box {
+			> input {
+				width: 4.7rem;
+				height: 2.5rem;
+				border-radius: 0.4rem;
+				padding: 0 0.4rem;
+			}
+		}
+	}
+</style>
diff --git a/src/components/Canvas/DepthCanvas/components/header-tools.vue b/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
similarity index 92%
rename from src/components/Canvas/DepthCanvas/components/header-tools.vue
rename to src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
index 172dce0..2ba172a 100644
--- a/src/components/Canvas/DepthCanvas/components/header-tools.vue
+++ b/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
@@ -15,6 +15,9 @@
 			<span class="icon"><svg-icon name="export" size="12" /></span>
 			<span class="text">Export</span>
 		</button>
+		<button class="export" @click="emit('import')">
+			<span class="text">import</span>
+		</button>
 		<button class="workbench">
 			<span class="icon"><svg-icon name="dc-workbench" size="20" /></span>
 			<span class="text">Workbench</span>
@@ -30,6 +33,7 @@
 		step: { default: 0.1, type: Number }
 	})
 	const emit = defineEmits(['export', 'import'])
+	const importLocalImage = inject('importLocalImage') as () => void
 	const stateManager = inject('stateManager') as any
 	const toolManager = inject('toolManager') as any
 	const tool = computed(() => toolManager.currentTool.value)
@@ -42,7 +46,13 @@
 		{ 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.IMAGE, icon: 'dc-image', iconSize: 17, disabled: ref(false) },
+		{
+			name: OperationType.IMAGE,
+			icon: 'dc-image',
+			iconSize: 17,
+			disabled: ref(false),
+			on: () => importLocalImage()
+		},
 		{ name: OperationType.SELECTBOX, icon: 'dc-selectbox', iconSize: 16, disabled: ref(false) },
 		{ name: OperationType.RECTANGLE, icon: 'dc-rectangle', iconSize: 16, disabled: ref(false) },
 		{ type: 'line' },
diff --git a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue
index a54bebb..a3d62c6 100644
--- a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue
+++ b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue
@@ -3,7 +3,7 @@
 		<div class="drag"><svg-icon name="dc-drag" size="18" /></div>
 		<div class="thumb"></div>
 		<div class="name">
-			<div @dblclick="onClickEditName" v-if="!editName">
+			<div @dblclick="onClickEditName" v-if="!editName" :title="layer.info.name">
 				{{ layer.info.name || '未命名图层' }}
 			</div>
 			<input
@@ -16,10 +16,10 @@
 			/>
 		</div>
 		<div class="icons">
-			<span @click="onClickShowHide"
+			<span @click.stop="onClickShowHide"
 				><svg-icon :name="layer.visible ? 'dc-show' : 'dc-hide'" size="15"
 			/></span>
-			<span @click="onClickDelete"><svg-icon name="dc-delete" size="13" /></span>
+			<span @click.stop="onClickDelete"><svg-icon name="dc-delete" size="13" /></span>
 			<span><svg-icon name="dc-down_arrow" size="11" /></span>
 		</div>
 	</div>
@@ -27,7 +27,10 @@
 
 <script setup lang="ts">
 	import { ref, inject, nextTick } from 'vue'
+	import { OperationType } from '../../tools/layerHelper'
+
 	const layerManager = inject('layerManager') as any
+	const toolManager = inject('toolManager') as any
 	const editName = ref(false)
 	const props = defineProps({
 		layer: {
@@ -58,6 +61,7 @@
 	}
 	const onClickLayer = () => {
 		layerManager.setActiveID(props.layer.info.id)
+		toolManager.setTool(OperationType.SELECT)
 	}
 </script>
 
@@ -109,13 +113,11 @@
 		> .name {
 			flex: 1;
 			font-size: 1.4rem;
-
+			overflow: hidden;
 			> div {
 				cursor: pointer;
-				width: 100%;
 				height: 3rem;
-				display: flex;
-				align-items: center;
+				line-height: 3rem;
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
diff --git a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
index df6ca37..0f6f19f 100644
--- a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
+++ b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue
@@ -6,7 +6,7 @@
 				<span class="title">Layer</span>
 			</div>
 			<div class="right">
-				<span class="icon"><svg-icon name="add" size="14" /></span>
+				<span class="icon" @click="addLayer"><svg-icon name="add" size="14" /></span>
 			</div>
 		</div>
 		<div class="content">
@@ -60,9 +60,11 @@
 	const handleDragEnd = (event) => {
 		draging.value = false
 		const { from, to, oldIndex, newIndex, data } = event
-		console.log('oldIndex', data)
 		layerManager.dragSort(data.info.id, newIndex)
 	}
+	const addLayer = () => {
+		layerManager.createEmptyLayer()
+	}
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/Canvas/DepthCanvas/components/tools/depth-input.vue b/src/components/Canvas/DepthCanvas/components/tools/depth-input.vue
new file mode 100644
index 0000000..aadd822
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/components/tools/depth-input.vue
@@ -0,0 +1,79 @@
+<template>
+	<div class="depth-input">
+		<span class="decorate"></span>
+		<span v-show="icon" class="icon">
+			<svg-icon :name="icon" :size="iconSize" size-unit="px" />
+		</span>
+		<span v-show="before" class="before">{{ before }}</span>
+		<input v-bind="attrs" :value="modelValue" @input="onInput" @copy.stop @keydown.stop />
+		<span v-show="after" class="after">{{ after }}</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, useAttrs, watch } from 'vue'
+	const props = defineProps({
+		modelValue: { type: [String, Number] },
+		icon: { default: '', type: String },
+		iconSize: { default: '10', type: [Number, String] },
+		before: { default: '', type: String },
+		after: { default: '', type: String }
+	})
+	const attrs = useAttrs()
+	const emit = defineEmits(['update:modelValue', 'input'])
+	const onInput = (e) => {
+		var value = e.target.value
+		if (attrs.type === 'number') value = Number(value)
+		emit('update:modelValue', value)
+		emit('input', value)
+	}
+</script>
+<style scoped lang="less">
+	.depth-input {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		border: 1px solid rgba(230, 230, 231, 1);
+		border-radius: 1.7px;
+		height: 17px;
+		padding: 0 4px 0 2px;
+		> .decorate {
+			width: 2px;
+			background-color: rgba(230, 230, 231, 1);
+			border-radius: 3px;
+			height: 85%;
+			margin-right: 4px;
+		}
+		> .iconfont {
+			font-size: 12px;
+			color: #000;
+			margin-right: 2px;
+		}
+		> .before {
+			font-size: 12px;
+			color: #000;
+			margin-right: 2px;
+		}
+		> .after {
+			font-size: 12px;
+			color: #000;
+			margin-left: 1px;
+		}
+		> input {
+			font-size: 12px;
+			width: 0;
+			flex: 1;
+			text-align: right;
+			outline: none;
+			border: none;
+			background-color: transparent;
+			padding: 0;
+			-moz-appearance: textfield; /* Firefox */
+			&::-webkit-outer-spin-button,
+			&::-webkit-inner-spin-button {
+				-webkit-appearance: none;
+				margin: 0;
+			}
+		}
+	}
+</style>
diff --git a/src/components/Canvas/DepthCanvas/components/tools/depth-offset-tool.vue b/src/components/Canvas/DepthCanvas/components/tools/depth-offset-tool.vue
new file mode 100644
index 0000000..742e288
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/components/tools/depth-offset-tool.vue
@@ -0,0 +1,217 @@
+<template>
+	<div class="depth-offset-tool">
+		<div class="input" v-show="showInput">
+			<depth-input v-model="left" type="number" before="X" after="%" :min="-100" :max="100" />
+			<depth-input v-model="top" type="number" before="Y" after="%" :min="-100" :max="100" />
+		</div>
+		<div
+			class="dish"
+			@mousedown="mousedown"
+			@touchstart="mousedown"
+			ref="dishRef"
+			v-show="showDish"
+		>
+			<img src="/src/assets/images/icon/xyz.png" />
+			<span class="ball" :style="ballStyle"></span>
+			<span class="tip x">X: {{ left }}%</span>
+			<span class="tip y">Y: {{ top }}%</span>
+			<span class="line x"></span>
+			<span class="line y"></span>
+			<span class="line z" :style="lineZStyle"></span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, watch, computed } from 'vue'
+	import depthInput from './depth-input.vue'
+	const props = defineProps({
+		modelValue: { type: Object as () => { x: number; y: number } },
+		showInput: {
+			type: Boolean,
+			default: true
+		},
+		showDish: {
+			type: Boolean,
+			default: true
+		}
+	})
+	const emit = defineEmits(['update:modelValue', 'change', 'input'])
+	// 工具的实际坐标 -100 ~ 100
+	const top = ref(Math.round(props.modelValue.y))
+	const left = ref(Math.round(props.modelValue.x))
+
+	// 原点的坐标 0 ~ 100
+	const ballStyle = computed(() => ({
+		top: 50 + top.value / 2 + '%',
+		left: 50 + left.value / 2 + '%'
+	}))
+	watch(
+		() => props.modelValue.x,
+		(v) => (left.value = v)
+	)
+	watch(
+		() => props.modelValue.y,
+		(v) => (top.value = v)
+	)
+	const dishRef = ref<HTMLDivElement>()
+	const mousedown = (e: MouseEvent | TouchEvent) => {
+		if (!dishRef.value) return
+		const mousemove = (e: MouseEvent | TouchEvent) => {
+			if (!dishRef.value) return
+			const rect = dishRef.value.getBoundingClientRect()
+			const X = e.clientX || (e as TouchEvent).touches[0].clientX
+			const Y = e.clientY || (e as TouchEvent).touches[0].clientY
+			var x = ((X - rect.left) / rect.width) * 100
+			var y = ((Y - rect.top) / rect.height) * 100
+			if (x < 0) x = 0
+			if (x > 100) x = 100
+			if (y < 0) y = 0
+			if (y > 100) y = 100
+			left.value = Math.round((x - 50) * 2)
+			top.value = Math.round((y - 50) * 2)
+			onInput()
+		}
+		mousemove(e)
+		const mouseup = () => {
+			onChange()
+			document.removeEventListener('mousemove', mousemove)
+			document.removeEventListener('touchmove', mousemove)
+			document.removeEventListener('mouseup', mouseup)
+			document.removeEventListener('touchend', mouseup)
+		}
+		document.addEventListener('mousemove', mousemove)
+		document.addEventListener('touchmove', mousemove)
+		document.addEventListener('mouseup', mouseup)
+		document.addEventListener('touchend', mouseup)
+	}
+	const onInput = () => {
+		const value = {
+			x: left.value,
+			y: top.value
+		}
+		emit('update:modelValue', value)
+		emit('input', value)
+	}
+	var changeTime: any = null
+	const onChange = () => {
+		clearTimeout(changeTime)
+		changeTime = setTimeout(() => {
+			const value = {
+				x: left.value,
+				y: top.value
+			}
+			emit('update:modelValue', value)
+			emit('change', value)
+		}, 500)
+	}
+	const lineZStyle = computed(() => ({
+		'--rotateZ': calculateAngle(0, 0, left.value, top.value) + 'deg',
+		width: calculateDistance(0, 0, left.value, top.value) / 2 + '%'
+	}))
+	// 计算角度
+	function calculateAngle(x1: number, y1: number, x2: number, y2: number) {
+		const deltaX = x2 - x1
+		const deltaY = y1 - y2
+		let angle = Math.atan2(deltaX, deltaY) * (180 / Math.PI) - 90
+		return angle
+	}
+	// 计算距离
+	function calculateDistance(x1: number, y1: number, x2: number, y2: number) {
+		const deltaX = x2 - x1
+		const deltaY = y2 - y1
+		const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+		return distance
+	}
+</script>
+
+<style scoped lang="less">
+	.depth-offset-tool {
+		position: relative;
+		> .input {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			> * {
+				flex: 1;
+				margin-right: 10px;
+				&:last-child {
+					margin-right: 0;
+				}
+			}
+		}
+		> .dish {
+			width: 115px;
+			height: 115px;
+			border: 1px solid #eaeaea;
+			border-radius: 3.4px;
+			cursor: pointer;
+			position: relative;
+			background-color: #f6f6f6;
+			margin-top: 20px;
+			> * {
+				position: absolute;
+				pointer-events: none;
+				user-select: none;
+			}
+			> img {
+				width: 12px;
+				height: 12px;
+				bottom: 3.5px;
+				right: 3.5px;
+			}
+			> .ball {
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				width: 8.5px;
+				height: 8.5px;
+				border: 1px solid #fff;
+				background-color: #333;
+				border-radius: 50%;
+				box-shadow: 0px 0.68px 0.17px 0px rgba(0, 0, 0, 0.26);
+			}
+			> .tip {
+				font-size: 8.5px;
+				color: #000;
+				line-height: 24px;
+				&.x {
+					top: 50%;
+					right: 0%;
+					transform: translate(100%, -50%);
+					padding-left: 6px;
+				}
+				&.y {
+					top: 0%;
+					left: 50%;
+					transform: translate(-50%, -100%);
+				}
+			}
+			> .line {
+				border-color: #d9d9d9;
+				border-style: dashed;
+				border-width: 0;
+				width: 0;
+				height: 0;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				&.x {
+					width: 100%;
+					border-top-width: 1px;
+				}
+				&.y {
+					height: 100%;
+					border-left-width: 1px;
+				}
+				&.z {
+					width: 50%;
+					border-top-width: 1px;
+					border-color: #454754;
+					transform: translate(0%, -50%) rotateZ(var(--rotateZ));
+					transform-origin: left center;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/components/Canvas/DepthCanvas/components/tools/depth-select.vue b/src/components/Canvas/DepthCanvas/components/tools/depth-select.vue
new file mode 100644
index 0000000..43804df
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/components/tools/depth-select.vue
@@ -0,0 +1,52 @@
+<template>
+	<div class="depth-select">
+		<el-select :model-value="modelValue" @change="onChange" v-bind="attrs">
+			<el-option v-for="v in list" :key="v.value" :label="v.label" :value="v.value" />
+		</el-select>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, useAttrs, watch } from 'vue'
+	const props = defineProps({
+		modelValue: { required: true },
+		list: { default: () => [], type: [Array, Object] }
+	})
+	const attrs = useAttrs()
+	const emit = defineEmits(['update:modelValue', 'change'])
+	const onChange = (value) => {
+		emit('update:modelValue', value)
+		emit('change', value)
+	}
+</script>
+<style scoped lang="less">
+	.depth-select {
+		&:deep(.el-select) {
+			--el-select-input-font-size: 12px;
+			.el-select__wrapper {
+				font-size: 12px;
+				min-height: 0;
+				height: 28px;
+				padding: 0 8px;
+			}
+			.el-select__selected-item,
+			.el-select__input-wrapper,
+			.el-select__placeholder {
+				line-height: normal;
+			}
+			.el-select__input {
+				height: 24px;
+			}
+		}
+	}
+	.el-popper {
+		.el-select-dropdown {
+			li {
+				padding-left: 8px;
+				height: 30px;
+				line-height: 30px;
+				font-size: 12px;
+			}
+		}
+	}
+</style>
diff --git a/src/components/Canvas/DepthCanvas/components/tools/depth-slider.vue b/src/components/Canvas/DepthCanvas/components/tools/depth-slider.vue
new file mode 100644
index 0000000..a14b319
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/components/tools/depth-slider.vue
@@ -0,0 +1,171 @@
+<template>
+	<div class="depth-slider" :disabled="disabled">
+		<div
+			class="input-range"
+			:style="{
+				'--progress': (value - props.min) / (props.max - props.min)
+			}"
+		>
+			<span class="tip">{{ props.tipFormatter(value) }}</span>
+			<input
+				type="range"
+				v-model="value"
+				v-bind="$attrs"
+				@input="onInput"
+				@change="onChange"
+				:disabled="disabled"
+				:min="props.min"
+				:max="props.max"
+			/>
+		</div>
+		<div class="input" v-show="isInput">
+			<depth-input
+				type="number"
+				v-model="value"
+				v-bind="$attrs"
+				@input="onInput"
+				@change="onChange"
+				:disabled="disabled"
+				:min="props.min"
+				:max="props.max"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, defineProps, defineEmits, watch } from 'vue'
+	import depthInput from './depth-input.vue'
+	const props = defineProps({
+		modelValue: { type: Number },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		min: {
+			type: Number,
+			default: 0
+		},
+		max: {
+			type: Number,
+			default: 100
+		},
+		tipFormatter: {
+			type: Function,
+			default: (v) => v
+		},
+		isInput: {
+			type: Boolean,
+			default: true
+		}
+	})
+	const emit = defineEmits(['update:modelValue', 'change', 'input'])
+	watch(
+		() => props.modelValue,
+		(v) => {
+			value.value = v
+		}
+	)
+	const value = ref(props.modelValue)
+	const onInput = () => {
+		if (props.disabled) return
+		const v = Number(value.value)
+		emit('update:modelValue', v)
+		emit('input', v)
+	}
+	const onChange = () => {
+		if (props.disabled) return
+		const v = Number(value.value)
+		emit('update:modelValue', v)
+		emit('change', v)
+	}
+</script>
+
+<style scoped lang="less">
+	.depth-slider {
+		position: relative;
+		display: flex;
+		align-items: center;
+		--input-thumb-size: 1.4rem;
+		--backcolor1: var(--depth-slider-thumb-color1, #000);
+		--backcolor2: var(--depth-slider-thumb-color2, #d3d3d3);
+		&:hover {
+			> .input-range > .tip {
+				display: block;
+			}
+		}
+		> .input-range {
+			position: relative;
+			flex: 2;
+			display: flex;
+			> input {
+				width: 100%;
+				-webkit-appearance: none;
+				appearance: none;
+				height: 0.47rem;
+				border-radius: 0.47rem;
+				outline: none;
+				background: linear-gradient(
+					to right,
+					var(--backcolor1) 0%,
+					var(--backcolor1) calc(var(--progress) * 100%),
+					var(--backcolor2) calc(var(--progress) * 100%),
+					var(--backcolor2) 100%
+				);
+				&::-webkit-slider-thumb {
+					-webkit-appearance: none;
+					appearance: none;
+					width: var(--input-thumb-size);
+					height: var(--input-thumb-size);
+					border-radius: 50%;
+					background: var(--backcolor1); /* 蓝色滑块 */
+					cursor: pointer;
+					transition: all 0.2s;
+					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+				}
+				&::-webkit-slider-thumb:hover {
+					transform: scale(1.1);
+				}
+			}
+			> .tip {
+				position: absolute;
+				pointer-events: none;
+				user-select: none;
+				color: #666;
+				top: calc(var(--input-thumb-size) / -2 - 0.5rem);
+				left: calc(
+					(100% - var(--input-thumb-size)) * var(--progress) + var(--input-thumb-size) / 2
+				);
+				transform: translate(-50%, -100%);
+				background-color: rgba(0, 0, 0, 0.7);
+				color: white;
+				padding: 0.3rem 0.8rem;
+				border-radius: 0.4rem;
+				font-size: 1.4rem;
+				white-space: nowrap;
+				pointer-events: none;
+				display: none;
+				&::after {
+					content: '';
+					position: absolute;
+					top: 97%;
+					left: 50%;
+					transform: translateX(-50%);
+					width: 0;
+					height: 0;
+					border-left: 5px solid transparent;
+					border-right: 5px solid transparent;
+					border-top: 5px solid rgba(0, 0, 0, 0.8);
+				}
+			}
+		}
+		> .input {
+			flex: 1;
+			margin-left: 0.6rem;
+			> input {
+				border-radius: 0.3rem;
+				width: 100%;
+			}
+		}
+	}
+</style>
diff --git a/src/components/Canvas/DepthCanvas/depth-canvas.vue b/src/components/Canvas/DepthCanvas/depth-canvas.vue
index 4a8c5bd..1f56296 100644
--- a/src/components/Canvas/DepthCanvas/depth-canvas.vue
+++ b/src/components/Canvas/DepthCanvas/depth-canvas.vue
@@ -3,35 +3,40 @@
 		<div class="canvas-container" ref="canvasContainerRef">
 			<canvas ref="canvasRef"></canvas>
 		</div>
-		<layer-panel />
-		<details-panel />
-		<header-tools @export="exportCanvas" />
-		<zoom
-			:zoom="canvasManager.currentZoom.value / 100"
-			:step="0.1"
-			is-home
-			@home="() => canvasManager.resetZoom()"
-		/>
+		<template v-if="isReady">
+			<layer-panel />
+			<details-panel />
+			<depth-header-tools @export="exportCanvas" @import="importCanvas" />
+			<brush-control-panel :currentTool="toolManager.currentTool.value" />
+			<zoom
+				:zoom="canvasManager.currentZoom.value / 100"
+				:step="0.1"
+				is-home
+				@home="() => canvasManager.resetZoom()"
+			/>
+		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
 	import { fabric } from 'fabric-with-all'
 	import { computed, ref, markRaw, onMounted, nextTick, provide, onBeforeMount } from 'vue'
-	import { NODE_TYPE, NODE_COMPONENT } from './tools/index.d'
+	import { OperationType } from './tools/layerHelper'
 	// 组件
 	import layerPanel from './components/layer-panel/index.vue'
 	import detailsPanel from './components/details-panel/index.vue'
-	import headerTools from './components/header-tools.vue'
+	import depthHeaderTools from './components/depth-header-tools.vue'
 	import zoom from '../components/zoom.vue'
+	import brushControlPanel from './components/brush-control-panel.vue'
 
 	// 管理器
 	import { StateManager } from './manager/StateManager'
 	import { LayerManager } from './manager/LayerManager'
-	import { EventManager } from './manager/EventManager'
 	import { CanvasManager } from './manager/CanvasManager'
 	import { ToolManager } from './manager/ToolManager'
 
+	// 准备就绪
+	const isReady = ref(false)
 	const canvasContainerRef = ref(null)
 	const canvasRef = ref(null)
 
@@ -56,11 +61,6 @@
 	stateManager.setManager({ layerManager })
 	provide('layerManager', layerManager)
 
-	// 事件管理器
-	const eventManager = new EventManager({ stateManager })
-	stateManager.setManager({ eventManager })
-	provide('eventManager', eventManager)
-
 	// 工具管理器
 	const toolManager = new ToolManager({ stateManager, canvasManager })
 	stateManager.setManager({ toolManager })
@@ -75,6 +75,10 @@
 			canvasWidth: 750,
 			canvasHeight: 600
 		})
+		stateManager?.onMounted?.()
+		canvasManager?.onMounted?.()
+		layerManager?.onMounted?.()
+		toolManager?.onMounted?.()
 
 		const trailingTimeout = ref(null)
 		observer.value = new ResizeObserver((entries) => {
@@ -84,10 +88,10 @@
 			}, 100)
 		})
 		observer.value.observe(canvasContainerRef.value)
+
+		isReady.value = true // 准备就绪
 	})
-	onBeforeMount(() => {
-		// eventManager.removeEvents() // 移除事件
-	})
+	onBeforeMount(() => {})
 	async function handleWindowResize() {
 		console.log('==========画布窗口大小变化==========')
 		canvasManager.setCanvasViewSize({
@@ -96,8 +100,42 @@
 		})
 		canvasManager.resetZoom()
 	}
+	/** 导入本地图片 */
+	const importLocalImage = () => {
+		const input = document.createElement('input')
+		input.type = 'file'
+		input.accept = 'image/*'
+		input.click()
+		input.addEventListener('change', (e: any) => {
+			const file = e.target.files[0]
+			if (!file) return
+			const reader = new FileReader()
+			reader.readAsDataURL(file)
+			reader.onload = () => {
+				toolManager.setTool(OperationType.SELECT)
+				const url = reader.result as string
+				layerManager.createImageLayer(url, {
+					info: { name: file.name }
+				})
+			}
+		})
+	}
+	provide('importLocalImage', importLocalImage)
+
 	const exportCanvas = () => {
-		console.log(canvasManager.getBitObjects())
+		const json = canvasManager.getCanvasJSON()
+		localStorage.setItem('canvasJSON', json)
+	}
+	const importCanvas = () => {
+		const json = localStorage.getItem('canvasJSON')
+		if (!json) return
+		canvasManager.loadJSON(json, (success) => {
+			if (success) {
+				console.log('导入成功')
+			} else {
+				console.log('导入失败')
+			}
+		})
 	}
 </script>
 <style lang="less">
diff --git a/src/components/Canvas/DepthCanvas/manager/AnimationManager.js b/src/components/Canvas/DepthCanvas/manager/AnimationManager.js
index 6da5b5d..42af2e9 100644
--- a/src/components/Canvas/DepthCanvas/manager/AnimationManager.js
+++ b/src/components/Canvas/DepthCanvas/manager/AnimationManager.js
@@ -115,7 +115,7 @@ export class AnimationManager {
 					const adjustY = (1 - currentScaleFactor) * point.y;
 					vpt[4] = currentVpt[4] * scale + adjustX;
 					vpt[5] = currentVpt[5] * scale + adjustY;
-
+					this.canvas.setViewportTransform(vpt);
 					this.canvas.renderAll();
 				},
 				onComplete: () => {
@@ -167,7 +167,7 @@ export class AnimationManager {
 				const adjustY = (1 - currentScaleFactor) * point.y;
 				vpt[4] = currentVpt[4] * scale + adjustX;
 				vpt[5] = currentVpt[5] * scale + adjustY;
-
+				this.canvas.setViewportTransform(vpt);
 				this.canvas.renderAll();
 			},
 			onComplete: () => {
@@ -252,7 +252,7 @@ export class AnimationManager {
 		const vpt = this.canvas.viewportTransform;
 		vpt[4] = -x;
 		vpt[5] = -y;
-
+		this.canvas.setViewportTransform(vpt);
 		this.canvas.renderAll();
 	}
 
@@ -337,7 +337,7 @@ export class AnimationManager {
 						vpt[3] = viewTransform.zoom;
 						vpt[4] = viewTransform.panX;
 						vpt[5] = viewTransform.panY;
-
+						this.canvas.setViewportTransform(vpt);
 						this.canvas.renderAll();
 					},
 					onComplete: () => {
@@ -814,6 +814,7 @@ export class AnimationManager {
 
 				// 更新缩放值显示
 				this.currentZoom.value = Math.round(transform.zoom * 100);
+				this.canvas.setViewportTransform(vpt);
 				this.canvas.renderAll();
 			},
 			onComplete: () => {
diff --git a/src/components/Canvas/DepthCanvas/manager/BrushIndicator.js b/src/components/Canvas/DepthCanvas/manager/BrushIndicator.js
new file mode 100644
index 0000000..01184f7
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/BrushIndicator.js
@@ -0,0 +1,520 @@
+import { fabric } from "fabric-with-all";
+import { OperationType } from "../tools/layerHelper";
+
+/**
+ * 笔刷指示器
+ * 在画笔模式下显示当前笔刷大小的圆圈指示器
+ * 使用独立的 fabric.StaticCanvas，完全不干扰主画布的绘制流程
+ */
+export class BrushIndicator {
+	/**
+	 * 构造函数
+	 * @param {Object} canvas fabric.js画布实例
+	 * @param {Object} options 配置选项
+	 */
+	constructor(canvas, options = {}) {
+		this.canvas = canvas;
+		this.options = {
+			strokeColor: options.strokeColor || "rgba(0, 0, 0, 0.5)",
+			strokeWidth: options.strokeWidth || 1,
+			fillColor: options.fillColor || "rgba(0, 0, 0, 0.1)",
+			...options,
+		};
+
+		// 创建独立的静态画布
+		this.indicatorCanvas = null;
+		this.staticCanvas = null;
+		this.indicatorCircle = null;
+
+		// 事件处理器
+		this._mouseEnterHandler = null;
+		this._mouseLeaveHandler = null;
+		this._mouseMoveHandler = null;
+		this._zoomHandler = null;
+		this._viewportHandler = null;
+
+		// 当前状态
+		this.isVisible = false;
+		this.currentSize = 10;
+		this.isEnabled = false;
+		this.currentPosition = { x: 0, y: 0 };
+
+		// 缓存画布状态，用于优化性能
+		this._lastCanvasState = {
+			width: null,
+			height: null,
+			zoom: null,
+			viewportTransform: null,
+		};
+		this._createStaticCanvas();
+	}
+
+	/**
+	 * 创建独立的 fabric.StaticCanvas 画布层
+	 * @private
+	 */
+	_createStaticCanvas() {
+		if (!this.canvas.wrapperEl) return;
+
+		// 创建独立的 canvas 元素
+		this.indicatorCanvas = document.createElement("canvas");
+		this.indicatorCanvas.className = "brush-indicator-canvas";
+
+		// 设置样式，使其覆盖在主画布上
+		Object.assign(this.indicatorCanvas.style, {
+			position: "absolute",
+			top: "0",
+			left: "0",
+			pointerEvents: "none", // 不阻挡鼠标事件
+			zIndex: "10", // 确保在最上层
+			width: "100%",
+			height: "100%",
+		});
+
+		// 将指示器画布添加到 fabric.js 画布容器中
+		this.canvas.wrapperEl.appendChild(this.indicatorCanvas);
+
+		// 创建 fabric.StaticCanvas 实例
+		this.staticCanvas = new fabric.StaticCanvas(this.indicatorCanvas, {
+			enableRetinaScaling: this.canvas.enableRetinaScaling,
+			allowTouchScrolling: false,
+			selection: false,
+			skipTargetFind: true,
+			preserveObjectStacking: true,
+		});
+
+		// 同步画布尺寸和变换
+		this._syncCanvasProperties();
+
+		// 监听主画布变化
+		this._observeCanvasChanges();
+	}
+
+	/**
+	 * 同步画布属性（尺寸、缩放、视口变换等）
+	 * @private
+	 */
+	_syncCanvasProperties() {
+		if (!this.staticCanvas || !this.canvas) return;
+
+		// 检查是否为笔刷或橡皮擦模式，非相关模式直接返回
+		const isBrushMode =
+			this.canvas.isDrawingMode && this.canvas.freeDrawingBrush;
+		const isEraserMode =
+			this.canvas.isDrawingMode &&
+			this.canvas.freeDrawingBrush &&
+			this.canvas.freeDrawingBrush.type === "eraser";
+
+		const isLiquifyMode = this.canvas.toolId === OperationType.LIQUIFY;// 检查是否在液化模式
+		if ([isBrushMode, isEraserMode, isLiquifyMode].every(v => !v)) return;
+
+		let hasChanges = false;
+
+		// 检查画布尺寸是否变化
+		const currentWidth = this.canvas.width;
+		const currentHeight = this.canvas.height;
+		if (
+			currentWidth !== this._lastCanvasState.width ||
+			currentHeight !== this._lastCanvasState.height
+		) {
+			this.staticCanvas.setWidth(currentWidth);
+			this.staticCanvas.setHeight(currentHeight);
+			this._lastCanvasState.width = currentWidth;
+			this._lastCanvasState.height = currentHeight;
+			hasChanges = true;
+		}
+
+		// 检查缩放比例是否变化
+		const currentZoom = this.canvas.getZoom();
+		if (Math.abs(currentZoom - (this._lastCanvasState.zoom || 0)) > 0.001) {
+			this.staticCanvas.setZoom(currentZoom);
+			this._lastCanvasState.zoom = currentZoom;
+			hasChanges = true;
+		}
+
+		// 检查视口变换是否变化
+		const currentVpt = this.canvas.viewportTransform;
+		if (
+			currentVpt &&
+			!this._areViewportTransformsEqual(
+				currentVpt,
+				this._lastCanvasState.viewportTransform
+			)
+		) {
+			this.staticCanvas.setViewportTransform([...currentVpt]);
+			this._lastCanvasState.viewportTransform = [...currentVpt];
+			hasChanges = true;
+		}
+
+		// 只有在有变化时才重新渲染
+		if (hasChanges) {
+			this.staticCanvas.renderAll();
+		}
+	}
+
+	/**
+	 * 比较两个视口变换矩阵是否相等
+	 * @private
+	 * @param {Array} vpt1 视口变换矩阵1
+	 * @param {Array} vpt2 视口变换矩阵2
+	 * @returns {Boolean} 是否相等
+	 */
+	_areViewportTransformsEqual(vpt1, vpt2) {
+		if (!vpt1 || !vpt2) return false;
+		if (vpt1.length !== vpt2.length) return false;
+
+		const tolerance = 0.001;
+		for (let i = 0; i < vpt1.length; i++) {
+			if (Math.abs(vpt1[i] - vpt2[i]) > tolerance) {
+				return false;
+			}
+		}
+		return true;
+	}
+
+	/**
+	 * 监听主画布变化
+	 * @private
+	 */
+	_observeCanvasChanges() {
+		if (!this.canvas) return;
+
+		// 监听缩放变化
+		this._zoomHandler = () => {
+			this._syncCanvasProperties();
+		};
+
+		// 监听视口变化
+		this._viewportHandler = () => {
+			this._syncCanvasProperties();
+		};
+
+		// 监听画布尺寸变化
+		this._resizeHandler = () => {
+			this._syncCanvasProperties();
+		};
+
+		// 绑定事件
+		this.canvas.on("after:render", this._zoomHandler);
+		this.canvas.on("canvas:zoomed", this._zoomHandler);
+		this.canvas.on("viewport:changed", this._viewportHandler);
+		this.canvas.on("canvas:resized", this._resizeHandler);
+
+		// 使用 ResizeObserver 监听 DOM 尺寸变化
+		if (window.ResizeObserver && this.canvas.upperCanvasEl) {
+			this.resizeObserver = new ResizeObserver(() => {
+				this._syncCanvasProperties();
+			});
+			this.resizeObserver.observe(this.canvas.upperCanvasEl);
+		}
+	}
+
+	/**
+	 * 启用笔刷指示器
+	 * @param {Number} brushSize 笔刷大小
+	 */
+	enable(brushSize) {
+		if (this.isEnabled) return;
+
+		this.isEnabled = true;
+		this.currentSize = brushSize;
+
+		// 绑定事件
+		this._bindEvents();
+	}
+
+	/**
+	 * 禁用笔刷指示器
+	 */
+	disable() {
+		if (!this.isEnabled) return;
+
+		this.isEnabled = false;
+
+		// 隐藏指示器
+		this.hide();
+
+		// 重置颜色配置为默认值
+		this.options.strokeColor = "";
+		this.options.fillColor = "";
+
+		// 解绑事件
+		this._unbindEvents();
+	}
+
+	/**
+	 * 更新笔刷大小
+	 * @param {Number} size 新的笔刷大小
+	 */
+	updateSize(size) {
+		this.currentSize = size;
+
+		// 如果指示器正在显示，更新其大小
+		if (this.isVisible && this.indicatorCircle) {
+			this.indicatorCircle.set({
+				radius: size / 2,
+			});
+			this.staticCanvas.renderAll();
+		}
+	}
+
+	/**
+	 * 更新指示器颜色
+	 * @param {String} color 新的颜色值
+	 */
+	updateColor(color) {
+		// 更新配置选项中的颜色
+		if (color) {
+			this.options.strokeColor = color;
+		}
+
+		// 如果指示器正在显示，更新其颜色
+		if (this.isVisible && this.indicatorCircle) {
+			this.indicatorCircle.set({
+				stroke: this.options.strokeColor,
+				fill: this.options.fillColor,
+			});
+			this.staticCanvas.renderAll();
+		}
+	}
+
+	/**
+	 * 显示指示器
+	 * @param {Object} pointer 鼠标位置
+	 */
+	show(pointer) {
+		if (!this.isEnabled || this.isVisible) return;
+
+		this.isVisible = true;
+
+		// 创建指示器圆圈
+		this._createIndicatorCircle();
+
+		// 更新位置
+		this.updatePosition(pointer);
+	}
+
+	/**
+	 * 隐藏指示器
+	 */
+	hide() {
+		if (!this.isVisible) return;
+
+		this.isVisible = false;
+
+		// 移除指示器圆圈
+		if (this.indicatorCircle && this.staticCanvas) {
+			this.staticCanvas.remove(this.indicatorCircle);
+			this.indicatorCircle = null;
+			this.staticCanvas.renderAll();
+		}
+	}
+
+	/**
+	 * 更新指示器位置
+	 * @param {Object} pointer 鼠标位置
+	 */
+	updatePosition(pointer) {
+		if (!this.isVisible || !this.indicatorCircle) return;
+
+		let canvasPointer;
+		// 如果是原生事件（如 e.e），优先用 clientX/clientY 转换
+		if (
+			pointer &&
+			pointer.clientX !== undefined &&
+			pointer.clientY !== undefined
+		) {
+			// 获取主画布的包裹元素位置
+			const rect = this.canvas.upperCanvasEl.getBoundingClientRect();
+			const x = pointer.clientX - rect.left;
+			const y = pointer.clientY - rect.top;
+			// 逆变换到画布坐标
+			canvasPointer = fabric.util.transformPoint(
+				new fabric.Point(x, y),
+				fabric.util.invertTransform(this.canvas.viewportTransform)
+			);
+		} else {
+			// 兼容 fabric 的 getPointer
+			canvasPointer = this.canvas.getPointer(pointer);
+		}
+
+		// 更新当前位置
+		this.currentPosition = {
+			x: canvasPointer.x,
+			y: canvasPointer.y,
+		};
+
+		// 更新指示器位置
+		this.indicatorCircle.set({
+			left: canvasPointer.x,
+			top: canvasPointer.y,
+		});
+
+		// 优化渲染
+		this.staticCanvas.requestRenderAll();
+	}
+
+	/**
+	 * 创建指示器圆圈对象
+	 * @private
+	 */
+	_createIndicatorCircle() {
+		if (this.indicatorCircle || !this.staticCanvas) return;
+
+		// 创建圆圈对象
+		this.indicatorCircle = new fabric.Circle({
+			radius: this.currentSize / 2,
+			fill: this.options.fillColor,
+			stroke: this.options.strokeColor,
+			strokeWidth: this.options.strokeWidth,
+			originX: "center",
+			originY: "center",
+			selectable: false,
+			evented: false,
+			excludeFromExport: true,
+			isTemp: true,
+			pointer: true,
+		});
+
+		// 添加到静态画布
+		this.staticCanvas.add(this.indicatorCircle);
+	}
+
+	/**
+	 * 绑定事件处理器
+	 * @private
+	 */
+	_bindEvents() {
+		if (!this.canvas) return;
+
+		// 鼠标进入画布
+		this._mouseEnterHandler = (e) => {
+			if (this._shouldShowIndicator()) {
+				this.show(e.e);
+				const currentVpt = this.canvas.viewportTransform;
+				this.staticCanvas.setViewportTransform([...currentVpt]);
+				this.staticCanvas.renderAll();
+			}
+		};
+
+		// 鼠标离开画布
+		this._mouseLeaveHandler = () => {
+			this.hide();
+		};
+
+		// 鼠标移动
+		this._mouseMoveHandler = (e) => {
+			if (this._shouldShowIndicator()) {
+				if (!this.isVisible) {
+					//   this.show(e.e);
+					this._mouseEnterHandler && this._mouseEnterHandler(e)
+				} else {
+					// requestIdleCallback(() => {
+					//   this.updatePosition(e.e);
+					// });
+
+					requestAnimationFrame(() => {
+						this.updatePosition(e.e);
+					});
+				}
+			} else {
+				this.hide();
+			}
+		};
+
+		// 绑定事件
+		this.canvas.on("mouse:over", this._mouseEnterHandler);
+		this.canvas.on("mouse:out", this._mouseLeaveHandler);
+		this.canvas.on("mouse:move", this._mouseMoveHandler);
+	}
+
+	/**
+	 * 解绑事件处理器
+	 * @private
+	 */
+	_unbindEvents() {
+		if (!this.canvas) return;
+		// 解绑鼠标事件
+		if (this._mouseEnterHandler) {
+			this.canvas.off("mouse:over", this._mouseEnterHandler);
+			this._mouseEnterHandler = null;
+		}
+
+		if (this._mouseLeaveHandler) {
+			this.canvas.off("mouse:out", this._mouseLeaveHandler);
+			this._mouseLeaveHandler = null;
+		}
+
+		if (this._mouseMoveHandler) {
+			this.canvas.off("mouse:move", this._mouseMoveHandler);
+			this._mouseMoveHandler = null;
+		}
+
+		// 解绑画布变化事件
+		if (this._zoomHandler) {
+			this.canvas.off("after:render", this._zoomHandler);
+			this.canvas.off("canvas:zoomed", this._zoomHandler);
+			this._zoomHandler = null;
+		}
+
+		if (this._viewportHandler) {
+			this.canvas.off("viewport:changed", this._viewportHandler);
+			this._viewportHandler = null;
+		}
+
+		if (this._resizeHandler) {
+			this.canvas.off("canvas:resized", this._resizeHandler);
+			this._resizeHandler = null;
+		}
+	}
+
+	/**
+	 * 判断是否应该显示指示器
+	 * @private
+	 * @returns {Boolean} 是否显示
+	 */
+	_shouldShowIndicator() {
+		const isDrawingMode = this.canvas.isDrawingMode;// 检查画布是否在绘图模式
+		const isLiquifyMode = this.canvas.toolId === OperationType.LIQUIFY;// 检查是否在液化模式
+		// console.log(`笔刷指示器\n绘图模式:${isDrawingMode}\n液化模式:${isLiquifyMode}`)
+		// 检查画布是否在绘图模式OR液化模式
+		if ([isDrawingMode, isLiquifyMode].every(v => !v)) return false;
+
+		// 检查是否有笔刷
+		if (!this.canvas.freeDrawingBrush) return false;
+
+		return true;
+	}
+
+	/**
+	 * 销毁指示器
+	 */
+	dispose() {
+		this.disable();
+
+		// 解绑画布变化事件
+		this._unbindEvents();
+
+		// 停止监听尺寸变化
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+			this.resizeObserver = null;
+		}
+
+		// 销毁静态画布
+		if (this.staticCanvas) {
+			this.staticCanvas.dispose();
+			this.staticCanvas = null;
+		}
+
+		// 移除指示器画布
+		if (this.indicatorCanvas && this.indicatorCanvas.parentNode) {
+			this.indicatorCanvas.parentNode.removeChild(this.indicatorCanvas);
+		}
+
+		this.canvas = null;
+		this.indicatorCanvas = null;
+		this.indicatorCircle = null;
+		this.options = null;
+	}
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
index 9664daf..bb9c713 100644
--- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
@@ -58,55 +58,20 @@ export class CanvasManager {
 		const canvasX = this.canvasViewWidth / 2 - this.canvasWidth / 2
 		const canvasY = this.canvasViewHeight / 2 - this.canvasHeight / 2
 		this.canvas.viewportTransform = [1, 0, 0, 1, canvasX, canvasY]
+
 		// 创建矩形
-		const rect = new fabric.Rect({
-			left: 20,
-			top: 20,
-			width: 100,
-			height: 100,
-			fill: '#f00',
-			info: {
-				id: 'rect1',
-				name: 'rect1',
-			}
+		const rect = this.layerManager.createRectLayer({
+			left: 400,
+			top: 100,
 		})
-		this.canvas.add(rect)
 		//创建圆形
-		const circle = new fabric.Circle({
+		const circle = this.layerManager.createCircleLayer({
 			left: 200,
 			top: 200,
-			radius: 50,
-			fill: '#0f0',
-			info: {
-				id: 'circle',
-				name: 'circle',
-			}
 		})
-		this.canvas.add(circle)
 		// 文字
-		const text = new fabric.Text('Hello World', {
-			left: 300,
-			top: 300,
-			fontSize: 24,
-			fill: '#000',
-			info: {
-				id: 'text1',
-				name: 'text',
-			}
-		})
-		this.canvas.add(text)
-		// 文字
-		const text2 = new fabric.Text('Hello World', {
-			left: 300,
-			top: 300,
-			fontSize: 24,
-			fill: '#000',
-			info: {
-				id: 'text2',
-				name: 'tex2t',
-			}
-		})
-		this.canvas.add(text2)
+		const text = this.layerManager.createTextLayer('Hello World');
+
 		this.animationManager = new AnimationManager(this.canvas, {
 			currentZoom: this.currentZoom,
 			canvasManager: this,
@@ -117,18 +82,38 @@ export class CanvasManager {
 		this.setupCanvasEvents()
 		this.stateManager.toolManager.setTool(OperationType.SELECT)
 		this.layerManager.updateLayers()
-		this.layerManager.setActiveID(text2.info.id)
+		this.layerManager.setActiveID(text.info.id)
+
+
+		this.setupBrushEvents()
 	}
+	/** 画布添加对象 */
+	add(obj: any, isUpdate = true) {
+		this.canvas.add(obj)
+		if (isUpdate) {
+			this.layerManager.updateLayers()
+			this.renderAll()
+		}
+	}
+
+	/** 设置画布事件 */
 	setupCanvasEvents() {
 		// 创建画布事件管理器
 		this.eventManager = new CanvasEventManager(this.canvas, {
 			canvasManager: this,
 			animationManager: this.animationManager,
 			toolManager: this.stateManager.toolManager,
+			layerManager: this.stateManager.layerManager,
 		});
 		// 设置动画交互效果
 		this.animationManager.setupInteractionAnimations();
 	}
+	/** 设置激活对象 */
+	setActiveObjectByID(id: string) {
+		const obj = this.getObjectById(id)
+		if (obj) this.canvas.setActiveObject(obj)
+		this.renderAll()
+	}
 	resetZoom() {
 		this.animationManager.resetZoom()
 	}
@@ -163,5 +148,51 @@ export class CanvasManager {
 		})
 	}
 
+	/** 画笔事件 */
+	setupBrushEvents() {
+		this.canvas.onBrushImageConverted = async (fabricImage) => {
+			const currentTool = this.stateManager.toolManager.currentTool.value;
+			if (currentTool === OperationType.DRAW) {
+				this.handleDrawImage(fabricImage)
+			}
+			return true
+		};
+	}
+	/** 处理绘制图像 */
+	handleDrawImage(fabricImage: fabric.Object) {
+		const activeID = this.stateManager.layerManager.activeID.value
+		const activeLayer = this.getObjectById(activeID)
+		if (activeLayer) {
+			this.layerManager.imageMergeToLayer(activeLayer, fabricImage)
+		} else {
+			const emptyLayer = this.layerManager.createEmptyLayer();
+			this.layerManager.setActiveID(emptyLayer.info.id, false)
+			this.layerManager.imageMergeToLayer(emptyLayer, fabricImage)
+		}
+		return true
+	}
 
+	/** 导出画布为JSON */
+	getCanvasJSON() {
+		const keys = ["top", "left", "width", "height", "scaleX", "scaleY", "info",]
+		const json = this.canvas.toJSON(keys)
+		console.log(json, this.getObjects())
+		return JSON.stringify(json)
+	}
+	/** 加载画布JSON */
+	loadJSON(json: string, callback?: (success: boolean) => void) {
+		let jsonObj = null;
+		try {
+			jsonObj = JSON.parse(json)
+		} catch (error) {
+			console.error('JSON解析错误:', error)
+		}
+		if (!jsonObj) return callback?.(false);
+		this.canvas.loadFromJSON(jsonObj, () => {
+			this.layerManager.updateLayers()
+			this.renderAll()
+			callback?.(true)
+		})
+
+	}
 }
diff --git a/src/components/Canvas/DepthCanvas/manager/EraserStateManager.js b/src/components/Canvas/DepthCanvas/manager/EraserStateManager.js
new file mode 100644
index 0000000..49e0476
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/EraserStateManager.js
@@ -0,0 +1,99 @@
+// import { EraserCommand } from "../commands/EraserCommand";
+class EraserCommand { }
+
+/**
+ * 橡皮擦状态管理器
+ * 用于管理橡皮擦操作的状态快照
+ */
+export class EraserStateManager {
+	constructor(canvas, layerManager) {
+		this.canvas = canvas;
+		this.layerManager = layerManager;
+		this.currentSnapshot = null;
+		this.pendingCommand = null;
+	}
+
+	setLayerManager(layerManager) {
+		this.layerManager = layerManager;
+	}
+
+	/**
+	 * 开始橡皮擦操作 - 捕获初始状态
+	 */
+	startErasing() {
+		console.log("橡皮擦操作开始 - 捕获状态快照");
+		this.currentSnapshot = this._captureCanvasSnapshot();
+	}
+
+	/**
+	 * 结束橡皮擦操作 - 创建命令
+	 * @param {Array} affectedObjects 受影响的对象
+	 * @returns {EraserCommand|null} 创建的橡皮擦命令
+	 */
+	endErasing(affectedObjects = []) {
+		if (!this.currentSnapshot) {
+			console.warn("没有初始状态快照，无法创建橡皮擦命令");
+			return null;
+		}
+
+		if (!affectedObjects || affectedObjects.length === 0) {
+			console.log("没有对象被擦除，不创建命令");
+			this.currentSnapshot = null;
+			return null;
+		}
+
+		console.log(`橡皮擦操作结束 - 影响了 ${affectedObjects.length} 个对象`);
+
+		// 捕获擦除后的状态
+		const afterSnapshot = this._captureCanvasSnapshot();
+
+		// 创建橡皮擦命令
+		const command = new EraserCommand({
+			canvas: this.canvas,
+			layerManager: this.layerManager,
+			affectedObjects: affectedObjects,
+			beforeSnapshot: this.currentSnapshot,
+			afterSnapshot: afterSnapshot,
+		});
+
+		// 重置状态
+		this.currentSnapshot = null;
+
+		return command;
+	}
+
+	/**
+	 * 捕获画布状态快照
+	 * @returns {Object} 画布状态快照
+	 * @private
+	 */
+	_captureCanvasSnapshot() {
+		try {
+			return this.canvas.toJSON([
+				"id",
+				"type",
+				"layerId",
+				"layerName",
+				"isBackground",
+				"isLocked",
+				"isVisible",
+				"isFixed",
+				"parentId",
+				"eraser",
+				"eraserable",
+				"erasable",
+			]);
+		} catch (error) {
+			console.error("捕获画布状态快照失败:", error);
+			return null;
+		}
+	}
+
+	/**
+	 * 取消当前擦除操作
+	 */
+	cancelErasing() {
+		this.currentSnapshot = null;
+		this.pendingCommand = null;
+	}
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/EventManager.ts b/src/components/Canvas/DepthCanvas/manager/EventManager.ts
deleted file mode 100644
index 03ac0ee..0000000
--- a/src/components/Canvas/DepthCanvas/manager/EventManager.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { OperationType } from "../tools/layerHelper"
-export class EventManager {
-	stateManager: any
-	vueFlow: any
-	zoom: any
-	constructor(options) {
-		this.stateManager = options.stateManager;
-		this.vueFlow = options.vueFlow
-		this.zoom = this.stateManager.zoom
-		this.registerEvents()
-	}
-	/** 处理视口变化 */
-	handleViewportChange(e: any) {
-		const { zoom } = e
-		this.zoom.value = zoom
-	}
-	/** 处理节点拖动停止 */
-	handleNodeDragStop(e: any) {
-		const { node } = e
-		const { id, position } = node
-		this.stateManager.nodes.value.forEach((item) => {
-			if (item.id === id) {
-				item.position.x = position.x
-				item.position.y = position.y
-			}
-		})
-		this.stateManager.recordState()
-	}
-	/** 处理点击 */
-	handleClick(event: any) {
-		this.stateManager.setActiveNodeID("")
-		const tool = this.stateManager.tool.value
-		if (tool === OperationType.TEXT) {
-			const { x, y, zoom } = this.vueFlow.value.viewport
-			const position = {
-				x: (event.offsetX - x) / zoom,
-				y: (event.offsetY - y) / zoom
-			}
-			this.stateManager.nodeManager.createTextNode({ position })
-			this.stateManager.toolManager.setTool(OperationType.SELECT)
-		}
-	}
-
-	/** 处理复制 */
-	handleCopy(event: any, activeNodeID: string) {
-		event.preventDefault()
-		if (!activeNodeID) return console.warn('没有选中节点')
-		this.stateManager.nodeManager.copyNodeById(activeNodeID)
-	}
-	/** 处理删除 */
-	handleDelete(event: any, activeNodeID: string) {
-		event.preventDefault()
-		if (!activeNodeID) return console.warn('没有选中节点')
-		this.stateManager.deleteNode(activeNodeID, { isElMessageBox: true })
-	}
-	/** 处理键盘事件 */
-	handleKeyDown(event: any) {
-		const activeNodeID = this.stateManager.activeNodeID.value;
-		// const shiftKey
-		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, activeNodeID) },
-			{ key: "delete", handler: () => this.handleDelete(event, activeNodeID) },
-			{ key: "ctrl-z", handler: () => this.stateManager.undoState() },
-			{ key: "ctrl-shift-z", handler: () => this.stateManager.redoState() },
-		]
-		list.forEach((v: any) => {
-			if (reg.test(v.key)) v.handler(event)
-		})
-	}
-	/** 注册事件 */
-	registerEvents() {
-		// document.addEventListener('copy', this.handleCopy.bind(this))
-		document.addEventListener('keydown', this.handleKeyDown.bind(this))
-	}
-	/** 删除事件 */
-	removeEvents() {
-		// document.removeEventListener('copy', this.handleCopy.bind(this))
-		document.removeEventListener('keydown', this.handleKeyDown.bind(this))
-	}
-}
diff --git a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
index e029abb..53957db 100644
--- a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
@@ -1,4 +1,7 @@
 import { ref } from 'vue'
+import { fabric } from 'fabric-with-all'
+import { createId } from '../../tools/tools'
+import { exportObjectsToImage } from '../tools/exportMethod'
 
 export class LayerManager {
 	stateManager: any
@@ -11,7 +14,12 @@ export class LayerManager {
 		this.layers = ref([])
 		this.activeID = ref("")
 	}
-	setActiveID(id: string) { this.activeID.value = id }
+	setActiveID(id: string, isActive = true) {
+		this.activeID.value = id
+		if (isActive) {
+			this.canvasManager.setActiveObjectByID(id)
+		}
+	}
 	getLayerByID(id) {
 		return this.layers.value.find((item: any) => item.info.id === id)
 	}
@@ -31,8 +39,11 @@ export class LayerManager {
 			this.canvasManager.renderAll()
 		}
 	}
-	deleteLayerByID(id) {
+	deleteLayerByID(id, isActive = true) {
 		this.canvasManager.deleteObjectById(id)
+		if (id === this.activeID.value && isActive) {
+			this.setActiveID(this.layers.value[0]?.info?.id || "")
+		}
 	}
 	// 拖拽排序
 	dragSort(id, newIndex) {
@@ -41,6 +52,156 @@ export class LayerManager {
 	}
 	// 更新图层列表
 	updateLayers() {
-		this.layers.value = this.canvasManager.getObjects().reverse()
+		this.layers.value = this.canvasManager.getObjects().filter((v: any) => !!v?.info?.id).reverse()
 	}
-}
+
+	/** 设置图层位置-不设置默认居中 */
+	setLayerPosition(layer, options?: any) {
+		const width = this.canvasManager.canvasWidth
+		const height = this.canvasManager.canvasHeight
+
+		if (options && options.top !== undefined) {
+			layer.set({ top: options.top })
+		} else {
+			layer.set({ top: height / 2 - layer.height * layer.scaleY / 2 })
+		}
+		if (options && options.left !== undefined) {
+			layer.set({ left: options.left })
+		} else {
+			layer.set({ left: width / 2 - layer.width * layer.scaleX / 2 })
+		}
+	}
+	/** 创建空图层 */
+	createEmptyLayer() {
+		const emptyLayer = new fabric.Rect({
+			width: 0,
+			height: 0,
+			fill: 'transparent',
+			info: {
+				id: createId("image"),
+				name: '空图层',
+			}
+		})
+		this.setLayerPosition(emptyLayer)
+		this.canvasManager.add(emptyLayer)
+		return emptyLayer
+	}
+	/** 创建文本图层 */
+	createTextLayer(text: string, options?: any) {
+		const textLayer = new fabric.IText(text, {
+			fontSize: 24,
+			fill: '#000',
+			...(options || {}),
+			info: {
+				id: createId("text"),
+				name: '文本图层',
+				...(options?.info || {}),
+			}
+		})
+		this.setLayerPosition(textLayer, options)
+		this.canvasManager.add(textLayer)
+		return textLayer
+	}
+	/** 创建矩形图层 */
+	createRectLayer(options?: any) {
+		const rectLayer = new fabric.Rect({
+			width: 100,
+			height: 100,
+			fill: '#000',
+			...(options || {}),
+			info: {
+				id: createId("rect"),
+				name: '矩形图层',
+				...(options?.info || {}),
+			}
+		})
+		this.setLayerPosition(rectLayer, options)
+		this.canvasManager.add(rectLayer)
+		return rectLayer
+	}
+	/** 创建圆形图层 */
+	createCircleLayer(options?: any) {
+		const circleLayer = new fabric.Circle({
+			radius: 50,
+			fill: '#000',
+			...(options || {}),
+			info: {
+				id: createId("circle"),
+				name: '圆形图层',
+				...(options?.info || {}),
+			}
+		})
+		this.setLayerPosition(circleLayer, options)
+		this.canvasManager.add(circleLayer)
+		return circleLayer
+	}
+	/** 创建图片图层 */
+	async createImageLayer(imgOrUrl: string | HTMLImageElement, options?: any) {
+		const canvasWidth = this.canvasManager.canvasWidth
+		const canvasHeight = this.canvasManager.canvasHeight
+
+		const imageLayer = await new Promise((resolve) => {
+			const url = typeof imgOrUrl === 'string' ? imgOrUrl : imgOrUrl.src
+			fabric.Image.fromURL(url, (img) => {
+				const width = img.width
+				const height = img.height
+				const scaleX = width > canvasWidth ? canvasWidth * 0.8 / width : 1
+				const scaleY = height > canvasHeight ? canvasHeight * 0.8 / height : 1
+				const scale = Math.min(scaleX, scaleY)
+				img.set({
+					scaleX: scale,
+					scaleY: scale,
+					...(options || {}),
+					info: {
+						id: createId("image"),
+						name: "图片图层",
+						...(options?.info || {}),
+					}
+				})
+				resolve(img)
+			})
+		}) as fabric.Object
+		this.setLayerPosition(imageLayer, options)
+		this.canvasManager.add(imageLayer)
+		this.setActiveID(imageLayer.info.id)
+		return imageLayer
+	}
+
+
+
+	/** 合并图层 */
+	async imageMergeToLayer(targetLayer: fabric.Object, fabricImage: fabric.Object) {
+		const info = await exportObjectsToImage([targetLayer, fabricImage], true)
+		const mergedImage = await new Promise((resolve) => {
+			fabric.Image.fromURL(info.url, (img) => {
+				img.set({
+					left: info.left,
+					top: info.top,
+					info: {
+						id: createId("image"),
+						name: targetLayer?.info?.name || "合并图层",
+					}
+				})
+				resolve(img)
+			})
+		})
+		// console.log(mergedImage)
+		const index = this.canvasManager.getObjects().indexOf(targetLayer);
+		this.deleteLayerByID(targetLayer.info.id, false)
+		this.setActiveID(mergedImage.info.id, false)
+		this.canvasManager.add(mergedImage, false);
+		this.canvasManager.canvas.moveTo(mergedImage, index);
+		this.canvasManager.renderAll()
+		this.updateLayers()
+		return true;
+	}
+	/** 设置激活对象可擦除 */
+	setActiveObjectErasable() {
+		const objects = this.canvasManager.getObjects()
+		objects.forEach((item: any) => {
+			item.set({
+				erasable: item.info.id === this.activeID.value
+			})
+		})
+	}
+}
\ No newline at end of file
diff --git a/src/components/Canvas/DepthCanvas/manager/StateManager.ts b/src/components/Canvas/DepthCanvas/manager/StateManager.ts
index b970261..cb05bde 100644
--- a/src/components/Canvas/DepthCanvas/manager/StateManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/StateManager.ts
@@ -1,5 +1,4 @@
 import { ref, computed } from "vue";
-import { NODE_TYPE } from '../tools/index.d'
 import { ElMessageBox } from 'element-plus'
 import i18n from '@/lang'
 const t = i18n.global.t
@@ -16,24 +15,22 @@ export class StateManager {
 	layerManager: any
 	eventManager: any
 	toolManager: any
+	brushManager: any
 	// 设置管理器
 	setManager(options) {
 		options.eventManager && (this.eventManager = options.eventManager)
 		options.canvasManager && (this.canvasManager = options.canvasManager)
 		options.layerManager && (this.layerManager = options.layerManager)
 		options.toolManager && (this.toolManager = options.toolManager)
+		options.brushManager && (this.brushManager = options.brushManager)
 	}
 	constructor(options) {
 		this.mxHistory = ref(50)
 		this.historyList = ref([])
 		this.historyIndex = ref(0)
 
-		this.activeNodeID = ref("")
 
 	}
-	/** 设置激活节点 */
-	setActiveNodeID(id: string) { this.activeNodeID.value = id }
-
 
 
 
diff --git a/src/components/Canvas/DepthCanvas/manager/ToolManager.ts b/src/components/Canvas/DepthCanvas/manager/ToolManager.ts
index 4ef5177..51d1f23 100644
--- a/src/components/Canvas/DepthCanvas/manager/ToolManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/ToolManager.ts
@@ -1,14 +1,21 @@
 import { ref } from 'vue'
 import { OperationType } from '../tools/layerHelper'
+import { BrushManager } from "./brushes/brushManager";
+import { BrushIndicator } from "./BrushIndicator";
+import i18n from "@/lang";
+const t = i18n.global.t
 export class ToolManager {
 	stateManager: any
 	canvasManager: any
 	currentTool: any
+	brushManager: any
 	tools: any[]
+	brushIndicator: any
 	constructor(options) {
 		this.stateManager = options.stateManager;
 		this.canvasManager = options.canvasManager;
 		this.currentTool = ref(null)
+
 		this.tools = [
 			/** 选择工具 */
 			{
@@ -27,11 +34,15 @@ export class ToolManager {
 			{
 				name: OperationType.DRAW,
 				cursor: "crosshair",
+				setup: this.setupBrushTool.bind(this),
+				isDrawingMode: true,
 			},
 			/** 橡皮擦工具 */
 			{
 				name: OperationType.ERASER,
 				cursor: "crosshair",
+				setup: this.setupEraserTool.bind(this),
+				isDrawingMode: true,
 			},
 			/** 智能选框工具 */
 			{
@@ -45,15 +56,37 @@ export class ToolManager {
 			},
 		]
 	}
+	onMounted() {
+		this.brushIndicator = new BrushIndicator(this.canvasManager.canvas, {
+			strokeColor: "rgba(0, 0, 0, 0.6)",
+			strokeWidth: 1,
+			fillColor: "rgba(0, 0, 0, 0.1)",
+		});
+		this.brushManager = new BrushManager({
+			canvas: this.canvasManager.canvas,
+			layerManager: this.canvasManager.layerManager, // 传入图层管理器引用
+			brushIndicator: this.brushIndicator,
+			t,
+		});
+		this.stateManager.setManager({
+			brushManager: this.brushManager,
+		})
+	}
 	setTool(value: string) {
 		const tool = this.tools.find((t) => t.name === value)
 		if (!tool) return console.warn(`工具${tool}不存在`)
 		this.currentTool.value = tool.name
 		this.canvasManager.canvas.defaultCursor = tool.cursor
 		this.setCanvasEvented(!!tool.selection)
-		this.canvasManager.canvas.isDragging = !!tool.isDragging
+		this.canvasManager.canvas.isDrawingMode = !!tool.isDrawingMode;// 绘制模式
+		if (!tool.isDrawingMode) this._disableBrushIndicator()// 非绘制模式，禁用笔刷指示器
+
 
 		if (tool.setup) tool.setup()
+
+		setTimeout(() => {
+			this.canvasManager.renderAll()
+		});
 	}
 	// 切换工具时，设置画布事件
 	setCanvasEvented(value: boolean) {
@@ -66,4 +99,76 @@ export class ToolManager {
 	/** 移动工具 */
 	setupMoveTool() {
 	}
+	/** 画笔工具 */
+	setupBrushTool() {
+		if (!this.canvasManager.canvas) return;
+
+		// 确保有笔刷管理器
+		if (this.brushManager) {
+			// 检查画笔是否正在更新中
+			if (this.brushManager.isUpdatingBrush) {
+				console.warn("画笔正在更新中，请稍候...");
+				return;
+			}
+			const brushStore = this.brushManager?.brushStore
+			if (brushStore) {
+				// 同步基本属性
+				this.brushManager.setBrushSize(brushStore.state.size);
+				this.brushManager.setBrushColor(brushStore.state.color);
+				this.brushManager.setBrushOpacity(brushStore.state.opacity);
+
+				// 同步笔刷类型 - 修复方法名，使用正确的setBrushType方法
+				this.brushManager.setBrushType("pencil");
+			}
+
+			// 更新应用到画布
+			this.brushManager.updateBrush();
+		}
+
+		// 启用笔刷指示器并同步颜色
+		this._enableBrushIndicator();
+	}
+	/**
+   * 设置橡皮擦工具
+   */
+	setupEraserTool() {
+		if (!this.canvasManager.canvas) return;
+
+		// 确保有笔刷管理器
+		if (this.brushManager) {
+			this.brushManager.createEraser();
+		}
+
+		this.stateManager.layerManager.setActiveObjectErasable()
+		// 启用笔刷指示器
+		this._enableBrushIndicator();
+	}
+
+	/**
+	 * 启用笔刷指示器
+	 * @param {String} color 笔刷颜色（可选）
+	 * @private
+	 */
+	_enableBrushIndicator(color?: string) {
+		if (!this.brushIndicator) return;
+
+		// 获取当前笔刷大小
+		const brushSize = this.brushManager?.getBrushSize() || 5;
+		// 获取当前笔刷颜色
+		const brushColor = color || this.brushManager?.getBrushColor() || "#000000";
+
+		// 启用指示器
+		this.brushIndicator.enable(brushSize);
+		this.brushIndicator.updateSize(brushSize);
+		// 更新指示器颜色
+		this.brushIndicator.updateColor(brushColor);
+	}
+
+	/** 禁用笔刷指示器 */
+	_disableBrushIndicator() {
+		if (!this.brushIndicator) return;
+
+		this.brushIndicator.disable();
+	}
+
 }
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/BaseBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/BaseBrush.js
new file mode 100644
index 0000000..fead64a
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/BaseBrush.js
@@ -0,0 +1,359 @@
+/**
+ * 笔刷基类
+ * 所有笔刷类型应继承此基类并实现必要的方法
+ */
+export class BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 笔刷配置选项
+   * @param {Object} t 翻译函数
+   */
+  constructor(canvas, options = {}) {
+    this.canvas = canvas;
+    this.options = options;
+	this.t = options.t;
+    // 基本属性
+    this.id = options.id || this.constructor.name;
+    this.name = options.name || "未命名笔刷";
+    this.description = options.description || "";
+    this.icon = options.icon || null;
+    this.category = options.category || "默认";
+
+    // 笔刷实例
+    this.brush = null;
+  }
+
+  /**
+   * 创建笔刷实例（必须由子类实现）
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    throw new Error("必须由子类实现create方法");
+  }
+
+  /**
+   * 配置笔刷（必须由子类实现）
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+    }
+
+    if (options.color !== undefined && options.opacity !== undefined) {
+      // 使用RGBA颜色而不是设置globalAlpha
+      brush.color = this._createRGBAColor(options.color, options.opacity);
+      brush.opacity = 1; // 保持fabric层面的opacity为1
+    } else if (options.color !== undefined) {
+      brush.color = options.color;
+    } else if (options.opacity !== undefined) {
+      // 如果只设置了透明度，基于当前颜色创建RGBA
+      const currentColor = brush.color || this.options.color || "#000000";
+      brush.color = this._createRGBAColor(currentColor, options.opacity);
+      brush.opacity = 1;
+    }
+
+    // 配置阴影
+    this.configureShadow(brush, options);
+
+    // 确保不使用globalAlpha，避免圆圈绘制问题
+    if (brush.canvas && brush.canvas.contextTop) {
+      brush.canvas.contextTop.globalAlpha = 1;
+      brush.canvas.contextTop.lineCap = "round";
+      brush.canvas.contextTop.lineJoin = "round";
+      brush.canvas.contextTop.globalCompositeOperation = "source-over";
+    }
+  }
+
+  /**
+   * 配置笔刷阴影
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configureShadow(brush, options = {}) {
+    if (!brush) return;
+
+    // 简化的阴影配置获取方法
+    let shadowConfig = null;
+
+    // 尝试从全局获取BrushStore（在Vue组件中已经导入）
+    if (typeof window !== "undefined" && window.BrushStore) {
+      shadowConfig = window.BrushStore.getShadowConfig();
+    } else {
+      // 如果没有全局BrushStore，尝试从选项中获取
+      if (options.shadowEnabled) {
+        shadowConfig = {
+          color: options.shadowColor || "#000000",
+          blur: options.shadowWidth || 0,
+          offsetX: options.shadowOffsetX || 0,
+          offsetY: options.shadowOffsetY || 0,
+        };
+      }
+    }
+
+    if (shadowConfig) {
+      // 创建fabric.Shadow实例
+      if (typeof fabric !== "undefined" && fabric.Shadow) {
+        brush.shadow = new fabric.Shadow(shadowConfig);
+      }
+    } else {
+      // 清除阴影
+      brush.shadow = null;
+    }
+  }
+
+  /**
+   * 更新笔刷阴影设置
+   */
+  updateShadow() {
+    if (this.brush) {
+      this.configureShadow(this.brush);
+    }
+  }
+
+  /**
+   * 创建RGBA颜色字符串
+   * @private
+   * @param {String} color 十六进制颜色或已有颜色
+   * @param {Number} opacity 透明度 (0-1)
+   * @returns {String} RGBA颜色字符串
+   */
+  _createRGBAColor(color, opacity) {
+    // 如果已经是rgba颜色，先提取RGB部分
+    if (color.startsWith("rgba")) {
+      const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
+      if (rgbaMatch) {
+        const [, r, g, b] = rgbaMatch;
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+      }
+    }
+
+    // 如果是rgb颜色，提取RGB部分
+    if (color.startsWith("rgb")) {
+      const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+      if (rgbMatch) {
+        const [, r, g, b] = rgbMatch;
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+      }
+    }
+
+    // 处理十六进制颜色
+    if (color.startsWith("#")) {
+      const hex = color.replace("#", "");
+      let r, g, b;
+
+      if (hex.length === 3) {
+        r = parseInt(hex[0] + hex[0], 16);
+        g = parseInt(hex[1] + hex[1], 16);
+        b = parseInt(hex[2] + hex[2], 16);
+      } else if (hex.length === 6) {
+        r = parseInt(hex.substring(0, 2), 16);
+        g = parseInt(hex.substring(2, 4), 16);
+        b = parseInt(hex.substring(4, 6), 16);
+      } else {
+        // 无效的十六进制颜色，使用默认
+        r = g = b = 0;
+      }
+
+      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+
+    // 如果是其他格式的颜色，尝试转换（例如颜色名称）
+    // 这里简化处理，实际项目中可以使用更复杂的颜色解析
+    return color; // fallback到原颜色
+  }
+
+  /**
+   * 获取笔刷的元数据
+   * @returns {Object} 笔刷元数据
+   */
+  getMetadata() {
+    return {
+      id: this.id,
+      name: this.name,
+      description: this.description,
+      icon: this.icon,
+      category: this.category,
+    };
+  }
+
+  /**
+   * 获取笔刷预览
+   * @returns {String|null} 预览图URL或null
+   */
+  getPreview() {
+    return null;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * 这个方法返回一个对象数组，每个对象描述一个可配置属性
+   * 每个属性对象包含：
+   *  - id: 属性标识符
+   *  - name: 属性显示名称
+   *  - type: 属性类型（例如：'slider', 'color', 'checkbox', 'select'）
+   *  - defaultValue: 默认值
+   *  - min/max/step: 对于slider类型的限制值
+   *  - options: 对于select类型的选项
+   *  - description: 属性描述
+   *  - category: 属性分类
+   *  - order: 显示顺序（越小越靠前）
+   *  - visibleWhen: 函数或对象，定义何时显示该属性
+   *  - dynamicOptions: 函数，返回动态的选项列表
+   * @returns {Array} 可配置属性描述数组
+   */
+  getConfigurableProperties() {
+    // 返回基础属性，所有笔刷都有这些属性
+    return [
+      {
+        id: "size",
+        name: this.t('Canvas.BrushSize'),
+        type: "slider",
+        defaultValue: 5,
+        min: 0.5,
+        max: 100,
+        step: 0.5,
+        description: this.t('Canvas.BrushDeSize'),
+        category: this.t('Canvas.basic'),
+        order: 10,
+      },
+      {
+        id: "color",
+        name: this.t('Canvas.BrushColor'),
+        type: "color",
+        defaultValue: "#000000",
+        description: this.t('Canvas.BrushDeColor'),
+        category: this.t('Canvas.basic'),
+        order: 20,
+      },
+      {
+        id: "opacity",
+        name: this.t('Canvas.BrushOpacity'),
+        type: "slider",
+        defaultValue: 1,
+        min: 0.05,
+        max: 1,
+        step: 0.01,
+        description: this.t('Canvas.BrushdeOpacity'),
+        category: this.t('Canvas.basic'),
+        order: 30,
+      },
+    ];
+  }
+
+  /**
+   * 合并特有属性与基本属性
+   * 子类应该调用此方法来合并自身特有属性与基类提供的基本属性
+   * @param {Array} specificProperties 特有属性数组
+   * @returns {Array} 合并后的属性数组
+   */
+  mergeWithBaseProperties(specificProperties) {
+    const baseProperties = super.getConfigurableProperties();
+
+    // 过滤掉同名属性（子类优先）
+    const basePropsFiltered = baseProperties.filter(
+      (baseProp) => !specificProperties.some((specificProp) => specificProp.id === baseProp.id)
+    );
+
+    return [...basePropsFiltered, ...specificProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   */
+  updateProperty(propId, value) {
+    if (propId === "size") {
+      if (this.brush) {
+        this.brush.width = value;
+        this.configure(this.brush, { width: value });
+      }
+      return true;
+    } else if (propId === "color") {
+      if (this.brush) {
+        this.brush.color = value;
+        this.configure(this.brush, { color: value });
+      }
+      return true;
+    } else if (propId === "opacity") {
+      if (this.brush) {
+        this.brush.opacity = value;
+        this.configure(this.brush, { opacity: value });
+      }
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 检查属性是否可见
+   * @param {Object} property 属性对象
+   * @param {Object} currentValues 当前所有属性的值
+   * @returns {Boolean} 是否可见
+   */
+  isPropertyVisible(property, currentValues) {
+    // 如果没有visibleWhen条件，则始终显示
+    if (!property.visibleWhen) {
+      return true;
+    }
+
+    // 如果visibleWhen是函数，则调用函数判断
+    if (typeof property.visibleWhen === "function") {
+      return property.visibleWhen(currentValues);
+    }
+
+    // 如果visibleWhen是对象，检查条件是否满足
+    if (typeof property.visibleWhen === "object") {
+      for (const [key, value] of Object.entries(property.visibleWhen)) {
+        if (currentValues[key] !== value) {
+          return false;
+        }
+      }
+      return true;
+    }
+
+    return true;
+  }
+
+  /**
+   * 获取动态选项
+   * @param {Object} property 属性对象
+   * @param {Object} currentValues 当前所有属性的值
+   * @returns {Array} 选项数组
+   */
+  getDynamicOptions(property, currentValues) {
+    if (property.dynamicOptions && typeof property.dynamicOptions === "function") {
+      return property.dynamicOptions(currentValues);
+    }
+    return property.options || [];
+  }
+
+  /**
+   * 生命周期方法：笔刷被选中
+   */
+  onSelected() {
+    // 可由子类覆盖
+  }
+
+  /**
+   * 生命周期方法：笔刷被取消选中
+   */
+  onDeselected() {
+    // 可由子类覆盖
+  }
+
+  /**
+   * 销毁笔刷实例并清理资源
+   */
+  destroy() {
+    this.brush = null;
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/BrushRegistry.js b/src/components/Canvas/DepthCanvas/manager/brushes/BrushRegistry.js
new file mode 100644
index 0000000..8e133f1
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/BrushRegistry.js
@@ -0,0 +1,201 @@
+/**
+ * 笔刷注册表
+ * 用于注册、获取和管理所有笔刷
+ */
+export class BrushRegistry {
+  constructor() {
+    // 存储所有注册的笔刷类
+    this.brushes = new Map();
+
+    // 按类别组织的笔刷
+    this.brushesByCategory = new Map();
+
+    // 事件监听器
+    this.listeners = {
+      register: [],
+      unregister: [],
+    };
+  }
+
+  /**
+   * 注册一个笔刷
+   * @param {String} id 笔刷唯一标识
+   * @param {Class} brushClass 笔刷类（需要继承BaseBrush）
+   * @param {Object} metadata 笔刷元数据（可选）
+   * @returns {Boolean} 是否注册成功
+   */
+  register(id, brushClass, metadata = {}) {
+    if (this.brushes.has(id)) {
+      console.warn(`笔刷 ${id} 已存在，请使用其他ID`);
+      return false;
+    }
+
+    // 存储笔刷信息
+    const brushInfo = {
+      id,
+      class: brushClass,
+      metadata: {
+        ...metadata,
+        id,
+      },
+    };
+
+    this.brushes.set(id, brushInfo);
+
+    // 添加到分类
+    const category = metadata.category || "默认";
+    if (!this.brushesByCategory.has(category)) {
+      this.brushesByCategory.set(category, []);
+    }
+    this.brushesByCategory.get(category).push(brushInfo);
+
+    // 触发事件
+    this._triggerEvent("register", brushInfo);
+
+    return true;
+  }
+
+  /**
+   * 取消注册笔刷
+   * @param {String} id 笔刷ID
+   * @returns {Boolean} 是否成功
+   */
+  unregister(id) {
+    if (!this.brushes.has(id)) {
+      return false;
+    }
+
+    const brushInfo = this.brushes.get(id);
+    this.brushes.delete(id);
+
+    // 从分类中移除
+    const category = brushInfo.metadata.category || "默认";
+    if (this.brushesByCategory.has(category)) {
+      const brushes = this.brushesByCategory.get(category);
+      const index = brushes.findIndex((b) => b.id === id);
+      if (index !== -1) {
+        brushes.splice(index, 1);
+      }
+
+      // 如果分类为空，删除该分类
+      if (brushes.length === 0) {
+        this.brushesByCategory.delete(category);
+      }
+    }
+
+    // 触发事件
+    this._triggerEvent("unregister", brushInfo);
+
+    return true;
+  }
+
+  /**
+   * 获取笔刷信息
+   * @param {String} id 笔刷ID
+   * @returns {Object|null} 笔刷信息或null
+   */
+  getBrush(id) {
+    return this.brushes.get(id) || null;
+  }
+
+  /**
+   * 获取所有笔刷
+   * @returns {Array} 笔刷信息数组
+   */
+  getAllBrushes() {
+    return Array.from(this.brushes.values());
+  }
+
+  /**
+   * 获取指定分类的笔刷
+   * @param {String} category 分类名称
+   * @returns {Array} 笔刷信息数组
+   */
+  getBrushesByCategory(category) {
+    return this.brushesByCategory.get(category) || [];
+  }
+
+  /**
+   * 获取所有分类
+   * @returns {Array} 分类名称数组
+   */
+  getCategories() {
+    return Array.from(this.brushesByCategory.keys());
+  }
+
+  /**
+   * 创建一个笔刷实例
+   * @param {String} id 笔刷ID
+   * @param {Object} canvas 画布实例
+   * @param {Object} options 配置选项
+   * @returns {Object|null} 笔刷实例或null
+   */
+  createBrushInstance(id, canvas, options = {}) {
+    const brushInfo = this.getBrush(id);
+    if (!brushInfo) {
+      console.error(`笔刷 ${id} 不存在`);
+      return null;
+    }
+
+    try {
+      // 创建笔刷实例
+      return new brushInfo.class(canvas, {
+        ...options,
+        id: brushInfo.id,
+        ...brushInfo.metadata,
+      });
+    } catch (error) {
+      console.error(`创建笔刷 ${id} 失败:`, error);
+      return null;
+    }
+  }
+
+  /**
+   * 添加事件监听器
+   * @param {String} event 事件名称 ('register'|'unregister')
+   * @param {Function} callback 回调函数
+   */
+  addEventListener(event, callback) {
+    if (this.listeners[event]) {
+      this.listeners[event].push(callback);
+    }
+  }
+
+  /**
+   * 移除事件监听器
+   * @param {String} event 事件名称
+   * @param {Function} callback 回调函数
+   */
+  removeEventListener(event, callback) {
+    if (this.listeners[event]) {
+      const index = this.listeners[event].indexOf(callback);
+      if (index !== -1) {
+        this.listeners[event].splice(index, 1);
+      }
+    }
+  }
+
+  /**
+   * 触发事件
+   * @param {String} event 事件名称
+   * @param {*} data 事件数据
+   * @private
+   */
+  _triggerEvent(event, data) {
+    if (this.listeners[event]) {
+      this.listeners[event].forEach((callback) => {
+        try {
+          callback(data);
+        } catch (error) {
+          console.error(`执行 ${event} 事件监听器出错:`, error);
+        }
+      });
+    }
+  }
+}
+
+// 导出单例实例
+export const brushRegistry = new BrushRegistry();
+
+// 默认导出单例
+export default brushRegistry;
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/BrushStore.js b/src/components/Canvas/DepthCanvas/manager/brushes/BrushStore.js
new file mode 100644
index 0000000..04efed5
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/BrushStore.js
@@ -0,0 +1,694 @@
+import { reactive, readonly } from "vue";
+// import texturePresetManager from "../managers/brushes/TexturePresetManager";
+class texturePresetManager { }
+
+export class BrushState {
+	constructor(options) {
+		this.state = reactive({
+			// 笔刷基础属性
+			size: 5, // 笔刷大小
+			color: "#000000", // 笔刷颜色
+			opacity: 1, // 笔刷透明度
+			type: "pencil", // 当前笔刷类型
+
+			// 阴影相关属性
+			shadowEnabled: false, // 是否启用阴影
+			shadowColor: "#000000", // 阴影颜色（默认为笔刷颜色）
+			shadowWidth: 0, // 阴影宽度
+			shadowOffsetX: 0, // 阴影X偏移
+			shadowOffsetY: 0, // 阴影Y偏移
+
+			// 笔刷材质相关
+			textureScale: 1, // 材质缩放
+			textureEnabled: false, // 是否启用材质
+			texturePath: "", // 材质图片路径
+			textureOpacity: 1, // 材质透明度
+			textureRepeat: "repeat", // 材质重复模式
+			textureAngle: 0, // 材质旋转角度
+			selectedTextureId: null, // 当前选中的材质ID
+
+			// 可用笔刷类型列表 (由BrushManager初始化)
+			availableBrushes: [],
+
+			// 自定义笔刷列表
+			customBrushes: [],
+
+			// 笔刷预设
+			presets: [
+				// { name: "细线", size: 2, opacity: 1, color: "#000000", type: "pencil" },
+				// { name: "中粗", size: 5, opacity: 1, color: "#000000", type: "pencil" },
+				// { name: "粗线", size: 10, opacity: 1, color: "#000000", type: "pencil" },
+				// { name: "水彩", size: 15, opacity: 0.7, color: "#3366ff", type: "marker" },
+				// { name: "喷枪", size: 20, opacity: 0.5, color: "#ff6633", type: "spray" },
+			],
+
+			// 材质预设
+			texturePresets: [
+				{
+					name: "默认纹理",
+					textureId: "preset_texture_0",
+					scale: 1,
+					opacity: 1,
+					repeat: "repeat",
+					angle: 0,
+				},
+				{
+					name: "细纹理",
+					textureId: "preset_texture_1",
+					scale: 0.5,
+					opacity: 0.8,
+					repeat: "repeat",
+					angle: 0,
+				},
+				{
+					name: "粗纹理",
+					textureId: "preset_texture_2",
+					scale: 2,
+					opacity: 1,
+					repeat: "repeat",
+					angle: 45,
+				},
+				{
+					name: "水彩纹理",
+					textureId: "preset_texture_5",
+					scale: 1.5,
+					opacity: 0.6,
+					repeat: "no-repeat",
+					angle: 0,
+				}
+			],
+
+			// 上传的纹理缓存列表
+			uploadedTextures: [],
+
+			// 最近使用的颜色
+			recentColors: ["#000000", "#ffffff", "#ff0000", "#00ff00", "#0000ff"],
+
+			// 最近使用的材质
+			recentTextures: [],
+
+			// 当前笔刷可配置属性（由当前选中笔刷动态设置）
+			currentBrushProperties: [],
+
+			// 当前笔刷实例的引用
+			currentBrushInstance: null,
+
+			// 笔刷属性值的映射，存储可由UI修改的属性值
+			propertyValues: {},
+		});
+	}
+	setBrushSize(size) {
+		this.state.size = Math.max(0.5, Math.min(100, size));
+	}
+
+	setBrushColor(color) {
+		this.state.color = color;
+		// 添加到最近使用的颜色
+		if (!this.state.recentColors.includes(color)) {
+			this.state.recentColors.unshift(color);
+			if (this.state.recentColors.length > 10) {
+				this.state.recentColors.pop();
+			}
+		}
+	}
+
+	setBrushOpacity(opacity) {
+		this.state.opacity = Math.max(0.05, Math.min(1, opacity));
+	}
+
+	setBrushType(type) {
+		if (this.state.availableBrushes.some((brush) => brush.id === type)) {
+			this.state.type = type;
+		}
+	}
+
+	setTextureScale(scale) {
+		this.state.textureScale = Math.max(0.1, Math.min(10, scale));
+	}
+
+	setTextureEnabled(enabled) {
+		this.state.textureEnabled = enabled;
+	}
+
+	setTexturePath(path) {
+		this.state.texturePath = path;
+	}
+
+	// 阴影相关方法
+	setShadowEnabled(enabled) {
+		this.state.shadowEnabled = enabled;
+	}
+
+	setShadowColor(color) {
+		this.state.shadowColor = color;
+	}
+
+	setShadowWidth(width) {
+		this.state.shadowWidth = Math.max(0, Math.min(50, width));
+	}
+
+	setShadowOffsetX(offsetX) {
+		this.state.shadowOffsetX = Math.max(-50, Math.min(50, offsetX));
+	}
+
+	setShadowOffsetY(offsetY) {
+		this.state.shadowOffsetY = Math.max(-50, Math.min(50, offsetY));
+	}
+
+	setAvailableBrushes(brushes) {
+		this.state.availableBrushes = brushes;
+	}
+
+	addCustomBrush(brush) {
+		if (!brush.id) {
+			brush.id = `custom_${Date.now()}`;
+		}
+
+		this.state.customBrushes.push(brush);
+		return brush.id;
+	}
+
+	removeCustomBrush(brushId) {
+		const index = this.state.customBrushes.findIndex((b) => b.id === brushId);
+		if (index !== -1) {
+			this.state.customBrushes.splice(index, 1);
+			return true;
+		}
+		return false;
+	}
+
+	// 应用预设
+	applyPreset(presetIndex) {
+		const preset = this.state.presets[presetIndex];
+		if (preset) {
+			this.state.size = preset.size;
+			this.state.opacity = preset.opacity;
+			this.state.color = preset.color;
+			this.state.type = preset.type;
+			return true;
+		}
+		return false;
+	}
+
+	// 将当前设置保存为新预设
+	saveCurrentAsPreset(name) {
+		const newPreset = {
+			name: name || `预设 ${this.state.presets.length + 1}`,
+			size: this.state.size,
+			opacity: this.state.opacity,
+			color: this.state.color,
+			type: this.state.type,
+			textureEnabled: this.state.textureEnabled,
+			textureScale: this.state.textureScale,
+			texturePath: this.state.texturePath,
+		};
+
+		this.state.presets.push(newPreset);
+		return this.state.presets.length - 1; // 返回新预设的索引
+	}
+
+	/**
+	 * 设置当前笔刷实例
+	 * @param {Object} brushInstance BaseBrush实例
+	 */
+	setCurrentBrushInstance(brushInstance) {
+		this.state.currentBrushInstance = brushInstance;
+
+		// 获取并设置当前笔刷的可配置属性
+		if (brushInstance && brushInstance.getConfigurableProperties) {
+			const properties = brushInstance.getConfigurableProperties();
+			this.state.currentBrushProperties = properties;
+
+			// 初始化属性值
+			properties.forEach((prop) => {
+				// 如果是基础属性，使用已有值
+				if (prop.id === "size") {
+					this.state.propertyValues[prop.id] = this.state.size;
+				} else if (prop.id === "color") {
+					this.state.propertyValues[prop.id] = this.state.color;
+				} else if (prop.id === "opacity") {
+					this.state.propertyValues[prop.id] = this.state.opacity;
+				} else {
+					// 对于特殊属性，使用默认值
+					this.state.propertyValues[prop.id] = prop.defaultValue;
+				}
+			});
+		} else {
+			// 如果没有实例或方法，清空属性列表
+			this.state.currentBrushProperties = [];
+		}
+	}
+
+	/**
+	 * 更新笔刷属性值
+	 * @param {String} propId 属性ID
+	 * @param {any} value 属性值
+	 */
+	updatePropertyValue(propId, value) {
+		// 更新Store中的值
+		this.state.propertyValues[propId] = value;
+
+		// 同步更新基础属性
+		if (propId === "size") {
+			this.state.size = value;
+		} else if (propId === "color") {
+			this.state.color = value;
+		} else if (propId === "opacity") {
+			this.state.opacity = value;
+		}
+
+		// 如果有当前笔刷实例且有更新方法，则调用
+		if (this.state.currentBrushInstance && this.state.currentBrushInstance.updateProperty) {
+			this.state.currentBrushInstance.updateProperty(propId, value);
+		}
+	}
+
+	/**
+	 * 获取属性值
+	 * @param {String} propId 属性ID
+	 * @param {any} defaultValue 默认值
+	 * @returns {any} 属性值
+	 */
+	getPropertyValue(propId, defaultValue) {
+		// 检查属性值是否存在
+		if (Object.prototype.hasOwnProperty.call(this.state.propertyValues, propId)) {
+			return this.state.propertyValues[propId];
+		}
+
+		// 对于基础属性，返回store中的值
+		if (propId === "size") {
+			return this.state.size;
+		} else if (propId === "color") {
+			return this.state.color;
+		} else if (propId === "opacity") {
+			return this.state.opacity;
+		}
+
+		// 否则返回默认值
+		return defaultValue;
+	}
+
+	/**
+	 * 按分类获取当前笔刷可配置属性
+	 * @returns {Object} 按分类分组的属性对象
+	 */
+	getPropertiesByCategory() {
+		const result = {};
+
+		this.state.currentBrushProperties.forEach((prop) => {
+			const category = prop.category || "默认";
+			if (!result[category]) {
+				result[category] = [];
+			}
+			result[category].push({
+				...prop,
+				value: this.getPropertyValue(prop.id, prop.defaultValue),
+			});
+		});
+
+		// 按order排序每个分类中的属性
+		Object.keys(result).forEach((category) => {
+			result[category].sort((a, b) => (a.order || 0) - (b.order || 0));
+		});
+
+		return result;
+	}
+
+	/**
+	 * 材质相关方法
+	 */
+	setTextureOpacity(opacity) {
+		this.state.textureOpacity = Math.max(0, Math.min(1, opacity));
+	}
+
+	setTextureRepeat(repeat) {
+		const validModes = ["repeat", "repeat-x", "repeat-y", "no-repeat"];
+		if (validModes.includes(repeat)) {
+			this.state.textureRepeat = repeat;
+		}
+	}
+
+	setTextureAngle(angle) {
+		this.state.textureAngle = angle % 360;
+	}
+
+	setSelectedTextureId(textureId) {
+		this.state.selectedTextureId = textureId;
+
+		// 添加到最近使用的材质
+		if (textureId && !this.state.recentTextures.includes(textureId)) {
+			this.state.recentTextures.unshift(textureId);
+			if (this.state.recentTextures.length > 8) {
+				this.state.recentTextures.pop();
+			}
+		}
+	}
+
+	/**
+	 * 应用材质预设
+	 * @param {Number} presetIndex 预设索引
+	 * @returns {Boolean} 是否应用成功
+	 */
+	applyTexturePreset(presetIndex) {
+		const preset = this.state.texturePresets[presetIndex];
+		if (preset) {
+			this.state.selectedTextureId = preset.textureId;
+			this.state.textureScale = preset.scale;
+			this.state.textureOpacity = preset.opacity;
+			this.state.textureRepeat = preset.repeat;
+			this.state.textureAngle = preset.angle;
+
+			// 添加到最近使用
+			this.setSelectedTextureId(preset.textureId);
+
+			return true;
+		}
+		return false;
+	}
+
+	/**
+	 * 将当前材质设置保存为新预设
+	 * @param {String} name 预设名称
+	 * @returns {Number} 新预设的索引
+	 */
+	saveCurrentTextureAsPreset(name) {
+		const newPreset = {
+			name: name || `材质预设 ${this.state.texturePresets.length + 1}`,
+			textureId: this.state.selectedTextureId,
+			scale: this.state.textureScale,
+			opacity: this.state.textureOpacity,
+			repeat: this.state.textureRepeat,
+			angle: this.state.textureAngle,
+		};
+
+		this.state.texturePresets.push(newPreset);
+		return this.state.texturePresets.length - 1;
+	}
+
+	/**
+	 * 删除材质预设
+	 * @param {Number} presetIndex 预设索引
+	 * @returns {Boolean} 是否删除成功
+	 */
+	removeTexturePreset(presetIndex) {
+		if (presetIndex >= 0 && presetIndex < this.state.texturePresets.length) {
+			this.state.texturePresets.splice(presetIndex, 1);
+			return true;
+		}
+		return false;
+	}
+
+	/**
+	 * 获取所有可用材质（预设+自定义）
+	 * @returns {Array} 材质列表
+	 */
+	getAllTextures() {
+		return texturePresetManager.getAllTextures();
+	}
+
+	/**
+	 * 根据ID获取材质信息
+	 * @param {String} textureId 材质ID
+	 * @returns {Object|null} 材质对象
+	 */
+	getTextureById(textureId) {
+		return texturePresetManager.getTextureById(textureId);
+	}
+
+	/**
+	 * 按分类获取材质
+	 * @param {String} category 分类名称
+	 * @returns {Array} 材质列表
+	 */
+	getTexturesByCategory(category) {
+		return texturePresetManager.getTexturesByCategory(category);
+	}
+
+	/**
+	 * 获取材质分类列表
+	 * @returns {Array} 分类名称数组
+	 */
+	getTextureCategories() {
+		return texturePresetManager.getCategories();
+	}
+
+	/**
+	 * 搜索材质
+	 * @param {String} keyword 搜索关键词
+	 * @returns {Array} 匹配的材质列表
+	 */
+	searchTextures(keyword) {
+		return texturePresetManager.searchTextures(keyword);
+	}
+
+	/**
+	 * 添加自定义材质
+	 * @param {Object} textureData 材质数据
+	 * @returns {String} 材质ID
+	 */
+	addCustomTexture(textureData) {
+		const textureId = texturePresetManager.addCustomTexture(textureData);
+
+		// 保存到本地存储
+		texturePresetManager.saveCustomTexturesToStorage();
+
+		return textureId;
+	}
+
+	/**
+	 * 删除自定义材质
+	 * @param {String} textureId 材质ID
+	 * @returns {Boolean} 是否删除成功
+	 */
+	removeCustomTexture(textureId) {
+		const success = texturePresetManager.removeCustomTexture(textureId);
+
+		if (success) {
+			// 如果删除的是当前选中的材质，清空选择
+			if (this.state.selectedTextureId === textureId) {
+				this.state.selectedTextureId = null;
+			}
+
+			// 从最近使用中移除
+			const recentIndex = this.state.recentTextures.indexOf(textureId);
+			if (recentIndex !== -1) {
+				this.state.recentTextures.splice(recentIndex, 1);
+			}
+
+			// 保存到本地存储
+			texturePresetManager.saveCustomTexturesToStorage();
+		}
+
+		return success;
+	}
+
+	/**
+	 * 从文件上传自定义材质
+	 * @param {File} file 图片文件
+	 * @param {String} name 材质名称（可选）
+	 * @returns {Promise<String>} 材质ID
+	 */
+	uploadCustomTexture(file, name) {
+		return new Promise((resolve, reject) => {
+			// 验证文件
+			if (!texturePresetManager.validateTextureFile(file)) {
+				reject(new Error("无效的材质文件"));
+				return;
+			}
+
+			// 读取文件
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				try {
+					const textureData = {
+						name: name || file.name.replace(/\.[^/.]+$/, ""),
+						path: e.target.result,
+						preview: e.target.result,
+						description: `用户上传的材质: ${file.name}`,
+					};
+
+					const textureId = this.addCustomTexture(textureData);
+					resolve(textureId);
+				} catch (error) {
+					reject(error);
+				}
+			};
+
+			reader.onerror = () => {
+				reject(new Error("文件读取失败"));
+			};
+
+			reader.readAsDataURL(file);
+		});
+	}
+
+	/**
+	 * 导出材质预设配置
+	 * @returns {String} JSON格式的配置
+	 */
+	exportTexturePresets() {
+		const config = {
+			texturePresets: this.state.texturePresets,
+			customTextures: texturePresetManager.exportCustomTextures(),
+		};
+		return JSON.stringify(config, null, 2);
+	}
+
+	/**
+	 * 导入材质预设配置
+	 * @param {String} configJson JSON格式的配置
+	 * @returns {Boolean} 是否导入成功
+	 */
+	importTexturePresets(configJson) {
+		try {
+			const config = JSON.parse(configJson);
+
+			// 导入材质预设
+			if (config.texturePresets && Array.isArray(config.texturePresets)) {
+				this.state.texturePresets = [...this.state.texturePresets, ...config.texturePresets];
+			}
+
+			// 导入自定义材质
+			if (config.customTextures) {
+				texturePresetManager.importCustomTextures(config.customTextures);
+			}
+
+			return true;
+		} catch (error) {
+			console.error("导入材质预设失败:", error);
+			return false;
+		}
+	}
+
+	/**
+	 * 初始化材质预设管理器
+	 */
+	initializeTexturePresets() {
+		// 从本地存储加载自定义材质
+		texturePresetManager.loadCustomTexturesFromStorage();
+
+		// 确保预设材质引用的是有效的材质ID
+		this.state.texturePresets.forEach((preset, index) => {
+			const texture = texturePresetManager.getTextureById(preset.textureId);
+			if (!texture) {
+				console.warn(`材质预设 "${preset.name}" 引用的材质 ${preset.textureId} 不存在`);
+				// 可以选择使用默认材质替换或删除该预设
+				if (texturePresetManager.getAllTextures().length > 0) {
+					preset.textureId = texturePresetManager.getAllTextures()[0].id;
+				}
+			}
+		});
+	}
+
+	/**
+	 * 清空上传的纹理缓存
+	 */
+	clearUploadedTextures() {
+		this.state.uploadedTextures = [];
+	}
+
+	/**
+	 * 添加纹理到缓存
+	 * @param {String} textureId 材质ID
+	 */
+	cacheUploadedTexture(textureId) {
+		const texture = texturePresetManager.getTextureById(textureId);
+		if (texture && !this.state.uploadedTextures.includes(textureId)) {
+			this.state.uploadedTextures.push(textureId);
+		}
+	}
+
+	/**
+	 * 从缓存中移除纹理
+	 * @param {String} textureId 材质ID
+	 */
+	removeCachedTexture(textureId) {
+		const index = this.state.uploadedTextures.indexOf(textureId);
+		if (index !== -1) {
+			this.state.uploadedTextures.splice(index, 1);
+		}
+	}
+
+	// 辅助方法
+	getRGBAColor() {
+		// 解析十六进制颜色并添加透明度
+		const hex = this.state.color.replace("#", "");
+		const r = parseInt(hex.substring(0, 2), 16);
+		const g = parseInt(hex.substring(2, 4), 16);
+		const b = parseInt(hex.substring(4, 6), 16);
+
+		return `rgba(${r}, ${g}, ${b}, ${this.state.opacity})`;
+	}
+
+	/**
+	 * 获取当前笔刷的实际绘制颜色（包含透明度）
+	 * @returns {String} RGBA格式的颜色字符串
+	 */
+	getCurrentBrushColor() {
+		return this.getRGBAColor();
+	}
+
+	/**
+	 * 从RGBA颜色字符串中提取RGB值
+	 * @param {String} rgbaColor RGBA颜色字符串
+	 * @returns {Object} {r, g, b, a} 颜色值对象
+	 */
+	parseRGBAColor(rgbaColor) {
+		const rgbaMatch = rgbaColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+		if (rgbaMatch) {
+			return {
+				r: parseInt(rgbaMatch[1]),
+				g: parseInt(rgbaMatch[2]),
+				b: parseInt(rgbaMatch[3]),
+				a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1,
+			};
+		}
+		return null;
+	}
+
+	/**
+	 * 将RGB值转换为十六进制颜色
+	 * @param {Number} r 红色值 (0-255)
+	 * @param {Number} g 绿色值 (0-255)
+	 * @param {Number} b 蓝色值 (0-255)
+	 * @returns {String} 十六进制颜色字符串
+	 */
+	rgbToHex(r, g, b) {
+		return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+	}
+
+	/**
+	 * 获取当前阴影配置对象
+	 * @returns {Object|null} fabric.Shadow配置对象或null
+	 */
+	getShadowConfig() {
+		if (!this.state.shadowEnabled) {
+			return null;
+		}
+
+		return {
+			color: this.state.shadowColor,
+			blur: this.state.shadowWidth,
+			offsetX: this.state.shadowOffsetX,
+			offsetY: this.state.shadowOffsetY,
+		};
+	}
+
+	/**
+	 * 创建fabric.Shadow实例
+	 * @returns {fabric.Shadow|null} fabric.Shadow实例或null
+	 */
+	createFabricShadow() {
+		const config = this.getShadowConfig();
+		if (!config) {
+			return null;
+		}
+
+		// 确保fabric已加载
+		if (typeof fabric !== "undefined" && fabric.Shadow) {
+			return new fabric.Shadow(config);
+		}
+
+		return null;
+	}
+}
\ No newline at end of file
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/FABRIC_ERASING_GUIDE.md b/src/components/Canvas/DepthCanvas/manager/brushes/FABRIC_ERASING_GUIDE.md
new file mode 100644
index 0000000..85afe24
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/FABRIC_ERASING_GUIDE.md
@@ -0,0 +1,106 @@
+# fabric-with-erasing 库的 erasable 属性功能使用指南
+
+## 库功能概述
+
+`fabric-with-erasing` 库提供了强大的基于属性的擦除控制功能，无需手动实现复杂的图层检查逻辑。
+
+## 核心功能
+
+### 1. erasable 属性的三种模式
+
+- **`true`** (默认): 对象可以被擦除
+- **`false`**: 对象不能被擦除  
+- **`'deep'`**: 对于组合对象，可以对内部可擦除的子对象进行细粒度控制
+
+### 2. 选择性擦除机制
+
+库内置了选择性擦除机制：
+- 橡皮擦会自动检测对象的 `erasable` 属性
+- 只有 `erasable !== false` 的对象才会被擦除
+- 支持复杂的嵌套对象结构
+
+### 3. 反向擦除功能
+
+- 设置 `brush.inverted = true` 可以实现"撤销擦除"效果
+- 恢复已被擦除的内容
+
+## 项目中的优化实现
+
+### LayerManager 优化
+
+```javascript
+// 基于图层状态自动设置 erasable 属性
+obj.erasable = isInActiveLayer && layer.visible && !layer.locked && !layer.isBackground;
+```
+
+**优势：**
+- 只有活动图层、可见、非锁定、非背景的对象才可擦除
+- 自动处理复杂的权限逻辑
+- 性能优秀，无需手动遍历检查
+
+### BrushManager 简化
+
+```javascript
+// 直接使用库的 EraserBrush
+this.brush = new fabric.EraserBrush(this.canvas);
+this.brush.inverted = this.options.inverted || false;
+```
+
+**优势：**
+- 移除了复杂的手动图层检查逻辑
+- 直接利用库的内置功能
+- 支持反向擦除（恢复功能）
+- 代码更简洁、更可靠
+
+## 使用示例
+
+### 基础用法
+
+```javascript
+// 设置对象不可擦除
+fabricObject.erasable = false;
+
+// 设置对象可擦除
+fabricObject.erasable = true;
+
+// 组合对象的深度擦除控制
+group.erasable = 'deep';
+```
+
+### 高级用法
+
+```javascript
+// 启用反向擦除模式
+eraserBrush.inverted = true;
+
+// 监听擦除事件
+canvas.on('erasing:start', () => {
+  console.log('开始擦除');
+});
+
+canvas.on('erasing:end', (e) => {
+  console.log('擦除完成', e.targets);
+});
+```
+
+## 性能优势
+
+1. **内置优化**: 库已经进行了性能优化，避免重复计算
+2. **事件驱动**: 基于事件的架构，响应更快
+3. **选择性渲染**: 只重新渲染需要更新的部分
+4. **内存效率**: 合理的对象管理和清理机制
+
+## 兼容性说明
+
+- 完全兼容标准的 fabric.js API
+- 新增的 `erasable` 属性不会影响现有功能
+- 可以逐步迁移现有代码
+
+## 建议
+
+1. **简化现有实现**: 移除手动的图层检查逻辑，直接使用 `erasable` 属性
+2. **利用内置事件**: 使用库提供的擦除事件进行状态管理
+3. **测试反向擦除**: 尝试使用 `inverted` 属性实现撤销功能
+4. **性能测试**: 在大量对象的场景下测试性能表现
+
+通过这些优化，你的项目可以获得更好的性能和更简洁的代码结构。
\ No newline at end of file
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/README.md b/src/components/Canvas/DepthCanvas/manager/brushes/README.md
new file mode 100644
index 0000000..925f418
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/README.md
@@ -0,0 +1,280 @@
+<!-- https://github.com/tennisonchan/fabric-brush?tab=readme-ov-file -->
+<!-- eraser_brush：https://unpkg.com/fabric@5.5.2/src/mixins/eraser_brush.mixin.js -->
+# 笔刷系统使用指南
+
+## 概述
+
+这是一个基于插件架构的笔刷系统，允许轻松扩展和添加新的笔刷类型。整个系统由以下几个关键部分组成：
+
+1. `BaseBrush` - 所有笔刷的基类
+2. `BrushRegistry` - 笔刷注册表，用于管理所有笔刷
+3. `BrushManager` - 笔刷管理器，处理笔刷的实例化和切换
+4. `BrushStore` - 笔刷状态存储
+
+## 如何添加新笔刷
+
+添加新笔刷只需简单几步：
+
+### 1. 创建新的笔刷类
+
+最简单的方法是继承 `BaseBrush` 类。在 `types` 目录下创建你的笔刷文件：
+
+```javascript
+import { BaseBrush } from '../BaseBrush';
+
+/**
+ * 我的自定义笔刷
+ */
+export class MyCustomBrush extends BaseBrush {
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: 'my-custom-brush',
+      name: '我的笔刷',
+      description: '这是我自定义的笔刷',
+      category: '自定义笔刷',
+      ...options
+    });
+  }
+  
+  // 创建笔刷实例
+  create() {
+    // 创建底层fabric.js笔刷
+    this.brush = new fabric.PencilBrush(this.canvas);
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+    return this.brush;
+  }
+  
+  // 配置笔刷
+  configure(brush, options = {}) {
+    // 设置基本属性
+    if (options.color) brush.color = options.color;
+    if (options.width !== undefined) brush.width = options.width;
+    if (options.opacity !== undefined) brush.opacity = options.opacity;
+    
+    // 设置自定义属性
+    brush.strokeLineCap = 'round';
+    brush.strokeLineJoin = 'round';
+    // ...更多自定义设置
+  }
+}
+```
+
+### 2. 注册笔刷
+
+有两种方式注册笔刷：
+
+#### 方式一：使用BrushRegistry直接注册
+
+```javascript
+import { brushRegistry } from '../BrushRegistry';
+import { MyCustomBrush } from './MyCustomBrush';
+
+// 注册笔刷
+brushRegistry.register('my-custom-brush', MyCustomBrush, {
+  name: '我的笔刷',
+  description: '这是我自定义的笔刷',
+  category: '自定义笔刷'
+});
+```
+
+#### 方式二：通过BrushManager注册
+
+```javascript
+import { BrushManager } from '../brushManager';
+import { MyCustomBrush } from './MyCustomBrush';
+
+// 获取BrushManager实例
+const brushManager = new BrushManager({ canvas });
+
+// 注册笔刷
+brushManager.registerBrush('my-custom-brush', MyCustomBrush, {
+  name: '我的笔刷',
+  description: '这是我自定义的笔刷',
+  category: '自定义笔刷'
+});
+```
+
+### 3. 使用笔刷
+
+注册笔刷后，可以在应用中使用它：
+
+```javascript
+// 切换到你的自定义笔刷
+brushManager.setBrushType('my-custom-brush');
+```
+
+## 笔刷生命周期
+
+每个笔刷有以下生命周期方法：
+
+1. `constructor` - 创建笔刷类实例
+2. `create` - 创建底层fabric.js笔刷实例
+3. `configure` - 配置笔刷属性
+4. `onSelected` - 笔刷被选中时调用
+5. `onDeselected` - 笔刷被取消选中时调用
+6. `destroy` - 销毁笔刷实例释放资源
+
+## 示例：创建具有独特行为的笔刷
+
+这个例子创建了一个"脉冲笔刷"，线条宽度会自动脉动变化：
+
+```javascript
+import { BaseBrush } from '../BaseBrush';
+
+export class PulseBrush extends BaseBrush {
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: 'pulse',
+      name: '脉动笔刷',
+      description: '线条宽度会自动脉动变化',
+      category: '特效笔刷',
+      ...options
+    });
+    
+    this.originalWidth = options.width || 5;
+    this.pulseRate = options.pulseRate || 0.1;
+    this.pulseAmount = options.pulseAmount || 3;
+    this.pulseTimer = null;
+  }
+  
+  create() {
+    this.brush = new fabric.PencilBrush(this.canvas);
+    this.configure(this.brush, this.options);
+    
+    // 覆盖鼠标按下方法，开始脉冲效果
+    const originalMouseDown = this.brush.onMouseDown;
+    this.brush.onMouseDown = (pointer, options) => {
+      this.startPulse();
+      return originalMouseDown.call(this.brush, pointer, options);
+    };
+    
+    // 覆盖鼠标松开方法，停止脉冲效果
+    const originalMouseUp = this.brush.onMouseUp;
+    this.brush.onMouseUp = (options) => {
+      this.stopPulse();
+      return originalMouseUp.call(this.brush, options);
+    };
+    
+    return this.brush;
+  }
+  
+  configure(brush, options = {}) {
+    if (options.width !== undefined) {
+      this.originalWidth = options.width;
+      brush.width = this.originalWidth;
+    }
+    
+    if (options.color) {
+      brush.color = options.color;
+    }
+    
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+    
+    if (options.pulseRate !== undefined) {
+      this.pulseRate = options.pulseRate;
+    }
+    
+    if (options.pulseAmount !== undefined) {
+      this.pulseAmount = options.pulseAmount;
+    }
+  }
+  
+  startPulse() {
+    this.stopPulse();
+    
+    let phase = 0;
+    this.pulseTimer = setInterval(() => {
+      phase += this.pulseRate;
+      const pulseFactor = Math.sin(phase) * this.pulseAmount;
+      
+      if (this.brush) {
+        this.brush.width = Math.max(1, this.originalWidth + pulseFactor);
+      }
+    }, 50);
+  }
+  
+  stopPulse() {
+    if (this.pulseTimer) {
+      clearInterval(this.pulseTimer);
+      this.pulseTimer = null;
+    }
+  }
+  
+  onDeselected() {
+    this.stopPulse();
+  }
+  
+  destroy() {
+    this.stopPulse();
+    super.destroy();
+  }
+}
+```
+
+## 使用预设笔刷类型
+
+系统内置了几种笔刷类型，可以直接使用：
+
+- `pencil` - 基础铅笔笔刷
+- `spray` - 喷枪笔刷
+- `marker` - 马克笔笔刷
+- `eraser` - 橡皮擦笔刷
+- `texture` - 材质笔刷
+- `watercolor` - 水彩笔刷
+- `chalk` - 粉笔笔刷
+
+## 高级功能
+
+### 1. 使用分类组织笔刷
+
+注册笔刷时可以指定类别，便于在UI中分组展示：
+
+```javascript
+brushRegistry.register('my-brush', MyBrushClass, { 
+  category: '艺术笔刷' 
+});
+```
+
+### 2. 自定义笔刷参数
+
+可以为笔刷添加特殊参数，例如：
+
+```javascript
+// 笔刷类中
+setGlowIntensity(intensity) {
+  this.glowIntensity = intensity;
+  // 更新笔刷效果
+}
+
+// 使用时
+const neonBrush = brushManager.setBrushType('neon');
+if (neonBrush && typeof neonBrush.setGlowIntensity === 'function') {
+  neonBrush.setGlowIntensity(15);
+}
+```
+
+## 常见问题
+
+### 如何创建复杂的自定义笔刷效果？
+
+对于复杂的效果，可以：
+
+1. 覆盖fabric.js笔刷的关键方法，如`onMouseMove`
+2. 使用自定义渲染器处理绘制
+3. 结合Canvas API创建特殊效果
+
+### 如何获取所有注册的笔刷？
+
+```javascript
+// 获取所有笔刷
+const allBrushes = brushRegistry.getAllBrushes();
+
+// 获取所有分类
+const categories = brushRegistry.getCategories();
+
+// 获取指定分类的笔刷
+const artisticBrushes = brushRegistry.getBrushesByCategory('艺术笔刷');
+```
\ No newline at end of file
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/TexturePresetManager.js b/src/components/Canvas/DepthCanvas/manager/brushes/TexturePresetManager.js
new file mode 100644
index 0000000..0220bab
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/TexturePresetManager.js
@@ -0,0 +1,617 @@
+/**
+ * 材质预设管理器
+ * 负责管理所有材质预设，包括内置预设和用户自定义预设
+ */
+export class TexturePresetManager {
+  constructor() {
+    // 内置材质预设
+    this.builtInTextures = [];
+
+    // 用户自定义材质
+    this.customTextures = [];
+
+    // 材质分类
+    this.categories = new Map();
+
+    // 材质缓存
+    this.textureCache = new Map();
+
+    // 事件监听器
+    this.listeners = {
+      textureAdded: [],
+      textureRemoved: [],
+      textureUpdated: [],
+    };
+
+    // 初始化内置材质
+    this._initBuiltInTextures();
+  }
+
+  /**
+   * 初始化内置材质预设
+   * @private
+   */
+  _initBuiltInTextures() {
+    // 基于项目中的texture文件夹内容创建预设
+    const textureList = [
+      // 基础纹理
+      {
+        id: "texture0",
+        name: "纸质纹理",
+        category: "基础纹理",
+        path: "/src/assets/texture/texture0.webp",
+      },
+      {
+        id: "texture1",
+        name: "粗糙表面",
+        category: "基础纹理",
+        path: "/src/assets/texture/texture1.webp",
+      },
+      {
+        id: "texture2",
+        name: "细腻纹理",
+        category: "基础纹理",
+        path: "/src/assets/texture/texture2.webp",
+      },
+      {
+        id: "texture3",
+        name: "颗粒质感",
+        category: "基础纹理",
+        path: "/src/assets/texture/texture3.webp",
+      },
+      {
+        id: "texture4",
+        name: "布料纹理",
+        category: "基础纹理",
+        path: "/src/assets/texture/texture4.webp",
+      },
+      {
+        id: "texture5",
+        name: "木质纹理",
+        category: "自然纹理",
+        path: "/src/assets/texture/texture5.webp",
+      },
+      {
+        id: "texture6",
+        name: "石材纹理",
+        category: "自然纹理",
+        path: "/src/assets/texture/texture6.webp",
+      },
+      {
+        id: "texture7",
+        name: "金属质感",
+        category: "金属纹理",
+        path: "/src/assets/texture/texture7.webp",
+      },
+      {
+        id: "texture8",
+        name: "皮革纹理",
+        category: "自然纹理",
+        path: "/src/assets/texture/texture8.webp",
+      },
+      {
+        id: "texture9",
+        name: "水彩纸质",
+        category: "艺术纹理",
+        path: "/src/assets/texture/texture9.webp",
+      },
+      {
+        id: "texture10",
+        name: "画布纹理",
+        category: "艺术纹理",
+        path: "/src/assets/texture/texture10.webp",
+      },
+      {
+        id: "texture11",
+        name: "沙砾质感",
+        category: "自然纹理",
+        path: "/src/assets/texture/texture11.webp",
+      },
+      {
+        id: "texture12",
+        name: "水波纹理",
+        category: "自然纹理",
+        path: "/src/assets/texture/texture12.webp",
+      },
+      {
+        id: "texture13",
+        name: "云朵纹理",
+        category: "自然纹理",
+        path: "/src/assets/texture/texture13.webp",
+      },
+      {
+        id: "texture14",
+        name: "火焰纹理",
+        category: "特效纹理",
+        path: "/src/assets/texture/texture14.webp",
+      },
+      {
+        id: "texture15",
+        name: "烟雾效果",
+        category: "特效纹理",
+        path: "/src/assets/texture/texture15.webp",
+      },
+      {
+        id: "texture16",
+        name: "星空纹理",
+        category: "特效纹理",
+        path: "/src/assets/texture/texture16.webp",
+      },
+      {
+        id: "texture17",
+        name: "大理石纹",
+        category: "石材纹理",
+        path: "/src/assets/texture/texture17.webp",
+      },
+      {
+        id: "texture18",
+        name: "花岗岩纹",
+        category: "石材纹理",
+        path: "/src/assets/texture/texture18.webp",
+      },
+      {
+        id: "texture19",
+        name: "竹纹理",
+        category: "自然纹理",
+        path: "/src/assets/texture/texture19.webp",
+      },
+      {
+        id: "texture20",
+        name: "抽象图案",
+        category: "艺术纹理",
+        path: "/src/assets/texture/texture20.webp",
+      },
+    ];
+
+    // 添加内置材质
+    textureList.forEach((texture) => {
+      this.builtInTextures.push({
+        id: texture.id,
+        name: texture.name,
+        category: texture.category,
+        path: texture.path,
+        type: "builtin",
+        preview: texture.path, // 使用原图作为预览
+        description: `内置${texture.category} - ${texture.name}`,
+        tags: [texture.category.replace("纹理", ""), "内置"],
+        created: new Date().toISOString(),
+        // 默认属性
+        defaultSettings: {
+          scale: 1,
+          opacity: 1,
+          repeat: "repeat",
+          angle: 0,
+        },
+      });
+
+      // 添加到分类
+      if (!this.categories.has(texture.category)) {
+        this.categories.set(texture.category, []);
+      }
+      this.categories.get(texture.category).push(texture.id);
+    });
+  }
+
+  /**
+   * 获取所有材质（内置 + 自定义）
+   * @returns {Array} 材质数组
+   */
+  getAllTextures() {
+    return [...this.builtInTextures, ...this.customTextures];
+  }
+
+  /**
+   * 根据ID获取材质
+   * @param {String} textureId 材质ID
+   * @returns {Object|null} 材质对象
+   */
+  getTextureById(textureId) {
+    return this.getAllTextures().find((texture) => texture.id === textureId) || null;
+  }
+
+  /**
+   * 根据分类获取材质
+   * @param {String} category 分类名称
+   * @returns {Array} 材质数组
+   */
+  getTexturesByCategory(category) {
+    return this.getAllTextures().filter((texture) => texture.category === category);
+  }
+
+  /**
+   * 获取所有分类
+   * @returns {Array} 分类名称数组
+   */
+  getCategories() {
+    const categories = new Set();
+    this.getAllTextures().forEach((texture) => {
+      categories.add(texture.category);
+    });
+    return Array.from(categories);
+  }
+
+  /**
+   * 添加自定义材质
+   * @param {Object} textureData 材质数据
+   * @returns {String} 材质ID
+   */
+  addCustomTexture(textureData) {
+    const textureId =
+      textureData.id || `custom_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+    const texture = {
+      id: textureId,
+      name: textureData.name || "自定义材质",
+      category: textureData.category || "自定义材质",
+      path: textureData.path || textureData.dataUrl,
+      type: "custom",
+      preview: textureData.preview || textureData.path || textureData.dataUrl,
+      description: textureData.description || "用户自定义材质",
+      tags: textureData.tags || ["自定义"],
+      created: new Date().toISOString(),
+      defaultSettings: {
+        scale: textureData.scale || 1,
+        opacity: textureData.opacity || 1,
+        repeat: textureData.repeat || "repeat",
+        angle: textureData.angle || 0,
+        ...textureData.defaultSettings,
+      },
+      // 保存原始文件信息
+      file: textureData.file || null,
+      dataUrl: textureData.dataUrl || null,
+    };
+
+    this.customTextures.push(texture);
+
+    // 添加到分类
+    if (!this.categories.has(texture.category)) {
+      this.categories.set(texture.category, []);
+    }
+    this.categories.get(texture.category).push(textureId);
+
+    // 触发事件
+    this._triggerEvent("textureAdded", texture);
+
+    return textureId;
+  }
+
+  /**
+   * 删除自定义材质
+   * @param {String} textureId 材质ID
+   * @returns {Boolean} 是否删除成功
+   */
+  removeCustomTexture(textureId) {
+    const index = this.customTextures.findIndex((texture) => texture.id === textureId);
+    if (index === -1) {
+      return false;
+    }
+
+    const texture = this.customTextures[index];
+
+    // 只能删除自定义材质
+    if (texture.type !== "custom") {
+      console.warn("不能删除内置材质");
+      return false;
+    }
+
+    this.customTextures.splice(index, 1);
+
+    // 从分类中移除
+    if (this.categories.has(texture.category)) {
+      const categoryTextures = this.categories.get(texture.category);
+      const categoryIndex = categoryTextures.indexOf(textureId);
+      if (categoryIndex !== -1) {
+        categoryTextures.splice(categoryIndex, 1);
+      }
+
+      // 如果分类为空且不是内置分类，删除分类
+      if (categoryTextures.length === 0 && texture.category === "自定义材质") {
+        this.categories.delete(texture.category);
+      }
+    }
+
+    // 清除缓存
+    this.textureCache.delete(textureId);
+
+    // 触发事件
+    this._triggerEvent("textureRemoved", texture);
+
+    return true;
+  }
+
+  /**
+   * 更新材质信息
+   * @param {String} textureId 材质ID
+   * @param {Object} updates 更新数据
+   * @returns {Boolean} 是否更新成功
+   */
+  updateTexture(textureId, updates) {
+    const texture = this.getTextureById(textureId);
+    if (!texture || texture.type === "builtin") {
+      return false;
+    }
+
+    // 更新材质属性
+    Object.assign(texture, updates);
+
+    // 触发事件
+    this._triggerEvent("textureUpdated", texture);
+
+    return true;
+  }
+
+  /**
+   * 获取材质预览URL
+   * @param {Object} texture 材质对象
+   * @returns {String} 预览URL
+   */
+  getTexturePreviewUrl(texture) {
+    if (!texture) return null;
+
+    // 如果有预览图，使用预览图
+    if (texture.preview) {
+      return texture.preview;
+    }
+
+    // 否则使用原图
+    return texture.path || texture.dataUrl;
+  }
+
+  /**
+   * 加载材质图像
+   * @param {String} textureId 材质ID
+   * @returns {Promise<HTMLImageElement>} 图像对象
+   */
+  loadTextureImage(textureId) {
+    return new Promise((resolve, reject) => {
+      // 检查缓存
+      if (this.textureCache.has(textureId)) {
+        resolve(this.textureCache.get(textureId));
+        return;
+      }
+
+      const texture = this.getTextureById(textureId);
+      if (!texture) {
+        reject(new Error(`材质 ${textureId} 不存在`));
+        return;
+      }
+
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+
+      img.onload = () => {
+        // 缓存图像
+        this.textureCache.set(textureId, img);
+        resolve(img);
+      };
+
+      img.onerror = () => {
+        reject(new Error(`材质 ${textureId} 加载失败`));
+      };
+
+      img.src = texture.path || texture.dataUrl;
+    });
+  }
+
+  /**
+   * 搜索材质
+   * @param {String} query 搜索关键词
+   * @returns {Array} 匹配的材质数组
+   */
+  searchTextures(query) {
+    if (!query) return this.getAllTextures();
+
+    const searchTerm = query.toLowerCase();
+    return this.getAllTextures().filter((texture) => {
+      return (
+        texture.name.toLowerCase().includes(searchTerm) ||
+        texture.category.toLowerCase().includes(searchTerm) ||
+        texture.description.toLowerCase().includes(searchTerm) ||
+        texture.tags.some((tag) => tag.toLowerCase().includes(searchTerm))
+      );
+    });
+  }
+
+  /**
+   * 保存自定义材质到本地存储
+   */
+  saveCustomTexturesToStorage() {
+    try {
+      const customTexturesData = this.customTextures.map((texture) => ({
+        ...texture,
+        // 不保存file对象到localStorage
+        file: null,
+      }));
+
+      localStorage.setItem("canvasEditor_customTextures", JSON.stringify(customTexturesData));
+    } catch (error) {
+      console.error("保存自定义材质失败:", error);
+    }
+  }
+
+  /**
+   * 从本地存储加载自定义材质
+   */
+  loadCustomTexturesFromStorage() {
+    try {
+      const stored = localStorage.getItem("canvasEditor_customTextures");
+      if (stored) {
+        const customTexturesData = JSON.parse(stored);
+        this.customTextures = customTexturesData;
+
+        // 重建分类索引
+        this.customTextures.forEach((texture) => {
+          if (!this.categories.has(texture.category)) {
+            this.categories.set(texture.category, []);
+          }
+          if (!this.categories.get(texture.category).includes(texture.id)) {
+            this.categories.get(texture.category).push(texture.id);
+          }
+        });
+      }
+    } catch (error) {
+      console.error("加载自定义材质失败:", error);
+      this.customTextures = [];
+    }
+  }
+
+  /**
+   * 创建材质预设
+   * @param {String} name 预设名称
+   * @param {Object} settings 材质设置
+   * @returns {String} 预设ID
+   */
+  createTexturePreset(name, settings) {
+    const presetId = `preset_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+    const preset = {
+      id: presetId,
+      name: name,
+      type: "preset",
+      category: "材质预设",
+      created: new Date().toISOString(),
+      settings: {
+        textureId: settings.textureId,
+        scale: settings.scale || 1,
+        opacity: settings.opacity || 1,
+        repeat: settings.repeat || "repeat",
+        angle: settings.angle || 0,
+        brushSize: settings.brushSize || 5,
+        brushOpacity: settings.brushOpacity || 1,
+        brushColor: settings.brushColor || "#000000",
+      },
+    };
+
+    this.customTextures.push(preset);
+    this._triggerEvent("textureAdded", preset);
+
+    return presetId;
+  }
+
+  /**
+   * 应用材质预设
+   * @param {String} presetId 预设ID
+   * @returns {Object|null} 预设设置
+   */
+  applyTexturePreset(presetId) {
+    const preset = this.getTextureById(presetId);
+    if (!preset || preset.type !== "preset") {
+      return null;
+    }
+
+    return preset.settings;
+  }
+
+  /**
+   * 添加事件监听器
+   * @param {String} event 事件名称
+   * @param {Function} callback 回调函数
+   */
+  addEventListener(event, callback) {
+    if (this.listeners[event]) {
+      this.listeners[event].push(callback);
+    }
+  }
+
+  /**
+   * 移除事件监听器
+   * @param {String} event 事件名称
+   * @param {Function} callback 回调函数
+   */
+  removeEventListener(event, callback) {
+    if (this.listeners[event]) {
+      const index = this.listeners[event].indexOf(callback);
+      if (index !== -1) {
+        this.listeners[event].splice(index, 1);
+      }
+    }
+  }
+
+  /**
+   * 触发事件
+   * @param {String} event 事件名称
+   * @param {*} data 事件数据
+   * @private
+   */
+  _triggerEvent(event, data) {
+    if (this.listeners[event]) {
+      this.listeners[event].forEach((callback) => {
+        try {
+          callback(data);
+        } catch (error) {
+          console.error(`执行 ${event} 事件监听器出错:`, error);
+        }
+      });
+    }
+  }
+
+  /**
+   * 清除所有缓存
+   */
+  clearCache() {
+    this.textureCache.clear();
+  }
+
+  /**
+   * 获取统计信息
+   * @returns {Object} 统计信息
+   */
+  getStats() {
+    return {
+      builtInCount: this.builtInTextures.length,
+      customCount: this.customTextures.length,
+      totalCount: this.getAllTextures().length,
+      categoriesCount: this.getCategories().length,
+      cacheSize: this.textureCache.size,
+    };
+  }
+
+  /**
+   * 验证纹理文件
+   * @param {File} file 要验证的文件
+   * @returns {Boolean} 是否为有效的纹理文件
+   */
+  validateTextureFile(file) {
+    if (!file) {
+      console.warn("文件不存在");
+      return false;
+    }
+
+    // 检查文件类型
+    if (!file.type.startsWith("image/")) {
+      console.warn("文件类型无效，必须是图片文件");
+      return false;
+    }
+
+    // 检查文件大小（限制为 10MB）
+    const maxSize = 10 * 1024 * 1024; // 10MB
+    if (file.size > maxSize) {
+      console.warn("文件大小超过限制（10MB）");
+      return false;
+    }
+
+    // 检查支持的图片格式
+    const supportedTypes = [
+      "image/jpeg",
+      "image/jpg",
+      "image/png",
+      "image/webp",
+      "image/svg+xml",
+      "image/bmp",
+      "image/gif",
+    ];
+
+    if (!supportedTypes.includes(file.type)) {
+      console.warn("不支持的图片格式");
+      return false;
+    }
+
+    return true;
+  }
+}
+
+// 创建单例实例
+const texturePresetManager = new TexturePresetManager();
+
+// 导出单例
+export default texturePresetManager;
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/brushManager.js b/src/components/Canvas/DepthCanvas/manager/brushes/brushManager.js
new file mode 100644
index 0000000..512e86a
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/brushManager.js
@@ -0,0 +1,1000 @@
+import { fabric } from "fabric-with-all";
+import "./fabric.brushes.js";
+import { BrushState } from "./BrushStore.js";
+import { brushRegistry } from "./BrushRegistry";
+
+// 导入基础笔刷类型
+import { PencilBrush } from "./types/PencilBrush";
+import { TextureBrush } from "./types/TextureBrush";
+
+// 导入集成的笔刷类型
+import { CrayonBrush } from "./types/CrayonBrush";
+import { FurBrush } from "./types/FurBrush";
+import { InkBrush } from "./types/InkBrush";
+import { LongfurBrush } from "./types/LongfurBrush";
+import { WritingBrush } from "./types/WritingBrush";
+import { MarkerBrush } from "./types/MarkerBrush";
+import { CustomPenBrush } from "./types/CustomPenBrush";
+import { RibbonBrush } from "./types/RibbonBrush";
+import { ShadedBrush } from "./types/ShadedBrush";
+import { EraserStateManager } from "../EraserStateManager.js";
+import { SprayBrush } from "./types/SprayBrush";
+// import { SketchyBrush } from "./types/SketchyBrush";
+// import { SpraypaintBrush } from "./types/SpraypaintBrush";
+
+/**
+ * 笔刷管理器
+ * 负责管理和切换不同的笔刷类型
+ */
+export class BrushManager {
+	/**
+	 * 构造函数
+	 * @param {Object} options 配置选项
+	 * @param {Object} options.canvas fabric.js画布实例
+	 * @param {Object} options.layerManager 图层管理器实例（可选）
+	 * @param {Object} options.brushIndicator 笔刷指示器实例（可选）
+	 * @param {Function} options.t  国际化函数
+	 */
+	constructor(options = {}) {
+		this.canvas = options.canvas;
+		this.brushStore = new BrushState();
+		this.layerManager = options.layerManager; // 添加图层管理器引用
+		this.brushIndicator = options.brushIndicator; // 添加笔刷指示器引用
+		this.t = options.t
+
+		// 当前活动笔刷
+		this.activeBrush = null;
+		this.activeBrushId = null;
+
+		// 初始化笔刷注册
+		this._registerDefaultBrushes();
+
+		// 初始化橡皮擦状态管理器
+		this.eraserStateManager = null;
+		this.isErasingActive = false;
+		this.currentErasedObjects = []; // 当前擦除会话中被影响的对象
+	}
+
+	/**
+	 * 注册默认笔刷
+	 * @private
+	 */
+	_registerDefaultBrushes() {
+		// 注册铅笔笔刷
+		brushRegistry.register("pencil", PencilBrush, {
+			name: this.t("Canvas.Pencil"),
+			description: "基础铅笔工具，适合精细线条绘制",
+			t: this.t,
+			category: this.t('Canvas.BasicBrushes'),
+			imgUrl: '/image/brush/pencil.jpg',
+		});
+
+		// 注册材质笔刷
+		brushRegistry.register("texture", TextureBrush, {
+			name: this.t("Canvas.Texture"),
+			description: "使用纹理图片作为笔刷，支持缩放和透明度",
+			t: this.t,
+			category: this.t('Canvas.BasicBrushes'),
+			imgUrl: '/image/brush/texture.jpg',
+		});
+
+		// 注册集成的笔刷类型
+		brushRegistry.register("crayon", CrayonBrush, {
+			name: this.t("Canvas.Crayon"),
+			description: "使用纹理图片作为笔刷，支持缩放和透明度",
+			t: this.t,
+			category: this.t('Canvas.BasicBrushes'),
+			imgUrl: '/image/brush/crayon.jpg',
+		});
+		brushRegistry.register("fur", FurBrush, {
+			name: this.t("Canvas.Fur"),
+			description: "使用纹理图片作为笔刷，支持缩放和透明度",
+			t: this.t,
+			category: this.t('Canvas.BasicBrushes'),
+			imgUrl: '/image/brush/fur.jpg',
+		});
+		brushRegistry.register("ink", InkBrush, {
+			name: this.t("Canvas.Ink"),
+			description: "墨水笔刷，适合书写和绘图",
+			t: this.t,
+			category: this.t('Canvas.BasicBrushes'),
+			imgUrl: '/image/brush/ink.jpg',
+		});
+		brushRegistry.register("", LongfurBrush, {
+			name: this.t("Canvas.Longfur"),
+			description: "长毛发笔刷，适合绘制动物毛皮、草或头发",
+			t: this.t,
+			category: this.t('Canvas.BasicBrushes'),
+			imgUrl: '/image/brush/longFur.jpg',
+		});
+		brushRegistry.register("writing", WritingBrush, {
+			name: this.t("Canvas.Writing"),
+			description: "书法笔刷，模拟中国传统书法毛笔效果，具有笔锋和墨色变化",
+			t: this.t,
+			category: this.t('Canvas.BasicBrushes'),
+			imgUrl: '/image/brush/writing.jpg',
+		});
+		brushRegistry.register("marker", MarkerBrush, {
+			name: this.t("Canvas.Marker"),
+			description: "马克笔笔刷，适合粗线条和填充",
+			t: this.t,
+			category: this.t('Canvas.BasicBrushes'),
+			imgUrl: '/image/brush/marker.jpg',
+		});
+		brushRegistry.register("pen", CustomPenBrush, {
+			name: this.t("Canvas.Pen"),
+			description: "自定义钢笔笔刷，适合书写和绘图",
+			t: this.t,
+			category: this.t('Canvas.BasicBrushes'),
+			imgUrl: '/image/brush/pen.jpg',
+		});
+		brushRegistry.register("ribbon", RibbonBrush, {
+			name: this.t("Canvas.Ribbon"),
+			description: "丝带笔刷，适合创建流动的丝带效果",
+			t: this.t,
+			category: this.t('Canvas.BasicBrushes'),
+			imgUrl: '/image/brush/ribbon.jpg',
+		});
+		brushRegistry.register("shaded", ShadedBrush, {
+			name: this.t("Canvas.Shaded"),
+			description: "阴影笔刷，适合创建渐变和阴影效果",
+			t: this.t,
+			category: this.t('Canvas.BasicBrushes'),
+			imgUrl: '/image/brush/shaded.jpg',
+		});
+
+		brushRegistry.register("spray", SprayBrush, {
+			name: this.t("Canvas.Spray"),
+			description: "模拟喷枪效果，创建散点效果",
+			t: this.t,
+			category: this.t('Canvas.BasicBrushes'),
+			imgUrl: '/image/brush/spray.jpg',
+		});
+
+		// brushRegistry.register("sketchy", SketchyBrush);
+		// brushRegistry.register("spraypaint", SpraypaintBrush, {
+		//   name: "Spraypaint",
+		//   description: "喷漆笔刷，模拟喷漆效果",
+		// t:this.t,
+		//  	  category: this.t('Canvas.BasicBrushes'),
+		// });
+
+		// // // 注册喷枪笔刷
+		// brushRegistry.register(
+		//   "spray",
+		//   class SprayBrush extends PencilBrush {
+		//     constructor(canvas, options = {}) {
+		//       super(canvas, {
+		//         id: "spray",
+		//         name: "Spray",
+		//         description: "模拟喷枪效果，创建散点效果",
+		//        	  category: this.t('Canvas.BasicBrushes'),
+		//         ...options,
+		//       });
+		//     }
+
+		//     create() {
+		//       this.brush = new fabric.SprayBrush(this.canvas);
+		//       this.configure(this.brush, this.options);
+		//       return this.brush;
+		//     }
+
+		//     configure(brush, options = {}) {
+		//       super.configure(brush, options);
+
+		//       if (options.density !== undefined) {
+		//         brush.density = options.density;
+		//       }
+
+		//       if (options.randomOpacity !== undefined) {
+		//         brush.randomOpacity = options.randomOpacity;
+		//       }
+
+		//       if (options.dotWidth !== undefined) {
+		//         brush.dotWidth = options.dotWidth;
+		//       }
+		//     }
+		//   },
+		//   {
+		//     name: "喷枪",
+		//     description: "模拟喷枪效果，创建散点效果",
+		//   }
+		// );
+		// 注册橡皮擦笔刷
+		const outerThis = this;
+		brushRegistry.register(
+			"eraser",
+			class EraserBrush extends PencilBrush {
+				constructor(canvas, options = {}) {
+					super(canvas, {
+						id: "eraser",
+						name: "橡皮擦",
+						t: outerThis.t,
+						description: "擦除已绘制的内容",
+						category: "工具",
+						...options,
+					});
+				}
+
+				create() {
+					// 直接使用 fabric-with-erasing 库提供的 EraserBrush
+					this.brush = new fabric.EraserBrush(this.canvas);
+					this.configure(this.brush, this.options);
+
+					// 配置橡皮擦特有属性
+					this.brush.inverted = this.options.inverted || false; // 是否反向擦除（恢复擦除）
+
+					return this.brush;
+				}
+
+				configure(brush, options = {}) {
+					super.configure(brush, options);
+
+					// 橡皮擦特有配置
+					if (options.inverted !== undefined) {
+						brush.inverted = options.inverted;
+					}
+				}
+
+				/**
+				 * 设置反向擦除模式
+				 * @param {Boolean} inverted 是否启用反向擦除（撤销擦除效果）
+				 */
+				setInverted(inverted) {
+					if (this.brush) {
+						this.brush.inverted = inverted;
+					}
+				}
+
+				/**
+				 * 获取橡皮擦配置属性
+				 * @returns {Array} 可配置属性数组
+				 */
+				getConfigurableProperties() {
+					return [
+						...super.getConfigurableProperties(),
+						{
+							id: "inverted",
+							name: "反向擦除",
+							type: "boolean",
+							description: "启用时可以恢复已擦除的内容",
+							defaultValue: false,
+							min: null,
+							max: null,
+						},
+					];
+				}
+
+				/**
+				 * 更新橡皮擦属性
+				 * @param {String} propId 属性ID
+				 * @param {any} value 属性值
+				 */
+				updateProperty(propId, value) {
+					if (propId === "inverted") {
+						this.setInverted(value);
+					} else {
+						super.updateProperty(propId, value);
+					}
+				}
+			}
+		);
+
+		// // 注册水彩笔刷
+		// brushRegistry.register(
+		//   "watercolor",
+		//   class WatercolorBrush extends PencilBrush {
+		//     constructor(canvas, options = {}) {
+		//       super(canvas, {
+		//         id: "watercolor",
+		//         name: "水彩",
+		//         description: "模拟水彩效果，带有流动感和透明感",
+		//         category: "特效笔刷",
+		//         ...options,
+		//       });
+		//     }
+
+		//     create() {
+		//       // 创建一个自定义的PencilBrush来模拟水彩效果
+		//       this.brush = new fabric.PencilBrush(this.canvas);
+		//       this.configure(this.brush, this.options);
+
+		//       // 水彩效果特有的属性
+		//       this.brush.globalCompositeOperation = "multiply";
+		//       this.brush.shadow = new fabric.Shadow({
+		//         color: this.options.color || "#000",
+		//         blur: 5,
+		//         offsetX: 0,
+		//         offsetY: 0,
+		//       });
+
+		//       return this.brush;
+		//     }
+
+		//     configure(brush, options = {}) {
+		//       super.configure(brush, options);
+
+		//       // 水彩笔刷特有的配置
+		//       brush.opacity = Math.min(0.5, options.opacity || 0.3); // 默认透明度30%
+		//     }
+		//   }
+		// );
+
+		// // 注册粉笔笔刷
+		// brushRegistry.register(
+		//   "chalk",
+		//   class ChalkBrush extends PencilBrush {
+		//     constructor(canvas, options = {}) {
+		//       super(canvas, {
+		//         id: "chalk",
+		//         name: "粉笔",
+		//         description: "模拟粉笔效果，有颗粒感和不连续性",
+		//         category: "特效笔刷",
+		//         ...options,
+		//       });
+		//     }
+
+		//     create() {
+		//       this.brush = new fabric.PencilBrush(this.canvas);
+		//       this.configure(this.brush, this.options);
+
+		//       // 自定义绘画方法来模拟粉笔效果
+		//       const originalOnMouseMove = this.brush.onMouseMove;
+		//       this.brush.onMouseMove = function (pointer, options) {
+		//         // 随机调整坐标位置，增加粉笔质感
+		//         const jitter = 2;
+		//         pointer.x += (Math.random() - 0.5) * jitter;
+		//         pointer.y += (Math.random() - 0.5) * jitter;
+
+		//         // 调用原始方法
+		//         originalOnMouseMove.call(this, pointer, options);
+		//       };
+
+		//       return this.brush;
+		//     }
+
+		//     configure(brush, options = {}) {
+		//       super.configure(brush, options);
+
+		//       // 粉笔特有的设置
+		//       brush.strokeDashArray = [5, 5]; // 虚线效果
+		//     }
+		//   }
+		// );
+	}
+
+	/**
+	 * 获取所有可用笔刷类型
+	 * @returns {Array} 笔刷类型数组，包含id、name和description
+	 */
+	getBrushTypes() {
+		// 从注册表获取所有笔刷信息
+		const brushes = brushRegistry.getAllBrushes();
+
+		// 将笔刷信息转换为期望的格式
+		return brushes.map((brushInfo) => ({
+			id: brushInfo.id,
+			name: brushInfo.metadata.name || brushInfo.id,
+			description: brushInfo.metadata.description || "",
+			category: brushInfo.metadata.category || "默认",
+			icon: brushInfo.metadata.icon || null,
+			imgUrl: brushInfo.metadata.imgUrl || null,
+		}));
+	}
+
+	/**
+	 * 初始化笔刷列表并更新BrushStore
+	 */
+	initializeBrushes() {
+		// 获取所有笔刷
+		const allBrushes = this.getBrushTypes();
+
+		// 更新BrushStore中的可用笔刷列表
+		this.brushStore.setAvailableBrushes(allBrushes);
+
+		// 设置默认笔刷
+		if (!this.activeBrushId && allBrushes.length > 0) {
+			this.setBrushType(allBrushes[0].id);
+		}
+	}
+
+	/**
+	 * 设置笔刷类型
+	 * @param {String} brushId 笔刷ID
+	 * @returns {Object|null} 设置的笔刷实例
+	 */
+	setBrushType(brushId) {
+		// 如果相同笔刷，不做处理
+		if (this.activeBrushId === brushId) {
+			return this.activeBrush;
+		}
+
+		// 销毁当前笔刷
+		if (this.activeBrush) {
+			// 调用生命周期方法
+			if (this.activeBrush.onDeselected) {
+				this.activeBrush.onDeselected();
+			}
+			this.activeBrush.destroy();
+		}
+		// 创建新笔刷实例
+		try {
+			const brushInstance = brushRegistry.createBrushInstance(
+				brushId,
+				this.canvas,
+				{
+					color: brushId === "eraser" ? this.brushStore.state.color : undefined,
+					width: this.brushStore.state.size,
+					opacity: this.brushStore.state.opacity,
+
+					// 阴影相关配置
+					shadowEnabled: this.brushStore.state.shadowEnabled,
+					shadowColor: this.brushStore.state.shadowColor,
+					shadowWidth: this.brushStore.state.shadowWidth,
+					shadowOffsetX: this.brushStore.state.shadowOffsetX,
+					shadowOffsetY: this.brushStore.state.shadowOffsetY,
+
+					// 材质笔刷特有配置
+					textureEnabled: this.brushStore.state.textureEnabled,
+					texturePath: this.brushStore.state.texturePath,
+					textureScale: this.brushStore.state.textureScale,
+				}
+			);
+
+			if (brushInstance) {
+				// 创建笔刷
+				const fabricBrush = brushInstance.create();
+
+				// 更新画布的当前笔刷
+				if (fabricBrush) {
+					this.canvas.freeDrawingBrush = fabricBrush;
+				}
+
+				// 更新当前笔刷引用
+				this.activeBrush = brushInstance;
+				this.activeBrushId = brushId;
+
+				// 调用生命周期方法
+				if (this.activeBrush.onSelected) {
+					this.activeBrush.onSelected();
+				}
+
+				// 更新Store的笔刷类型
+				this.brushStore.setBrushType(brushId);
+
+				// 更新Store的当前笔刷实例，用于动态属性系统
+				this.brushStore.setCurrentBrushInstance(brushInstance);
+
+				return brushInstance;
+			}
+		} catch (error) {
+			console.error(`创建笔刷 ${brushId} 失败:`, error);
+		}
+
+		return null;
+	}
+
+	/**
+	 * 设置笔刷颜色
+	 * @param {String} color 十六进制颜色值
+	 */
+	setBrushColor(color) {
+		if (!this.canvas.freeDrawingBrush) return;
+
+		// 更新笔刷颜色
+		this.canvas.freeDrawingBrush.color = color;
+
+		// 更新活动笔刷
+		if (this.activeBrush) {
+			this.activeBrush.configure(this.canvas.freeDrawingBrush, { color });
+		}
+
+		// 更新笔刷指示器大小
+		if (this.brushIndicator) {
+			this.brushIndicator.updateColor(color);
+		}
+
+		// 更新Store
+		this.brushStore.setBrushColor(color);
+	}
+
+	/**
+	 * 设置笔刷大小
+	 * @param {Number} size 笔刷大小
+	 */
+	setBrushSize(size) {
+		if (!this.canvas.freeDrawingBrush) return;
+
+		// 限制大小范围
+		const brushSize = Math.max(0.1, Math.min(100, size));
+
+		// 更新笔刷大小
+		this.canvas.freeDrawingBrush.width = brushSize;
+
+		// 更新活动笔刷
+		if (this.activeBrush) {
+			this.activeBrush.configure(this.canvas.freeDrawingBrush, {
+				width: brushSize,
+			});
+		}
+
+		// 更新笔刷指示器大小
+		if (this.brushIndicator) {
+			this.brushIndicator.updateSize(brushSize);
+		}
+
+		// 更新Store
+		this.brushStore.setBrushSize(brushSize);
+
+		return brushSize;
+	}
+
+	/**
+	 * 增加笔刷大小
+	 * @param {Number} amount 增加量
+	 * @returns {Number} 新的笔刷大小
+	 */
+	increaseBrushSize(amount = 1) {
+		const currentSize = this.brushStore.state.size;
+		return this.setBrushSize(currentSize + amount);
+	}
+
+	/**
+	 * 减少笔刷大小
+	 * @param {Number} amount 减少量
+	 * @returns {Number} 新的笔刷大小
+	 */
+	decreaseBrushSize(amount = 1) {
+		const currentSize = this.brushStore.state.size;
+		return this.setBrushSize(currentSize - amount);
+	}
+
+	/**
+	 * 增加笔刷透明度
+	 * @param {Number} amount 增加量
+	 * @returns {Number} 新的笔刷大小
+	 */
+	increaseBrushOpacity(amount = 0.01) {
+		const currentSize = this.brushStore.state.opacity;
+		return this.setBrushOpacity(currentSize + amount);
+	}
+
+	/**
+	 * 减少笔刷大小
+	 * @param {Number} amount 减少量
+	 * @returns {Number} 新的笔刷大小
+	 */
+	decreaseBrushOpacity(amount = 0.01) {
+		const currentSize = this.brushStore.state.opacity;
+		return this.setBrushOpacity(currentSize - amount);
+	}
+
+	/**
+	 * 设置笔刷透明度
+	 * @param {Number} opacity 透明度 (0-1)
+	 */
+	setBrushOpacity(opacity) {
+		if (!this.canvas.freeDrawingBrush) return;
+
+		// 限制透明度范围
+		const brushOpacity = Math.max(0.05, Math.min(1, opacity));
+
+		// 不再设置fabric笔刷的opacity属性，而是通过颜色的RGBA值来实现透明度
+		// this.canvas.freeDrawingBrush.opacity = brushOpacity;
+
+		// 更新活动笔刷配置，使用当前颜色和新的透明度
+		if (this.activeBrush) {
+			const currentColor = this.brushStore.state.color;
+			this.activeBrush.configure(this.canvas.freeDrawingBrush, {
+				color: currentColor,
+				opacity: brushOpacity,
+			});
+		}
+
+		// 确保上下文透明度始终为1，避免全局透明度问题
+		if (this.canvas.contextTop) {
+			this.canvas.contextTop.globalAlpha = 1;
+		}
+
+		// 更新Store
+		this.brushStore.setBrushOpacity(brushOpacity);
+
+		return brushOpacity;
+	}
+
+	/**
+	 * 设置材质缩放
+	 * @param {Number} scale 缩放比例
+	 */
+	setTextureScale(scale) {
+		// 限制缩放范围
+		const textureScale = Math.max(0.1, Math.min(10, scale));
+
+		// 更新活动笔刷
+		if (this.activeBrush && this.activeBrush.setTextureScale) {
+			this.activeBrush.setTextureScale(textureScale);
+		}
+
+		// 更新Store
+		this.brushStore.setTextureScale(textureScale);
+
+		return textureScale;
+	}
+
+	/**
+	 * 增加材质缩放
+	 * @param {Number} amount 增加量
+	 */
+	increaseTextureScale(amount = 0.1) {
+		const currentScale = this.brushStore.state.textureScale;
+		return this.setTextureScale(currentScale + amount);
+	}
+
+	/**
+	 * 减少材质缩放
+	 * @param {Number} amount 减少量
+	 */
+	decreaseTextureScale(amount = 0.1) {
+		const currentScale = this.brushStore.state.textureScale;
+		return this.setTextureScale(currentScale - amount);
+	}
+
+	/**
+	 * 设置材质路径
+	 * @param {String} path 材质图片路径
+	 */
+	setTexturePath(path) {
+		// 更新活动笔刷
+		if (this.activeBrush && this.activeBrush.setTexturePath) {
+			this.activeBrush.setTexturePath(path);
+		}
+
+		// 更新Store
+		this.brushStore.setTexturePath(path);
+
+		return path;
+	}
+
+	/**
+	 * 启用/禁用材质
+	 * @param {Boolean} enabled 是否启用
+	 */
+	setTextureEnabled(enabled) {
+		// 更新Store
+		this.brushStore.setTextureEnabled(enabled);
+
+		// 如果启用材质，且当前不是材质笔刷，需要切换
+		if (enabled && this.activeBrushId !== "texture") {
+			this.setBrushType("texture");
+		}
+
+		return enabled;
+	}
+
+	/**
+	 * 注册新笔刷
+	 * @param {String} id 笔刷ID
+	 * @param {Class} brushClass 笔刷类
+	 * @param {Object} metadata 笔刷元数据
+	 * @returns {Boolean} 是否注册成功
+	 */
+	registerBrush(id, brushClass, metadata = {}) {
+		const success = brushRegistry.register(id, brushClass, metadata);
+
+		if (success) {
+			// 更新可用笔刷列表
+			this.initializeBrushes();
+		}
+
+		return success;
+	}
+
+	/**
+	 * 设置依赖管理器
+	 */
+	setManagers({ layerManager, commandManager }) {
+		this.layerManager = layerManager;
+		this.commandManager = commandManager;
+
+		// 初始化橡皮擦状态管理器
+		if (this.canvas && this.layerManager) {
+			this.eraserStateManager = new EraserStateManager(
+				this.canvas,
+				this.layerManager
+			);
+		}
+	}
+
+	/**
+	 * 绑定橡皮擦事件处理器
+	 * @private
+	 */
+	_bindEraserEvents() {
+		if (!this.canvas || !this.eraserStateManager) return;
+
+		// 监听擦除开始事件
+		this.canvas.on("erasing:start", this._handleErasingStart.bind(this));
+
+		// 监听擦除结束事件
+		this.canvas.on("erasing:end", this._handleErasingEnd.bind(this));
+	}
+
+	/**
+	 * 解绑橡皮擦事件处理器
+	 * @private
+	 */
+	_unbindEraserEvents() {
+		if (!this.canvas) return;
+
+		this.canvas.off("erasing:start", this._handleErasingStart.bind(this));
+		this.canvas.off("erasing:end", this._handleErasingEnd.bind(this));
+	}
+
+	/**
+	 * 处理擦除开始事件
+	 * @param {Object} e 事件对象
+	 * @private
+	 */
+	_handleErasingStart(e) {
+		console.log("橡皮擦开始擦除");
+
+		if (!this.eraserStateManager) return;
+
+		// 标记擦除状态
+		this.isErasingActive = true;
+		this.currentErasedObjects = [];
+
+		// 捕获擦除前的状态
+		this.eraserStateManager.startErasing();
+	}
+
+	/**
+	 * 处理擦除结束事件
+	 * @param {Object} e 事件对象
+	 * @private
+	 */
+	_handleErasingEnd(e) {
+		console.log("橡皮擦擦除结束", e);
+
+		if (!this.eraserStateManager || !this.isErasingActive) return;
+
+		// 获取被擦除的对象
+		const affectedObjects = e.targets || [];
+
+		// 创建橡皮擦命令
+		const eraserCommand = this.eraserStateManager.endErasing(affectedObjects);
+
+		// 如果有有效的命令且有命令管理器，执行命令
+		if (eraserCommand && this.commandManager) {
+			// 注意：不需要调用 execute()，因为擦除操作已经完成
+			// 只需要将命令添加到历史记录中以支持撤销
+			this.commandManager.addToHistory(eraserCommand);
+			console.log("橡皮擦操作已添加到命令历史");
+		}
+
+		// 重置状态
+		this.isErasingActive = false;
+		this.currentErasedObjects = [];
+	}
+
+	/**
+	 * 取消当前擦除操作
+	 */
+	cancelErasing() {
+		if (!this.isErasingActive) return;
+
+		if (this.eraserStateManager) {
+			this.eraserStateManager.cancelErasing();
+		}
+
+		this.isErasingActive = false;
+		this.currentErasedObjects = [];
+
+		console.log("当前擦除操作已取消");
+	}
+
+	/**
+	 * 获取当前笔刷类型
+	 * @returns {String} 当前笔刷类型ID
+	 */
+	getCurrentBrushType() {
+		return this.activeBrushId;
+	}
+
+	/**
+	 * 获取当前笔刷大小
+	 * @returns {Number} 当前笔刷大小
+	 */
+	getBrushSize() {
+		return this.brushStore.state.size;
+	}
+
+	/**
+	 * 获取当前笔刷颜色
+	 * @returns {String} 当前笔刷颜色
+	 */
+	getBrushColor() {
+		return this.brushStore.state.color;
+	}
+
+	/**
+	 * 获取当前笔刷透明度
+	 * @returns {Number} 当前笔刷透明度
+	 */
+	getBrushOpacity() {
+		return this.brushStore.state.opacity;
+	}
+
+	/**
+	 * 获取材质缩放
+	 * @returns {Number} 材质缩放比例
+	 */
+	getTextureScale() {
+		return this.brushStore.state.textureScale;
+	}
+
+	/**
+	 * 创建材质笔刷
+	 * 这个方法保留用于向下兼容
+	 * @deprecated 请使用setBrushType('texture')代替
+	 * @returns {Object} 材质笔刷实例
+	 */
+	createTextureBrush() {
+		console.warn('createTextureBrush方法已废弃，请使用setBrushType("texture")');
+		return this.setBrushType("texture");
+	}
+
+	/**
+	 * 更新笔刷
+	 * 根据当前设置应用笔刷属性到画布
+	 */
+	updateBrush() {
+		if (!this.canvas) return;
+
+		// 如果有活动的笔刷实例，重新配置它
+		if (this.activeBrush && this.canvas.freeDrawingBrush) {
+			this.activeBrush.configure(this.canvas.freeDrawingBrush, {
+				color: this.brushStore.state.color,
+				width: this.brushStore.state.size,
+				opacity: this.brushStore.state.opacity,
+			});
+		} else {
+			// 如果没有活动笔刷，创建一个默认的
+			this.setBrushType(this.activeBrushId || "pencil");
+		}
+
+		// 更新画布状态
+		this?.canvas?.renderAll?.();
+
+		return this.canvas.freeDrawingBrush;
+	}
+
+	/**
+	 * 更新笔刷阴影设置
+	 */
+	updateShadow() {
+		if (this.activeBrush && this.activeBrush.updateShadow) {
+			this.activeBrush.updateShadow();
+		}
+	}
+
+	// /**
+	//  * 创建橡皮擦
+	//  * @param {Object} options 橡皮擦选项
+	//  */
+	// createEraser(options = {}) {
+	//   if (!this.canvas) {
+	//     console.error("画布未初始化");
+	//     return null;
+	//   }
+
+	//   try {
+	//     // 直接使用 fabric-with-erasing 库提供的 EraserBrush
+	//     this.brush = new fabric.EraserBrush(this.canvas);
+
+	//     // 应用配置
+	//     this.configure(this.brush, {
+	//       width: this.brushSize.value,
+	//       color: this.brushColor.value,
+	//       opacity: this.brushOpacity.value,
+	//       inverted: options.inverted || false,
+	//       ...options,
+	//     });
+
+	//     // 设置画布为绘图模式
+	//     this.canvas.isDrawingMode = true;
+	//     this.canvas.freeDrawingBrush = this.brush;
+
+	//     // 绑定橡皮擦事件处理器
+	//     // this._bindEraserEvents();
+
+	//     console.log("橡皮擦创建成功");
+	//     return this.brush;
+	//   } catch (error) {
+	//     console.error("创建橡皮擦失败:", error);
+	//     return null;
+	//   }
+	// }
+
+	/**
+	 * 创建橡皮擦
+	 * @returns {Object} 橡皮擦笔刷
+	 */
+	createEraser() {
+		return this.setBrushType("eraser");
+	}
+
+	/**
+	 * 创建吸色工具
+	 * @param {Function} callback 选择颜色后的回调函数
+	 */
+	createEyedropper(callback) {
+		// 保存当前状态
+		const previousBrushId = this.activeBrushId;
+
+		// 一次性事件处理程序
+		const handleMouseDown = (event) => {
+			const pointer = this.canvas.getPointer(event.e);
+			const ctx = this.canvas.getContext();
+
+			// 获取点击位置的像素
+			const imageData = ctx.getImageData(pointer.x, pointer.y, 1, 1).data;
+
+			// 将RGB转换为十六进制颜色
+			const color = `#${(
+				(1 << 24) +
+				(imageData[0] << 16) +
+				(imageData[1] << 8) +
+				imageData[2]
+			)
+				.toString(16)
+				.slice(1)}`;
+
+			// 调用回调函数
+			if (typeof callback === "function") {
+				callback(color);
+			}
+
+			// 恢复之前的笔刷
+			this.setBrushType(previousBrushId);
+
+			// 移除事件监听器
+			this.canvas.off("mouse:down", handleMouseDown);
+		};
+
+		// 添加事件监听器
+		this.canvas.on("mouse:down", handleMouseDown);
+
+		// 设置吸色光标
+		this.canvas.defaultCursor = "crosshair";
+
+		console.log("吸色工具已激活，点击画布选择颜色");
+	}
+
+	/**
+	 * 销毁笔刷管理器
+	 */
+	dispose() {
+		// 解绑事件
+		// this._unbindEraserEvents();
+
+		// 取消进行中的擦除操作
+		this.cancelErasing();
+
+		// 清理状态管理器
+		if (this.eraserStateManager) {
+			this.eraserStateManager = null;
+		}
+
+		// 销毁当前笔刷
+		if (this.activeBrush) {
+			this.activeBrush.destroy();
+			this.activeBrush = null;
+		}
+
+		this.canvas = null;
+	}
+}
+
+// 导出单例
+export default BrushManager;
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/data/sprayBrushData.js b/src/components/Canvas/DepthCanvas/manager/brushes/data/sprayBrushData.js
new file mode 100644
index 0000000..97420f4
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/data/sprayBrushData.js
@@ -0,0 +1,4 @@
+export const sprayBrushDataUrl =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAT0AAAE/CAMAAAADjeSkAAAyGmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOkNyZWF0b3JUb29sPkFkb2JlIEZpcmV3b3JrcyBDUzYgKE1hY2ludG9zaCk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMjEtMDUtMjdUMTQ6NTg6NTVaPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMjEtMDUtMjdUMTQ6NTk6MDJaPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgIAo8P3hwYWNrZXQgZW5kPSJ3Ij8+tc546gAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAJcEhZcwAACxIAAAsSAdLdfvwAAADnUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHxfYHoAAABNdFJOUwEGB0lKBAUAAgMICUgyCjULLw0MMQ8wDjQRMzgrOy4oEEIsEy02FBIVKh45JSkYNzoXJxYiPyYaHSAfGSEkPCMbRUNBHEtER0A+Rj1M2XzftQAAIABJREFUeNrkWtuO4zoOpARQpiTAEGwEQb8FGKC7sQ8HONiHfTj//19bJOVbkum59KR7ZjeYyc2yO64Uq4p0aPi0G233fqf3lCKt25Yl9KNHpg89hc8F8PiW3G7/3A/526L38x+bOr+EPvOE6DPO/Jufgu7vs72dZSlq+r/gHn3tbxLd8GdjFN090FrQIm+didCfit4tIF9fRk4u2l5eMW3Fge6X7/1DDpn+N7j3xnmuCww191v6Hne55fM111bHpj++cu/8zdz59oaz0h293Ep3t5luXq0e/kAK0mMPRm95By1U80dZ4bmL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";
+
+export default sprayBrushDataUrl;
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/fabric.brushes.js b/src/components/Canvas/DepthCanvas/manager/brushes/fabric.brushes.js
new file mode 100644
index 0000000..3e9d859
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/fabric.brushes.js
@@ -0,0 +1,1596 @@
+/**
+ * fabric.brushes - A collection of brushes for fabric.js (version 4 and up).
+ *
+ * Made by Arjan Haverkamp, https://www.webgear.nl
+ * Copyright 2021 Arjan Haverkamp
+ * MIT Licensed
+ * @version 1.0 - 2021-06-02
+ * @url https://github.com/av01d/fabric-brushes
+ *
+ * Inspiration sources:
+ * - https://github.com/tennisonchan/fabric-brush
+ * - https://mrdoob.com/projects/harmony/
+ * - http://perfectionkills.com/exploring-canvas-drawing-techniques/
+ */
+import { fabric } from "fabric-with-all";
+import { sprayBrushDataUrl } from "./data/sprayBrushData.js";
+
+(function (fabric) {
+  /**
+   * Trim a canvas. Returns the left-top coordinate where trimming began.
+   * @param {canvas} canvas A canvas element to trim. This element will be trimmed (reference).
+   * @returns {Object} Left-top coordinate of trimmed area. Example: {x:65, y:104}
+   * @see: https://stackoverflow.com/a/22267731/3360038
+   */
+  fabric.util.trimCanvas = function (canvas) {
+    var ctx = canvas.getContext("2d"),
+      w = canvas.width,
+      h = canvas.height,
+      pix = { x: [], y: [] },
+      n,
+      imageData = ctx.getImageData(0, 0, w, h),
+      fn = function (a, b) {
+        return a - b;
+      };
+    for (var y = 0; y < h; y++) {
+      for (var x = 0; x < w; x++) {
+        if (imageData.data[(y * w + x) * 4 + 3] > 0) {
+          pix.x.push(x);
+          pix.y.push(y);
+        }
+      }
+    }
+    pix.x.sort(fn);
+    pix.y.sort(fn);
+    n = pix.x.length - 1;
+    //if (n == -1) {
+    //	// Nothing to trim... empty canvas?
+    //}
+
+    w = pix.x[n] - pix.x[0];
+    h = pix.y[n] - pix.y[0];
+    if (!w) {
+      return;
+    }
+    var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);
+
+    canvas.width = w;
+    canvas.height = h;
+    ctx.putImageData(cut, 0, 0);
+
+    return { x: pix.x[0], y: pix.y[0] };
+  };
+
+  /**
+   * Extract r,g,b,a components from any valid color.
+   * Returns {undefined} when color cannot be parsed.
+   *
+   * @param {number} color Any color string (named, hex, rgb, rgba)
+   * @returns {(Array|undefined)} Example: [0,128,255,1]
+   * @see https://gist.github.com/oriadam/396a4beaaad465ca921618f2f2444d49
+   */
+  fabric.util.colorValues = function (color) {
+    if (!color) {
+      return;
+    }
+    if (color.toLowerCase() === "transparent") {
+      return [0, 0, 0, 0];
+    }
+    if (color[0] === "#") {
+      if (color.length < 7) {
+        // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
+        color =
+          "#" +
+          color[1] +
+          color[1] +
+          color[2] +
+          color[2] +
+          color[3] +
+          color[3] +
+          (color.length > 4 ? color[4] + color[4] : "");
+      }
+      return [
+        parseInt(color.substr(1, 2), 16),
+        parseInt(color.substr(3, 2), 16),
+        parseInt(color.substr(5, 2), 16),
+        color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1,
+      ];
+    }
+    if (color.indexOf("rgb") === -1) {
+      // convert named colors
+      var tempElem = document.body.appendChild(document.createElement("fictum")); // intentionally use unknown tag to lower chances of css rule override with !important
+      var flag = "rgb(1, 2, 3)"; // this flag tested on chrome 59, ff 53, ie9, ie10, ie11, edge 14
+      tempElem.style.color = flag;
+      if (tempElem.style.color !== flag) {
+        return; // color set failed - some monstrous css rule is probably taking over the color of our object
+      }
+      tempElem.style.color = color;
+      if (tempElem.style.color === flag || tempElem.style.color === "") {
+        return; // color parse failed
+      }
+      color = getComputedStyle(tempElem).color;
+      document.body.removeChild(tempElem);
+    }
+    if (color.indexOf("rgb") === 0) {
+      if (color.indexOf("rgba") === -1) {
+        color += ",1"; // convert 'rgb(R,G,B)' to 'rgb(R,G,B)A' which looks awful but will pass the regxep below
+      }
+      return color.match(/[.\d]+/g).map(function (a) {
+        return +a;
+      });
+    }
+  };
+
+  fabric.Point.prototype.angleBetween = function (that) {
+    return Math.atan2(this.x - that.x, this.y - that.y);
+  };
+
+  fabric.Point.prototype.normalize = function (thickness) {
+    if (null === thickness || undefined === thickness) {
+      thickness = 1;
+    }
+
+    var length = this.distanceFrom({ x: 0, y: 0 });
+
+    if (length > 0) {
+      this.x = (this.x / length) * thickness;
+      this.y = (this.y / length) * thickness;
+    }
+
+    return this;
+  };
+
+  /**
+   * Convert a brush drawing on the upperCanvas to an image on the fabric canvas.
+   * This makes the drawing editable, it can be moved, rotated, scaled, skewed etc.
+   */
+  fabric.BaseBrush.prototype.convertToPath = function () {
+    var pixelRatio = this.canvas.getRetinaScaling(),
+      c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
+      xy = fabric.util.trimCanvas(c),
+      path = this._points
+        .map((arr) => {
+          arr[1] = arr[1] / this.canvas.getZoom();
+          arr[2] = arr[2] / this.canvas.getZoom();
+          return arr.join(" ");
+        })
+        .join(" "),
+      pathElemetn = new fabric.Path(path);
+    if (!xy) {
+      return;
+    }
+    let pointerX = this.canvas.viewportTransform[4];
+    let pointerY = this.canvas.viewportTransform[5];
+    pathElemetn
+      .set({
+        strokeDashArray: [this._width * 3, this._width * 3],
+        strokeWidth: this._width,
+        stroke: "black",
+        fill: "transparent",
+        custom: {
+          dashed: true,
+        },
+      })
+      .setCoords();
+    let group = new fabric.Group([pathElemetn], {
+      left: (xy.x / pixelRatio - pointerX) / this.canvas.getZoom(),
+      top: (xy.y / pixelRatio - pointerY) / this.canvas.getZoom(),
+      custom: {
+        dashed: true,
+      },
+    });
+
+    this.canvas.add(group).clearContext(this.canvas.contextTop);
+    this.canvas.clearContext(this.canvas.contextTop);
+  };
+
+  fabric.BaseBrush.prototype.convertToImg = function () {
+    var pixelRatio = this.canvas.getRetinaScaling(),
+      c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
+      xy = fabric.util.trimCanvas(c),
+      img = new fabric.Image(c);
+    if (!xy) {
+      return;
+    }
+    let pointerX = this.canvas.viewportTransform[4];
+    let pointerY = this.canvas.viewportTransform[5];
+    img
+      .set({
+        left: (xy.x / pixelRatio - pointerX) / this.canvas.getZoom(),
+        top: (xy.y / pixelRatio - pointerY) / this.canvas.getZoom(),
+        scaleX: 1 / pixelRatio / this.canvas.getZoom(),
+        scaleY: 1 / pixelRatio / this.canvas.getZoom(),
+        custom: {
+          type: "pencil",
+        },
+      })
+      .setCoords();
+    // 检查是否有图像处理回调函数
+    const result = this.canvas?.onBrushImageConverted?.(img);
+    !result && this.canvas.add(img);
+    this.canvas.clearContext(this.canvas.contextTop);
+  };
+
+  fabric.util.getRandom = function (max, min) {
+    min = min ? min : 0;
+    return Math.random() * ((max ? max : 1) - min) + min;
+  };
+
+  fabric.util.clamp = function (n, max, min) {
+    if (typeof min !== "number") {
+      min = 0;
+    }
+    return n > max ? max : n < min ? min : n;
+  };
+
+  fabric.Stroke = fabric.util.createClass(fabric.Object, {
+    color: null,
+    inkAmount: null,
+    lineWidth: null,
+
+    _point: null,
+    _lastPoint: null,
+    _currentLineWidth: null,
+
+    initialize: function (ctx, pointer, range, color, lineWidth, inkAmount) {
+      var rx = fabric.util.getRandom(range),
+        c = fabric.util.getRandom(Math.PI * 2),
+        c0 = fabric.util.getRandom(Math.PI * 2),
+        x0 = rx * Math.sin(c0),
+        y0 = (rx / 2) * Math.cos(c0),
+        cos = Math.cos(c),
+        sin = Math.sin(c);
+
+      this.ctx = ctx;
+      this.color = color;
+      this._point = new fabric.Point(
+        pointer.x + x0 * cos - y0 * sin,
+        pointer.y + x0 * sin + y0 * cos
+      );
+      this.lineWidth = lineWidth;
+      this.inkAmount = inkAmount;
+      this._currentLineWidth = lineWidth;
+
+      ctx.lineCap = "round";
+    },
+
+    update: function (pointer, subtractPoint, distance) {
+      this._lastPoint = fabric.util.object.clone(this._point);
+      this._point = this._point.addEquals({
+        x: subtractPoint.x,
+        y: subtractPoint.y,
+      });
+      var n = this.inkAmount / (distance + 1),
+        per = n > 0.3 ? 0.2 : n < 0 ? 0 : n;
+      this._currentLineWidth = this.lineWidth * per;
+    },
+
+    draw: function () {
+      var ctx = this.ctx;
+      ctx.save();
+      this.line(ctx, this._lastPoint, this._point, this.color, this._currentLineWidth);
+      ctx.restore();
+    },
+
+    line: function (ctx, point1, point2, color, lineWidth) {
+      ctx.strokeStyle = color;
+      ctx.lineWidth = lineWidth;
+      ctx.beginPath();
+      ctx.moveTo(point1.x, point1.y);
+      ctx.lineTo(point2.x, point2.y);
+      ctx.stroke();
+    },
+  });
+
+  /**
+   * CrayonBrush
+   * Based on code by Tennison Chan.
+   */
+  fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 0.6,
+    width: 30,
+
+    _baseWidth: 15,
+    _inkAmount: 10,
+    _latestStrokeLength: 0,
+    _point: null,
+    _sep: 3,
+    _size: 0,
+    _latest: null,
+    _drawn: false,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      this._baseWidth = this.width / 2;
+      this._point = new fabric.Point(0, 0);
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this._size = this.width / 2 + this._baseWidth;
+      this._drawn = false;
+      this.set(pointer);
+    },
+
+    onMouseMove: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this.update(pointer);
+      this.draw(this.canvas.contextTop);
+    },
+
+    onMouseUp: function () {
+      if (this._drawn) {
+        this.convertToImg();
+      }
+      this._latest = null;
+      this._latestStrokeLength = 0;
+      this.canvas.contextTop.globalAlpha = 1;
+    },
+
+    set: function (p) {
+      if (this._latest) {
+        this._latest.setFromPoint(this._point);
+      } else {
+        this._latest = new fabric.Point(p.x, p.y);
+      }
+      fabric.Point.prototype.setFromPoint.call(this._point, p);
+    },
+
+    update: function (p) {
+      this.set(p);
+      this._latestStrokeLength = this._point.subtract(this._latest).distanceFrom({ x: 0, y: 0 });
+    },
+
+    draw: function (ctx) {
+      var i, j, p, r, c, x, y, w, h, v, s, stepNum, dotSize, dotNum, range;
+
+      v = this._point.subtract(this._latest);
+      s = Math.ceil(this._size / 2);
+      stepNum = Math.floor(v.distanceFrom({ x: 0, y: 0 }) / s) + 1;
+      v.normalize(s);
+
+      dotSize =
+        this._sep * fabric.util.clamp((this._inkAmount / this._latestStrokeLength) * 3, 1, 0.5);
+      dotNum = Math.ceil(this._size * this._sep);
+
+      range = this._size / 2;
+
+      ctx.save();
+      ctx.fillStyle = this.color;
+      ctx.beginPath();
+      for (i = 0; i < dotNum; i++) {
+        for (j = 0; j < stepNum; j++) {
+          p = this._latest.add(v.multiply(j));
+          r = fabric.util.getRandom(range);
+          c = fabric.util.getRandom(Math.PI * 2);
+          w = fabric.util.getRandom(dotSize, dotSize / 2);
+          h = fabric.util.getRandom(dotSize, dotSize / 2);
+          x = p.x + r * Math.sin(c) - w / 2;
+          y = p.y + r * Math.cos(c) - h / 2;
+          ctx.rect(x, y, w, h);
+        }
+      }
+      ctx.fill();
+      ctx.restore();
+      this._drawn = true;
+    },
+
+    _render: function () {},
+  }); // End CrayonBrush
+
+  /**
+   * FurBrush
+   * Based on code by Mr. Doob.
+   */
+  fabric.FurBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 1,
+
+    _count: 0,
+    _points: [],
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || 1;
+    },
+
+    onMouseDown: function (pointer) {
+      // 添加坐标转换处理画布缩放和偏移
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+
+      this._points = [pointer];
+      this._count = 0;
+
+      var ctx = this.canvas.contextTop,
+        color = fabric.util.colorValues(this.color);
+
+      ctx.strokeStyle =
+        "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + 0.1 * this.opacity + ")";
+      ctx.lineWidth = this.width;
+
+      this._points.push(pointer);
+    },
+
+    onMouseMove: function (pointer) {
+      // 添加坐标转换处理画布缩放和偏移
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+
+      this._points.push(pointer);
+
+      var i,
+        dx,
+        dy,
+        d,
+        ctx = this.canvas.contextTop,
+        points = this._points,
+        lastPoint = points[points.length - 2];
+
+      ctx.beginPath();
+      ctx.moveTo(lastPoint.x, lastPoint.y);
+      ctx.lineTo(pointer.x, pointer.y);
+      ctx.stroke();
+
+      for (i = 0; i < this._points.length; i++) {
+        dx = this._points[i].x - this._points[this._count].x;
+        dy = this._points[i].y - this._points[this._count].y;
+        d = dx * dx + dy * dy;
+
+        if (d < 2000 && Math.random() > d / 2000) {
+          ctx.beginPath();
+          ctx.moveTo(pointer.x + dx * 0.5, pointer.y + dy * 0.5);
+          ctx.lineTo(pointer.x - dx * 0.5, pointer.y - dy * 0.5);
+          ctx.stroke();
+        }
+      }
+
+      this._count++;
+    },
+
+    onMouseUp: function (pointer) {
+      if (this._count > 0) {
+        this.convertToImg();
+      }
+    },
+
+    _render: function () {},
+  }); // End FurBrush
+
+  /**
+   * InkBrush
+   * Based on code by Tennison Chan.
+   */
+  fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 30,
+
+    _baseWidth: 15,
+    _inkAmount: 7,
+    _lastPoint: null,
+    _point: null,
+    _range: 10,
+    _strokes: null,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      this._baseWidth = this.width;
+      this._point = new fabric.Point();
+    },
+
+    _render: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      var len,
+        i,
+        point = this.setPointer(pointer),
+        subtractPoint = point.subtract(this._lastPoint),
+        distance = point.distanceFrom(this._lastPoint),
+        stroke;
+      for (i = 0, len = this._strokes.length; i < len; i++) {
+        stroke = this._strokes[i];
+        stroke.update(point, subtractPoint, distance);
+        stroke.draw();
+      }
+
+      if (distance > 30) {
+        this.drawSplash(point, this._inkAmount);
+      }
+    },
+
+    onMouseDown: function (pointer) {
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this._resetTip(pointer);
+    },
+
+    onMouseMove: function (pointer) {
+      if (this.canvas._isCurrentlyDrawing) {
+        this._render(pointer);
+      }
+    },
+
+    onMouseUp: function () {
+      this.convertToImg();
+      this.canvas.contextTop.globalAlpha = 1;
+    },
+    hexToRgba: function (hex, alpha) {},
+    drawSplash: function (pointer, maxSize) {
+      var c,
+        r,
+        i,
+        point,
+        ctx = this.canvas.contextTop,
+        num = fabric.util.getRandom(12),
+        range = maxSize * 10,
+        color = this.color;
+
+      ctx.save();
+      for (i = 0; i < num; i++) {
+        r = fabric.util.getRandom(range, 1);
+        c = fabric.util.getRandom(Math.PI * 2);
+        point = new fabric.Point(pointer.x + r * Math.sin(c), pointer.y + r * Math.cos(c));
+
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, fabric.util.getRandom(maxSize) / 2, 0, Math.PI * 2, false);
+        ctx.fill();
+      }
+      ctx.restore();
+    },
+
+    setPointer: function (pointer) {
+      var point = new fabric.Point(pointer.x, pointer.y);
+
+      this._lastPoint = fabric.util.object.clone(this._point);
+      this._point = point;
+
+      return point;
+    },
+
+    _resetTip: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      var len,
+        i,
+        point = this.setPointer(pointer);
+
+      this._strokes = [];
+      this.size = this.width;
+      this._range = this.size / 2;
+      for (i = 0, len = this.size; i < len; i++) {
+        this._strokes[i] = new fabric.Stroke(
+          this.canvas.contextTop,
+          point,
+          this._range,
+          this.color,
+          this.width + 10,
+          this._inkAmount
+        );
+      }
+    },
+  }); // End InkBrush
+
+  /**
+   * LongfurBrush
+   * Based on code by Mr. Doob.
+   */
+  fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 1,
+
+    _count: 0,
+    _points: [],
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || 1;
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._points = [pointer];
+      this._count = 0;
+
+      var ctx = this.canvas.contextTop,
+        color = fabric.util.colorValues(this.color);
+
+      //ctx.globalCompositeOperation = 'source-over';
+      ctx.strokeStyle =
+        "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + 0.05 * this.opacity + ")";
+      ctx.lineWidth = this.width;
+    },
+
+    onMouseMove: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._points.push(pointer);
+
+      var i,
+        dx,
+        dy,
+        d,
+        size,
+        ctx = this.canvas.contextTop,
+        points = this._points;
+
+      for (i = 0; i < this._points.length; i++) {
+        size = -Math.random();
+
+        dx = this._points[i].x - this._points[this._count].x;
+        dy = this._points[i].y - this._points[this._count].y;
+        d = dx * dx + dy * dy;
+
+        if (d < 1000 && Math.random() > d / 1000) {
+          ctx.beginPath();
+          ctx.moveTo(
+            this._points[this._count].x + dx * size,
+            this._points[this._count].y + dy * size
+          );
+          ctx.lineTo(
+            this._points[i].x - dx * size + Math.random() * 2,
+            this._points[i].y - dy * size + Math.random() * 2
+          );
+          ctx.stroke();
+        }
+      }
+
+      this._count++;
+    },
+
+    onMouseUp: function (pointer) {
+      if (this._count > 0) {
+        this.convertToImg();
+      }
+    },
+
+    _render: function () {},
+  }); // End LongfurBrush
+  /**
+   * WritingBrush
+   * Based on code by Tennison Chan.
+   */
+  fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 30,
+
+    _baseWidth: 15,
+    _lastPoint: null,
+    _lineWidth: 2,
+    _point: null,
+    _size: 0,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      this._baseWidth = this.width;
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this._point = new fabric.Point();
+
+      this.canvas.contextTop.lineJoin = "round";
+      this.canvas.contextTop.lineCap = "round";
+    },
+
+    _render: function (pointer) {
+      var ctx, lineWidthDiff, i, len;
+      ctx = this.canvas.contextTop;
+      ctx.beginPath();
+      // let num = this._size / this._lineWidth / 2 / 1.2
+      let num = this.width / 1.25 / 2;
+
+      for (i = 0, len = this.width / 1.25; i < len; i++) {
+        // for(i = 0, len = (this._size / this._lineWidth) / 1.2; i < len; i++) {
+        lineWidthDiff = (this._lineWidth - 1) * i;
+
+        ctx.globalAlpha = 0.8 * this.opacity;
+        ctx.moveTo(
+          this._lastPoint.x - lineWidthDiff + num,
+          this._lastPoint.y + lineWidthDiff - num
+        );
+        ctx.lineTo(pointer.x - lineWidthDiff + num, pointer.y + lineWidthDiff - num);
+        ctx.stroke();
+      }
+
+      this._lastPoint = new fabric.Point(pointer.x, pointer.y);
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = pointer;
+      this.canvas.contextTop.strokeStyle = this.color;
+      this.canvas.contextTop.lineWidth = this._lineWidth;
+      this._size = this.width + this._baseWidth;
+    },
+
+    onMouseMove: function (pointer) {
+      if (this.canvas._isCurrentlyDrawing) {
+        pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+        pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+        this._render(pointer);
+      }
+    },
+
+    onMouseUp: function () {
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this.canvas.contextTop.globalAlpha = 1;
+      this.convertToImg();
+    },
+  }); // End WritingBrush
+  /**
+   * MarkerBrush
+   * Based on code by Tennison Chan.
+   */
+  fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 30,
+
+    _baseWidth: 15,
+    _lastPoint: null,
+    _lineWidth: 2,
+    _point: null,
+    _size: 0,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      this._baseWidth = this.width;
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this._point = new fabric.Point();
+
+      this.canvas.contextTop.lineJoin = "round";
+      this.canvas.contextTop.lineCap = "round";
+    },
+
+    _render: function (pointer) {
+      var ctx, lineWidthDiff, i, len;
+      ctx = this.canvas.contextTop;
+
+      ctx.beginPath();
+      let num = this.width / 1.25 / 2;
+      for (i = 0, len = this.width / 1.25; i < len; i++) {
+        lineWidthDiff = (this._lineWidth - 1) * i;
+        ctx.globalAlpha = 0.8 * this.opacity;
+        ctx.moveTo(
+          this._lastPoint.x + lineWidthDiff - num,
+          this._lastPoint.y + lineWidthDiff - num
+        );
+        ctx.lineTo(pointer.x + lineWidthDiff - num, pointer.y + lineWidthDiff - num);
+        ctx.stroke();
+      }
+
+      this._lastPoint = new fabric.Point(pointer.x, pointer.y);
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = pointer;
+      this.canvas.contextTop.strokeStyle = this.color;
+      this.canvas.contextTop.lineWidth = this._lineWidth;
+      this._size = this.width + this._baseWidth / 2;
+    },
+
+    onMouseMove: function (pointer) {
+      if (this.canvas._isCurrentlyDrawing) {
+        pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+        pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+        this._render(pointer);
+      }
+    },
+
+    onMouseUp: function () {
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this.canvas.contextTop.globalAlpha = 1;
+      this.convertToImg();
+    },
+  }); // End MarkerBrush
+  /**
+   * test
+   * Based on code by Tennison Chan.
+   */
+  fabric.Test = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+
+    _points: [],
+
+    _width: 2,
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+      this.canvas = canvas;
+      this._width = opt._width || this._width;
+      this.color = opt.color || this.color;
+    },
+
+    _render: function (pointer) {
+      var ctx, lineWidthDiff, i, len;
+      ctx = this.canvas.contextTop;
+
+      this._points.push(["L", pointer.x, pointer.y]);
+
+      // if(this._points.length % 10 < 5){
+      let points = this._points;
+      ctx.beginPath();
+      ctx.moveTo(points[points.length - 2][1], points[points.length - 2][2]);
+      ctx.lineTo(points[points.length - 1][1], points[points.length - 1][2]);
+      ctx.stroke();
+      // }
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._points = [];
+      this._points.push(["M", pointer.x, pointer.y]);
+
+      var ctx = this.canvas.contextTop;
+      ctx.strokeStyle = "rgba(" + 0 + "," + 0 + "," + 0 + "," + 1 + ")";
+      ctx.lineWidth = this._width * this.canvas.getZoom();
+      ctx.lineJoin = ctx.lineCap = "round";
+    },
+
+    onMouseMove: function (pointer) {
+      if (this.canvas._isCurrentlyDrawing) {
+        pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+        pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+        this._render(pointer);
+      }
+    },
+
+    onMouseUp: function () {
+      this._points.push(["Z"]);
+      this.convertToPath();
+    },
+  }); // End test
+
+  /**
+   * MarkerBrush
+   * Based on code by Tennison Chan.
+   */
+  fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 30,
+    content: 0,
+
+    _baseWidth: 15,
+    _lastPoint: null,
+    _lineWidth: 2,
+    _point: null,
+    _size: 0,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      this._baseWidth = this.width;
+      this.content = opt.content || canvas.width / 2;
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this._point = new fabric.Point();
+
+      this.canvas.contextTop.lineJoin = "round";
+      this.canvas.contextTop.lineCap = "round";
+    },
+
+    _render: function (pointer) {
+      var ctx, lineWidthDiff, i, len;
+
+      ctx = this.canvas.contextTop;
+
+      ctx.beginPath();
+
+      for (i = 0, len = this._size / this._lineWidth / 2; i < len; i++) {
+        lineWidthDiff = (this._lineWidth - 1) * i;
+        let half = this.canvas.width / 2;
+        ctx.globalAlpha = 0.8 * this.opacity;
+        ctx.moveTo(this._lastPoint.x, this._lastPoint.y);
+        let x =
+          this.content > this._lastPoint.x
+            ? this.content - this._lastPoint.x + this.content
+            : this.content * 2 - this._lastPoint.x;
+        ctx.lineTo(x, this._lastPoint.y);
+        // ctx.lineTo(pointer.y + lineWidthDiff,pointer.x + lineWidthDiff);
+        ctx.stroke();
+      }
+
+      this._lastPoint = new fabric.Point(pointer.x, pointer.y);
+    },
+
+    onMouseDown: function (pointer) {
+      // 添加坐标转换处理画布缩放和偏移
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+
+      this._lastPoint = pointer;
+      this.canvas.contextTop.strokeStyle = this.color;
+      this.canvas.contextTop.lineWidth = this._lineWidth;
+      this._size = this.width + this._baseWidth;
+    },
+
+    onMouseMove: function (pointer) {
+      if (this.canvas._isCurrentlyDrawing) {
+        // 添加坐标转换处理画布缩放和偏移
+        pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+        pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+
+        this._render(pointer);
+      }
+    },
+
+    onMouseUp: function () {
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this.canvas.contextTop.globalAlpha = 1;
+      this.convertToImg();
+    },
+  }); // End MarkerBrush1
+  /**
+   * PenBrush
+   * Based on code by Tennison Chan.
+   */
+  fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 30,
+
+    _baseWidth: 15,
+    _lastPoint: null,
+    _lineWidth: 2,
+    _point: null,
+    _size: 0,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      this._baseWidth = this.width;
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this._point = new fabric.Point();
+
+      this.canvas.contextTop.lineJoin = "round";
+      this.canvas.contextTop.lineCap = "round";
+    },
+
+    _render: function (pointer) {
+      var ctx, lineWidthDiff, i, len;
+      ctx = this.canvas.contextTop;
+      ctx.beginPath();
+      // let num = this._size / this._lineWidth / 2 / 1.2
+      let num = this.width / 1.25 / 2;
+      for (i = 0, len = this.width / 1.25; i < len; i++) {
+        // for(i = 0, len = (this._size / this._lineWidth) / 1.2; i < len; i++) {
+        var randomNum = Math.random() * (0.6 - 0.2) + 0.2;
+        var color = this.color.replace(/1(?=\))/, randomNum);
+        this.canvas.contextTop.strokeStyle = color;
+
+        lineWidthDiff = (this._lineWidth - 1) * i;
+
+        ctx.globalAlpha = 0.8 * this.opacity;
+        ctx.moveTo(this._lastPoint.x, this._lastPoint.y + lineWidthDiff - num);
+        ctx.lineTo(pointer.x, pointer.y + lineWidthDiff - num);
+        ctx.stroke();
+      }
+
+      this._lastPoint = new fabric.Point(pointer.x, pointer.y);
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = pointer;
+      this.canvas.contextTop.lineWidth = this._lineWidth;
+      this._size = this.width + this._baseWidth;
+    },
+
+    onMouseMove: function (pointer) {
+      if (this.canvas._isCurrentlyDrawing) {
+        pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+        pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+        this._render(pointer);
+      }
+    },
+
+    onMouseUp: function () {
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      this.canvas.contextTop.globalAlpha = 1;
+      this.convertToImg();
+    },
+  }); // End PenBrush
+  /**
+   * RibbonBrush
+   * Based on code by Mr. Doob.
+   */
+  fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 1,
+
+    _nrPainters: 50,
+    _painters: [],
+    _lastPoint: null,
+    _interval: null,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this._nrPainters = opt._nrPainters || this._nrPainters;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      for (var i = 0; i < this._nrPainters; i++) {
+        this._painters.push({
+          dx: this.canvas.width / 2,
+          dy: this.canvas.height / 2,
+          ax: 0,
+          ay: 0,
+          div: 0.1,
+          ease: Math.random() * 0.2 + 0.6,
+        });
+      }
+    },
+
+    update: function () {
+      var ctx = this.canvas.contextTop,
+        painters = this._painters;
+      for (var i = 0; i < painters.length; i++) {
+        ctx.beginPath();
+        ctx.moveTo(painters[i].dx, painters[i].dy);
+        painters[i].dx -= painters[i].ax =
+          (painters[i].ax + (painters[i].dx - this._lastPoint.x) * painters[i].div) *
+          painters[i].ease;
+        painters[i].dy -= painters[i].ay =
+          (painters[i].ay + (painters[i].dy - this._lastPoint.y) * painters[i].div) *
+          painters[i].ease;
+        ctx.lineTo(painters[i].dx, painters[i].dy);
+        ctx.stroke();
+      }
+    },
+
+    onMouseDown: function (pointer) {
+      var ctx = this.canvas.contextTop,
+        color = fabric.util.colorValues(this.color);
+
+      this._painters = [];
+      for (var i = 0; i < this._nrPainters; i++) {
+        this._painters.push({
+          dx: this.canvas.width / 2,
+          dy: this.canvas.height / 2,
+          ax: 0,
+          ay: 0,
+          div: 0.1,
+          ease: Math.random() * 0.2 + 0.6,
+        });
+      }
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = pointer;
+
+      //ctx.globalCompositeOperation = 'source-over';
+      ctx.strokeStyle =
+        "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + 0.05 * this.opacity + ")";
+      ctx.lineWidth = this.width;
+
+      for (let i = 0; i < this._nrPainters; i++) {
+        this._painters[i].dx = pointer.x;
+        this._painters[i].dy = pointer.y;
+      }
+
+      var self = this;
+      this._interval = setInterval(function () {
+        self.update();
+      }, 1000 / 60);
+    },
+
+    onMouseMove: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = pointer;
+    },
+
+    onMouseUp: function (pointer) {
+      clearInterval(this._interval);
+      this.convertToImg();
+    },
+
+    _render: function () {},
+  }); // End RibbonBrush
+
+  /**
+   * ShadedBrush
+   * Based on code by Mr. Doob.
+   */
+  fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 0.3,
+    width: 1,
+    shadeDistance: 1000,
+
+    _points: [],
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+      this.shadeDistance = opt.shadeDistance || 1000;
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._points = [pointer];
+
+      var ctx = this.canvas.contextTop,
+        color = fabric.util.colorValues(this.color);
+
+      ctx.strokeStyle =
+        "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + this.opacity + ")";
+      ctx.lineWidth = this.width;
+      ctx.lineJoin = ctx.lineCap = "round";
+    },
+
+    onMouseMove: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._points.push(pointer);
+
+      var ctx = this.canvas.contextTop,
+        points = this._points,
+        dx,
+        dy,
+        d; // 在此处声明变量
+
+      ctx.beginPath();
+      ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y);
+      ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y);
+      ctx.stroke();
+
+      for (var i = 0, len = points.length; i < len; i++) {
+        dx = points[i].x - points[points.length - 1].x;
+        dy = points[i].y - points[points.length - 1].y;
+        d = dx * dx + dy * dy;
+
+        if (d < this.shadeDistance) {
+          ctx.beginPath();
+          ctx.moveTo(
+            points[points.length - 1].x + dx * 0.2,
+            points[points.length - 1].y + dy * 0.2
+          );
+          ctx.lineTo(points[i].x - dx * 0.2, points[i].y - dy * 0.2);
+          ctx.stroke();
+        }
+      }
+    },
+
+    onMouseUp: function (pointer) {
+      if (this._points.length > 1) {
+        this.convertToImg();
+      }
+    },
+
+    _render: function () {},
+  }); // End ShadedBrush
+
+  /**
+   * SketchyBrush
+   * Based on code by Mr. Doob.
+   */
+  fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 1,
+
+    _count: 0,
+    _points: [],
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || this.opacity;
+    },
+
+    onMouseDown: function (pointer) {
+      this.canvas.contextTop.globalAlpha = this.opacity;
+
+      // 坐标转换
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+
+      this._points = [pointer];
+      this._count = 0;
+      this._drawn = false;
+
+      // 设置绘图样式
+      var ctx = this.canvas.contextTop;
+      var color = fabric.util.colorValues(this.color);
+
+      ctx.lineWidth = this.width;
+      ctx.strokeStyle =
+        "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + 0.3 * this.opacity + ")";
+    },
+
+    onMouseMove: function (pointer) {
+      // 坐标转换
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+
+      this._points.push(pointer);
+
+      var i, dx, dy, d;
+      var factor = 0.3 * this.width;
+      var ctx = this.canvas.contextTop;
+      var points = this._points;
+      var lastPoint = points.length > 1 ? points[points.length - 2] : points[0]; // 修复第一次无上一个点的问题
+
+      // 绘制主线条
+      ctx.beginPath();
+      ctx.moveTo(lastPoint.x, lastPoint.y);
+      ctx.lineTo(pointer.x, pointer.y);
+      ctx.stroke();
+
+      // 增加透明度设置
+      var color = fabric.util.colorValues(this.color);
+      ctx.strokeStyle =
+        "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + 0.2 * this.opacity + ")";
+
+      // 修改循环逻辑，确保在有点时能画出效果
+      if (this._count > 0) {
+        // 确保有历史点可用
+        for (i = 0; i < points.length; i++) {
+          dx = points[i].x - points[this._count].x;
+          dy = points[i].y - points[this._count].y;
+          d = dx * dx + dy * dy;
+
+          if (d < 4000 && Math.random() > d / 2000) {
+            ctx.beginPath();
+            ctx.moveTo(points[this._count].x + dx * factor, points[this._count].y + dy * factor);
+            ctx.lineTo(points[i].x - dx * factor, points[i].y - dy * factor);
+            ctx.stroke();
+            this._drawn = true;
+          }
+        }
+      }
+
+      this._count++;
+    },
+
+    onMouseUp: function (pointer) {
+      if (this._count > 0 || this._drawn) {
+        this.convertToImg();
+      }
+      this.canvas.contextTop.globalAlpha = 1;
+    },
+
+    _render: function () {},
+  }); // End SketchyBrush
+
+  /**
+   * SpraypaintBrush
+   * Based on code by Tennison Chan.
+   */
+  fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 30,
+
+    _baseWidth: 40,
+    _inkAmount: 0,
+    _interval: 20,
+    _lastPoint: null,
+    _point: null,
+    brush: null,
+    sprayBrushDataUrl: sprayBrushDataUrl,
+
+    initialize: function (canvas, opt) {
+      var self = this;
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.opacity = opt.opacity || this.opacity;
+      this.color = opt.color || this.color;
+
+      this.canvas.contextTop.lineJoin = "round";
+      this.canvas.contextTop.lineCap = "round";
+
+      this._reset();
+
+      fabric.Image.fromURL(
+        this.sprayBrushDataUrl,
+        function (brush) {
+          self.brush = brush;
+          self.brush.filters = [];
+          self._setColor(self.color || this.color);
+        },
+        { crossOrigin: "anonymous" }
+      );
+    },
+
+    _setColor: function (color) {
+      this.color = color;
+      this.brush.filters[0] = new fabric.Image.filters.BlendColor({
+        color: color,
+        alpha: 1,
+        mode: "tint",
+      });
+      this.brush.applyFilters();
+    },
+
+    onMouseDown: function (pointer) {
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._point = new fabric.Point(pointer.x, pointer.y);
+      this._lastPoint = this._point;
+
+      // this.size = this.width + this._baseWidth;
+      this.size = this.width + this.width / 2;
+      this._inkAmount = 0;
+
+      this._setColor(this.color);
+      this._render();
+    },
+
+    onMouseMove: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = this._point;
+      this._point = new fabric.Point(pointer.x, pointer.y);
+    },
+
+    onMouseUp: function () {
+      var self = this;
+      setTimeout(function () {
+        self.convertToImg();
+        self._reset();
+      }, this._interval);
+    },
+
+    _render: function () {
+      var self = this;
+
+      function draw() {
+        var point, distance, angle, amount, x, y;
+
+        point = new fabric.Point(self._point.x || 0, self._point.y || 0);
+        distance = point.distanceFrom(self._lastPoint);
+        angle = point.angleBetween(self._lastPoint);
+        amount = 100 / self.size / (Math.pow(distance, 2) + 1);
+
+        self._inkAmount += amount;
+        self._inkAmount = Math.max(self._inkAmount - distance / 10, 0);
+
+        x = self._lastPoint.x + Math.sin(angle) - self.size / 2;
+        y = self._lastPoint.y + Math.cos(angle) - self.size / 2;
+        self.canvas.contextTop.drawImage(self.brush._element, x, y, self.size, self.size);
+
+        if (self.canvas._isCurrentlyDrawing) {
+          setTimeout(draw, self._interval);
+        } else {
+          self._reset();
+        }
+      }
+
+      draw();
+    },
+
+    _reset: function () {
+      this._point = null;
+      this._lastPoint = null;
+      this.canvas.contextTop.globalAlpha = 1;
+    },
+  }); // End SpraypaintBrush
+
+  /**
+   * SquaresBrush
+   * Based on code by Mr. Doob.
+   */
+  fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    bgColor: "#fff",
+    opacity: 1,
+    width: 1,
+
+    _lastPoint: null,
+    _drawn: false,
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.bgColor = opt.bgColor || "#fff";
+      this.opacity = opt.opacity || this.opacity;
+    },
+
+    onMouseDown: function (pointer) {
+      var ctx = this.canvas.contextTop,
+        color = fabric.util.colorValues(this.color),
+        bgColor = fabric.util.colorValues(this.bgColor);
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._lastPoint = pointer;
+      this._drawn = false;
+
+      //ctx.globalCompositeOperation = 'source-over';
+      this.canvas.contextTop.globalAlpha = this.opacity;
+      ctx.fillStyle =
+        "rgba(" + bgColor[0] + "," + bgColor[1] + "," + bgColor[2] + "," + bgColor[3] + ")";
+      ctx.strokeStyle = "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + color[3] + ")";
+      ctx.lineWidth = this.width;
+    },
+
+    onMouseMove: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      var ctx = this.canvas.contextTop,
+        dx = pointer.x - this._lastPoint.x,
+        dy = pointer.y - this._lastPoint.y,
+        angle = 1.57079633,
+        px = Math.cos(angle) * dx - Math.sin(angle) * dy,
+        py = Math.sin(angle) * dx + Math.cos(angle) * dy;
+
+      ctx.beginPath();
+      ctx.moveTo(this._lastPoint.x - px, this._lastPoint.y - py);
+      ctx.lineTo(this._lastPoint.x + px, this._lastPoint.y + py);
+      ctx.lineTo(pointer.x + px, pointer.y + py);
+      ctx.lineTo(pointer.x - px, pointer.y - py);
+      ctx.lineTo(this._lastPoint.x - px, this._lastPoint.y - py);
+      ctx.fill();
+      ctx.stroke();
+
+      this._lastPoint = pointer;
+      this._drawn = true;
+    },
+
+    onMouseUp: function (pointer) {
+      if (this._drawn) {
+        this.convertToImg();
+      }
+      this.canvas.contextTop.globalAlpha = 1;
+    },
+
+    _render: function () {},
+  }); // End SquaresBrush
+
+  /**
+   * WebBrush
+   * Based on code by Mr. Doob.
+   */
+  fabric.WebBrush = fabric.util.createClass(fabric.BaseBrush, {
+    color: "#000",
+    opacity: 1,
+    width: 1,
+
+    _count: 0,
+    _points: [],
+
+    initialize: function (canvas, opt) {
+      opt = opt || {};
+
+      this.canvas = canvas;
+      this.width = opt.width || this.width;
+      this.color = opt.color || this.color;
+      this.opacity = opt.opacity || 1;
+    },
+
+    onMouseDown: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._points = [pointer];
+      this._count = 0;
+      this._colorValues = fabric.util.colorValues(this.color);
+    },
+
+    onMouseMove: function (pointer) {
+      pointer.x = pointer.x * this.canvas.getZoom() + this.canvas.viewportTransform[4];
+      pointer.y = pointer.y * this.canvas.getZoom() + this.canvas.viewportTransform[5];
+      this._points.push(pointer);
+
+      var ctx = this.canvas.contextTop,
+        points = this._points,
+        lastPoint = points[points.length - 2],
+        colorValues = this._colorValues,
+        i,
+        dx,
+        dy,
+        d;
+
+      ctx.lineWidth = this.width;
+      ctx.strokeStyle =
+        "rgba(" +
+        colorValues[0] +
+        "," +
+        colorValues[1] +
+        "," +
+        colorValues[2] +
+        "," +
+        0.5 * this.opacity +
+        ")";
+
+      ctx.beginPath();
+      ctx.moveTo(lastPoint.x, lastPoint.y);
+      ctx.lineTo(pointer.x, pointer.y);
+      ctx.stroke();
+
+      ctx.strokeStyle =
+        "rgba(" +
+        colorValues[0] +
+        "," +
+        colorValues[1] +
+        "," +
+        colorValues[2] +
+        "," +
+        0.1 * this.opacity +
+        ")";
+
+      for (i = 0; i < points.length; i++) {
+        dx = points[i].x - points[this._count].x;
+        dy = points[i].y - points[this._count].y;
+        d = dx * dx + dy * dy;
+
+        if (d < 2500 && Math.random() > 0.9) {
+          ctx.beginPath();
+          ctx.moveTo(points[this._count].x, points[this._count].y);
+          ctx.lineTo(points[i].x, points[i].y);
+          ctx.stroke();
+        }
+      }
+      this._count++;
+    },
+
+    onMouseUp: function (pointer) {
+      if (this._count > 0) {
+        this.convertToImg();
+      }
+    },
+
+    _render: function () {},
+  }); // End WebBrush
+})(typeof fabric !== "undefined" ? fabric : require("fabric").fabric);
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/CrayonBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/CrayonBrush.js
new file mode 100644
index 0000000..629a941
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/CrayonBrush.js
@@ -0,0 +1,245 @@
+import { BaseBrush } from "../BaseBrush";
+
+/**
+ * 蜡笔笔刷
+ * 模拟蜡笔效果，具有颗粒感和纹理
+ */
+export class CrayonBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "crayon",
+      name: options.t("Canvas.Crayon"),
+      description: "模拟蜡笔效果，具有颗粒感和纹理",
+      category: options.t("Canvas.SpecialEffectsBrush"),
+      icon: "crayon",
+      ...options,
+    });
+
+    // 蜡笔笔刷特有属性
+    this._baseWidth = options._baseWidth || 15;
+    this._size = options._size || 0;
+    this._sep = options._sep || options._sep === 0 ? options._sep : 3;
+    this._inkAmount = options._inkAmount || 10;
+    this.randomness = options.randomness || 0.5; // 随机性
+    this.texture = options.texture || "default"; // 纹理类型
+	this.t = options.t
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 创建fabric原生蜡笔笔刷
+    this.brush = new fabric.CrayonBrush(this.canvas);
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+      // 更新笔刷相关属性
+      this._baseWidth = options.width / 2;
+      this._size = options.width / 2 + this._baseWidth;
+    }
+
+    if (options.color !== undefined) {
+      brush.color = options.color;
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+
+    // 蜡笔笔刷特有属性
+    if (options._baseWidth !== undefined) {
+      brush._baseWidth = options._baseWidth;
+      this._baseWidth = options._baseWidth;
+      this._size = this.width / 2 + this._baseWidth;
+    }
+
+    if (options._sep !== undefined) {
+      brush._sep = options._sep;
+      this._sep = options._sep;
+    }
+
+    if (options._inkAmount !== undefined) {
+      brush._inkAmount = options._inkAmount;
+      this._inkAmount = options._inkAmount;
+    }
+  }
+
+  /**
+   * 设置颗粒分离度
+   * @param {Number} sep 分离度值
+   */
+  setSeparation(sep) {
+    this._sep = Math.max(0.5, Math.min(10, sep));
+
+    if (this.brush) {
+      this.brush._sep = this._sep;
+    }
+
+    return this._sep;
+  }
+
+  /**
+   * 设置墨量
+   * @param {Number} amount 墨量值
+   */
+  setInkAmount(amount) {
+    this._inkAmount = Math.max(1, Math.min(50, amount));
+
+    if (this.brush) {
+      this.brush._inkAmount = this._inkAmount;
+    }
+
+    return this._inkAmount;
+  }
+
+  /**
+   * 设置随机性
+   * @param {Number} value 随机性值(0-1)
+   */
+  setRandomness(value) {
+    this.randomness = Math.max(0, Math.min(1, value));
+    return this.randomness;
+  }
+
+  /**
+   * 设置纹理类型
+   * @param {String} type 纹理类型
+   */
+  setTexture(type) {
+    this.texture = type;
+    // 实际应用可能需要更多的实现逻辑
+    return this.texture;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 定义蜡笔笔刷特有属性
+    const crayonProperties = [
+      {
+        id: "separation",
+        name: this.t('Canvas.ParticleSeparationDegree'),
+        type: "slider",
+        defaultValue: this._sep,
+        min: 0.5,
+        max: 10,
+        step: 0.5,
+        description: this.t('Canvas.ParticleSeparationDegreeDescription'),
+        category: this.t('Canvas.PencilSettings'),
+        order: 100,
+      },
+      {
+        id: "inkAmount",
+        name: this.t('Canvas.TheAmountOfInk'),
+        type: "slider",
+        defaultValue: this._inkAmount,
+        min: 1,
+        max: 50,
+        step: 1,
+        description: this.t('Canvas.TheAmountOfInkDescription'),
+        category: this.t('Canvas.PencilSettings'),
+        order: 110,
+      },
+      {
+        id: "randomness",
+        name: this.t('Canvas.randomness'),
+        type: "slider",
+        defaultValue: this.randomness,
+        min: 0,
+        max: 1,
+        step: 0.05,
+        description: this.t('Canvas.randomnessDescription'),
+        category: this.t('Canvas.PencilSettings'),
+        order: 120,
+      },
+      {
+        id: "texture",
+        name: this.t('Canvas.TextureType'),
+        type: "select",
+        defaultValue: this.texture,
+        options: [
+          { value: "default", label: this.t('Canvas.Default') },
+          { value: "rough", label: this.t('Canvas.Rough') },
+          { value: "smooth", label: this.t('Canvas.Smooth') },
+        ],
+        description: this.t('Canvas.TextureTypeDescription'),
+        category: this.t('Canvas.PencilSettings'),
+        order: 130,
+      },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...crayonProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理蜡笔笔刷特有属性
+    if (propId === "separation") {
+      this.setSeparation(value);
+      return true;
+    } else if (propId === "inkAmount") {
+      this.setInkAmount(value);
+      return true;
+    } else if (propId === "randomness") {
+      this.setRandomness(value);
+      return true;
+    } else if (propId === "texture") {
+      this.setTexture(value);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cmVjdCB4PSIxMCIgeT0iMTAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiLz48cmVjdCB4PSIyMCIgeT0iMjAiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiLz48cmVjdCB4PSIzMCIgeT0iMzAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=";
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/CustomBrushExample.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/CustomBrushExample.js
new file mode 100644
index 0000000..4b5e7ca
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/CustomBrushExample.js
@@ -0,0 +1,1344 @@
+import { BaseBrush } from "../BaseBrush";
+import { brushRegistry } from "../BrushRegistry";
+
+/**
+ * 例子：霓虹笔刷
+ * 创建带有发光效果的霓虹笔刷
+ */
+export class NeonBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "neon",
+      name: "霓虹笔",
+      description: "带有发光效果的霓虹笔刷",
+      category: "特效笔刷",
+      icon: "neon",
+      ...options,
+    });
+
+    // 霓虹笔特有属性
+    this.glowIntensity = options.glowIntensity || 10;
+    this.glowColor = options.glowColor || this.options.color || "#00ffff";
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 使用基础的铅笔笔刷
+    this.brush = new fabric.PencilBrush(this.canvas);
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 设置基本属性
+    if (options.color) {
+      brush.color = options.color;
+      // 更新发光颜色
+      this.glowColor = options.glowColor || options.color;
+    }
+
+    if (options.width !== undefined) {
+      brush.width = options.width;
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+
+    // 霓虹特有设置 - 发光效果
+    const glowSize = options.glowIntensity || this.glowIntensity;
+    brush.shadow = new fabric.Shadow({
+      color: this.glowColor,
+      blur: glowSize,
+      offsetX: 0,
+      offsetY: 0,
+    });
+
+    // 设置线条连接方式，使连接处更圆滑
+    brush.strokeLineCap = "round";
+    brush.strokeLineJoin = "round";
+
+    // 设置合成模式为"lighter"，使重叠部分更亮
+    brush.globalCompositeOperation = "lighter";
+  }
+
+  /**
+   * 设置发光强度
+   * @param {Number} intensity 发光强度
+   */
+  setGlowIntensity(intensity) {
+    this.glowIntensity = Math.max(0, Math.min(30, intensity));
+
+    // 如果笔刷已创建，更新设置
+    if (this.brush && this.brush.shadow) {
+      this.brush.shadow.blur = this.glowIntensity;
+      if (this.canvas) {
+        this.canvas.renderAll();
+      }
+    }
+
+    return this.glowIntensity;
+  }
+
+  /**
+   * 设置发光颜色
+   * @param {String} color 颜色值
+   */
+  setGlowColor(color) {
+    this.glowColor = color;
+
+    // 如果笔刷已创建，更新设置
+    if (this.brush && this.brush.shadow) {
+      this.brush.shadow.color = color;
+      if (this.canvas) {
+        this.canvas.renderAll();
+      }
+    }
+
+    return this.glowColor;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 添加霓虹笔特有属性
+    const neonProperties = [
+      {
+        id: "glowIntensity",
+        name: "发光强度",
+        type: "slider",
+        defaultValue: 10,
+        min: 1,
+        max: 30,
+        step: 1,
+        description: "霓虹笔发光效果的强度",
+        category: "特效",
+        order: 100,
+      },
+      {
+        id: "glowColor",
+        name: "发光颜色",
+        type: "color",
+        defaultValue: this.glowColor,
+        description: "发光效果的颜色",
+        category: "特效",
+        order: 110,
+      },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...neonProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理霓虹笔特有属性
+    if (propId === "glowIntensity") {
+      this.setGlowIntensity(value);
+      return true;
+    } else if (propId === "glowColor") {
+      this.setGlowColor(value);
+      return true;
+    }
+
+    return false;
+  }
+}
+
+/**
+ * 例子：彩虹笔刷
+ * 创建随着绘制会变换颜色的彩虹效果笔刷
+ */
+export class RainbowBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "rainbow",
+      name: "彩虹笔",
+      description: "绘制时会自动变换颜色的彩虹笔",
+      category: "特效笔刷",
+      icon: "rainbow",
+      ...options,
+    });
+
+    // 彩虹笔特有属性
+    this.colorSpeed = options.colorSpeed || 10; // 颜色变化速度
+    this.hue = 0; // 当前色相值
+    this.colorUpdateInterval = null;
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 使用铅笔笔刷
+    this.brush = new fabric.PencilBrush(this.canvas);
+
+    // 配置基本属性
+    this.configure(this.brush, this.options);
+
+    // 覆盖onMouseDown方法，开始颜色循环
+    const originalMouseDown = this.brush.onMouseDown;
+    this.brush.onMouseDown = (pointer, options) => {
+      // 开始颜色循环
+      this.startColorCycle();
+
+      // 调用原始方法
+      return originalMouseDown.call(this.brush, pointer, options);
+    };
+
+    // 覆盖onMouseUp方法，停止颜色循环
+    const originalMouseUp = this.brush.onMouseUp;
+    this.brush.onMouseUp = (options) => {
+      // 停止颜色循环
+      this.stopColorCycle();
+
+      // 调用原始方法
+      return originalMouseUp.call(this.brush, options);
+    };
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 设置基本属性
+    if (options.width !== undefined) {
+      brush.width = options.width;
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+
+    // 初始颜色
+    brush.color = this.getCurrentColor();
+
+    // 彩虹笔特有设置
+    brush.strokeLineCap = "round";
+    brush.strokeLineJoin = "round";
+
+    // 设置笔刷颜色变化速度
+    if (options.colorSpeed !== undefined) {
+      this.colorSpeed = options.colorSpeed;
+    }
+  }
+
+  /**
+   * 开始颜色循环
+   */
+  startColorCycle() {
+    // 停止之前的循环
+    this.stopColorCycle();
+
+    // 创建新的循环
+    this.colorUpdateInterval = setInterval(() => {
+      // 更新色相值
+      this.hue = (this.hue + this.colorSpeed) % 360;
+
+      // 更新笔刷颜色
+      if (this.brush) {
+        this.brush.color = this.getCurrentColor();
+      }
+    }, 50); // 每50ms更新一次颜色
+  }
+
+  /**
+   * 停止颜色循环
+   */
+  stopColorCycle() {
+    if (this.colorUpdateInterval) {
+      clearInterval(this.colorUpdateInterval);
+      this.colorUpdateInterval = null;
+    }
+  }
+
+  /**
+   * 获取当前HSL颜色
+   * @returns {String} HSL颜色字符串
+   */
+  getCurrentColor() {
+    return `hsl(${this.hue}, 100%, 50%)`;
+  }
+
+  /**
+   * 设置颜色变化速度
+   * @param {Number} speed 变化速度
+   */
+  setColorSpeed(speed) {
+    this.colorSpeed = Math.max(1, Math.min(50, speed));
+    return this.colorSpeed;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 添加彩虹笔特有属性
+    const rainbowProperties = [
+      {
+        id: "colorSpeed",
+        name: "颜色变化速度",
+        type: "slider",
+        defaultValue: this.colorSpeed,
+        min: 1,
+        max: 50,
+        step: 1,
+        description: "彩虹颜色变化的速度",
+        category: "特效",
+        order: 100,
+      },
+    ];
+
+    // 移除基础属性中的颜色选择器，因为彩虹笔不需要颜色选择
+    const filteredBaseProps = baseProperties.filter((prop) => prop.id !== "color");
+
+    // 合并并返回所有属性
+    return [...filteredBaseProps, ...rainbowProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理彩虹笔特有属性
+    if (propId === "colorSpeed") {
+      this.setColorSpeed(value);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 笔刷被选中
+   */
+  onSelected() {
+    // 在笔刷被选中时可以做一些初始化工作
+  }
+
+  /**
+   * 笔刷被取消选中
+   */
+  onDeselected() {
+    // 停止所有循环
+    this.stopColorCycle();
+  }
+
+  /**
+   * 销毁笔刷实例
+   */
+  destroy() {
+    this.stopColorCycle();
+    super.destroy();
+  }
+}
+
+/**
+ * 自定义笔刷示例
+ * 展示如何创建具有复杂特有属性的自定义笔刷
+ */
+export class CustomBrushExample extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "custom_example",
+      name: "特效笔刷",
+      description: "一个具有多种特效的自定义笔刷",
+      category: "效果笔刷",
+      icon: "magic",
+      ...options,
+    });
+
+    // 特有属性初始化
+    this.effectType = options.effectType || "neon";
+    this.patternType = options.patternType || "solid";
+    this.particleCount = options.particleCount || 10;
+    this.particleSize = options.particleSize || 3;
+    this.dashPattern = options.dashPattern || [0, 0]; // 实线
+    this.noiseAmount = options.noiseAmount || 0;
+    this.gradientEnabled = options.gradientEnabled || false;
+    this.gradientColors = options.gradientColors || ["#ff0000", "#ffff00", "#00ff00"];
+    this.angle = options.angle || 0;
+
+    // 材质相关属性
+    this.textureEnabled = options.textureEnabled || false;
+    this.texturePath = options.texturePath || "";
+    this.textureScale = options.textureScale || 1;
+    this.textureOpacity = options.textureOpacity || 1;
+
+    // 动画相关
+    this.animationEnabled = options.animationEnabled || false;
+    this.animationType = options.animationType || "none";
+    this.animationSpeed = options.animationSpeed || 1;
+
+    // 缓存的渐变和材质对象
+    this._gradient = null;
+    this._texture = null;
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 根据效果类型选择合适的基础笔刷
+    switch (this.effectType) {
+      case "neon":
+        this.brush = new fabric.PencilBrush(this.canvas);
+        break;
+      case "spray":
+        this.brush = new fabric.SprayBrush(this.canvas);
+        break;
+      case "pattern":
+        this.brush = new fabric.PatternBrush(this.canvas);
+        break;
+      case "custom":
+        // 创建完全自定义的笔刷
+        this.brush = this._createCustomBrush();
+        break;
+      default:
+        this.brush = new fabric.PencilBrush(this.canvas);
+    }
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 创建完全自定义的笔刷
+   * @private
+   * @returns {Object} 自定义笔刷对象
+   */
+  _createCustomBrush() {
+    // 这里可以实现完全自定义的笔刷逻辑
+    // 例如通过继承fabric.BaseBrush并覆盖其方法
+
+    // 示例：简单的自定义笔刷，这里只是概念演示
+    const customBrush = new fabric.PencilBrush(this.canvas);
+
+    // 覆盖绘制方法来实现自定义效果
+    const originalOnMouseMove = customBrush.onMouseMove;
+    customBrush.onMouseMove = (pointer, options) => {
+      // 添加自定义效果，比如随机抖动
+      if (this.noiseAmount > 0) {
+        pointer.x += (Math.random() - 0.5) * this.noiseAmount;
+        pointer.y += (Math.random() - 0.5) * this.noiseAmount;
+      }
+
+      // 调用原始方法
+      originalOnMouseMove.call(customBrush, pointer, options);
+    };
+
+    return customBrush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) {
+      return;
+    }
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+    }
+
+    if (options.color !== undefined) {
+      brush.color = options.color;
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+
+    // 根据效果类型应用不同的配置
+    switch (this.effectType) {
+      case "neon":
+        this._configureNeonEffect(brush);
+        break;
+      case "spray":
+        this._configureSprayEffect(brush);
+        break;
+      case "pattern":
+        this._configurePatternEffect(brush);
+        break;
+      case "custom":
+        this._configureCustomEffect(brush);
+        break;
+    }
+
+    // 配置虚线效果
+    if (this.patternType === "dashed" && Array.isArray(this.dashPattern)) {
+      brush.strokeDashArray = this.dashPattern;
+    } else {
+      brush.strokeDashArray = null;
+    }
+
+    // 配置渐变
+    if (this.gradientEnabled) {
+      this._configureGradient(brush);
+    }
+
+    // 配置材质
+    if (this.textureEnabled && this.texturePath) {
+      this._loadTextureImage();
+    }
+
+    // 配置动画
+    if (this.animationEnabled) {
+      this._configureAnimation(brush);
+    }
+  }
+
+  /**
+   * 配置霓虹灯效果
+   * @private
+   * @param {Object} brush 笔刷实例
+   */
+  _configureNeonEffect(brush) {
+    // 霓虹灯效果 - 添加阴影效果
+    brush.shadow = new fabric.Shadow({
+      color: brush.color,
+      blur: 15,
+      offsetX: 0,
+      offsetY: 0,
+    });
+
+    // 增加笔刷的不透明度
+    brush.opacity = Math.min(1, brush.opacity * 1.2);
+  }
+
+  /**
+   * 配置喷枪效果
+   * @private
+   * @param {Object} brush 笔刷实例
+   */
+  _configureSprayEffect(brush) {
+    if (brush.density !== undefined) {
+      brush.density = this.particleCount;
+    }
+
+    if (brush.dotWidth !== undefined) {
+      brush.dotWidth = this.particleSize;
+    }
+
+    if (brush.randomOpacity !== undefined) {
+      brush.randomOpacity = true;
+    }
+  }
+
+  /**
+   * 配置图案效果
+   * @private
+   * @param {Object} brush 笔刷实例
+   */
+  _configurePatternEffect(brush) {
+    // 如果有纹理，则使用纹理作为图案
+    if (this._texture) {
+      brush.source = this._texture;
+    } else {
+      // 否则创建简单的图案
+      const patternCanvas = document.createElement("canvas");
+      patternCanvas.width = 20;
+      patternCanvas.height = 20;
+      const ctx = patternCanvas.getContext("2d");
+
+      ctx.fillStyle = brush.color;
+
+      switch (this.patternType) {
+        case "dots":
+          // 绘制圆点
+          ctx.beginPath();
+          ctx.arc(10, 10, 5, 0, Math.PI * 2);
+          ctx.fill();
+          break;
+        case "lines":
+          // 绘制线条
+          ctx.lineWidth = 2;
+          ctx.beginPath();
+          ctx.moveTo(0, 10);
+          ctx.lineTo(20, 10);
+          ctx.stroke();
+          break;
+        default:
+          // 实心
+          ctx.fillRect(0, 0, 20, 20);
+      }
+
+      brush.source = patternCanvas;
+    }
+  }
+
+  /**
+   * 配置自定义效果
+   * @private
+   * @param {Object} brush 笔刷实例
+   */
+  _configureCustomEffect(brush) {
+    // 实现自定义效果...
+    brush.globalCompositeOperation = "source-over";
+  }
+
+  /**
+   * 配置渐变
+   * @private
+   * @param {Object} brush 笔刷实例
+   */
+  _configureGradient(brush) {
+    // 创建线性渐变
+    const gradient = new fabric.Gradient({
+      type: "linear",
+      coords: {
+        x1: 0,
+        y1: 0,
+        x2: 100,
+        y2: 0,
+      },
+      colorStops: this.gradientColors.map((color, i) => {
+        return {
+          offset: i / (this.gradientColors.length - 1),
+          color: color,
+        };
+      }),
+      gradientAngle: this.angle,
+    });
+
+    // 存储渐变
+    this._gradient = gradient;
+
+    // 在这里无法直接将渐变应用到笔刷
+    // 需要在实际绘制时使用...
+  }
+
+  /**
+   * 配置动画
+   * @private
+   * @param {Object} brush 笔刷实例
+   */
+  _configureAnimation(brush) {
+    // 动画需要在画布上持续更新
+    // 这里只是示例，实际实现需要更复杂的处理
+    if (!this._animationID) {
+      this._startAnimation();
+    }
+  }
+
+  /**
+   * 开始动画
+   * @private
+   */
+  _startAnimation() {
+    let phase = 0;
+
+    const animate = () => {
+      phase += 0.05 * this.animationSpeed;
+
+      // 执行动画效果
+      switch (this.animationType) {
+        case "pulse":
+          // 脉冲效果 - 改变大小
+          if (this.brush) {
+            const baseWidth = this.options.width || 5;
+            this.brush.width = baseWidth + Math.sin(phase) * baseWidth * 0.3;
+          }
+          break;
+        case "rainbow":
+          // 彩虹效果 - 改变颜色
+          if (this.brush) {
+            const hue = (phase * 30) % 360;
+            this.brush.color = `hsl(${hue}, 100%, 50%)`;
+          }
+          break;
+      }
+
+      // 请求下一帧
+      this._animationID = requestAnimationFrame(animate);
+    };
+
+    this._animationID = requestAnimationFrame(animate);
+  }
+
+  /**
+   * 停止动画
+   * @private
+   */
+  _stopAnimation() {
+    if (this._animationID) {
+      cancelAnimationFrame(this._animationID);
+      this._animationID = null;
+    }
+  }
+
+  /**
+   * 加载材质图片
+   * @private
+   * @returns {Promise} Promise对象
+   */
+  _loadTextureImage() {
+    return new Promise((resolve, reject) => {
+      if (!this.texturePath) {
+        this._texture = null;
+        reject(new Error("未指定材质路径"));
+        return;
+      }
+
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+
+      img.onload = () => {
+        // 创建缩放后的图案
+        const patternCanvas = document.createElement("canvas");
+        const patternContext = patternCanvas.getContext("2d");
+
+        // 调整图案大小
+        const scale = this.textureScale || 1;
+        const width = img.width * scale;
+        const height = img.height * scale;
+
+        patternCanvas.width = width;
+        patternCanvas.height = height;
+
+        // 应用透明度
+        if (this.textureOpacity < 1) {
+          patternContext.globalAlpha = this.textureOpacity;
+        }
+
+        // 绘制缩放后的图像
+        patternContext.drawImage(img, 0, 0, width, height);
+
+        this._texture = patternCanvas;
+
+        // 如果当前是图案模式，重新配置笔刷
+        if (this.effectType === "pattern" && this.brush) {
+          this.brush.source = patternCanvas;
+        }
+
+        resolve(img);
+      };
+
+      img.onerror = () => {
+        this._texture = null;
+        reject(new Error(`加载材质图片失败: ${this.texturePath}`));
+      };
+
+      img.src = this.texturePath;
+    });
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 特效类型选择
+    const effectTypeProperty = {
+      id: "effectType",
+      name: "特效类型",
+      type: "select",
+      defaultValue: this.effectType,
+      options: [
+        { value: "neon", label: "霓虹灯" },
+        { value: "spray", label: "喷枪" },
+        { value: "pattern", label: "图案" },
+        { value: "custom", label: "自定义" },
+      ],
+      description: "选择笔刷特效类型",
+      category: "特效设置",
+      order: 100,
+    };
+
+    // 定义基于特效类型的动态属性
+    const dynamicProperties = [
+      // 喷枪效果特有属性
+      {
+        id: "particleCount",
+        name: "粒子数量",
+        type: "slider",
+        defaultValue: this.particleCount,
+        min: 1,
+        max: 50,
+        step: 1,
+        description: "喷枪效果的粒子密度",
+        category: "特效设置",
+        order: 110,
+        visibleWhen: { effectType: "spray" },
+      },
+      {
+        id: "particleSize",
+        name: "粒子大小",
+        type: "slider",
+        defaultValue: this.particleSize,
+        min: 1,
+        max: 20,
+        step: 1,
+        description: "喷枪效果的粒子大小",
+        category: "特效设置",
+        order: 120,
+        visibleWhen: { effectType: "spray" },
+      },
+
+      // 图案效果特有属性
+      {
+        id: "patternType",
+        name: "图案类型",
+        type: "select",
+        defaultValue: this.patternType,
+        options: [
+          { value: "solid", label: "实心" },
+          { value: "dots", label: "圆点" },
+          { value: "lines", label: "线条" },
+          { value: "dashed", label: "虚线" },
+        ],
+        description: "选择图案类型",
+        category: "特效设置",
+        order: 130,
+        visibleWhen: (values) => values.effectType === "pattern" || values.patternType === "dashed",
+      },
+
+      // 虚线特有属性
+      {
+        id: "dashPattern1",
+        name: "虚线长度",
+        type: "slider",
+        defaultValue: this.dashPattern[0] || 5,
+        min: 1,
+        max: 20,
+        step: 1,
+        description: "虚线段的长度",
+        category: "特效设置",
+        order: 140,
+        visibleWhen: { patternType: "dashed" },
+      },
+      {
+        id: "dashPattern2",
+        name: "虚线间隔",
+        type: "slider",
+        defaultValue: this.dashPattern[1] || 5,
+        min: 1,
+        max: 20,
+        step: 1,
+        description: "虚线段之间的间隔",
+        category: "特效设置",
+        order: 150,
+        visibleWhen: { patternType: "dashed" },
+      },
+
+      // 自定义效果特有属性
+      {
+        id: "noiseAmount",
+        name: "噪点强度",
+        type: "slider",
+        defaultValue: this.noiseAmount,
+        min: 0,
+        max: 20,
+        step: 0.5,
+        description: "添加随机噪点的强度",
+        category: "特效设置",
+        order: 160,
+        visibleWhen: { effectType: "custom" },
+      },
+    ];
+
+    // 渐变相关属性
+    const gradientProperties = [
+      {
+        id: "gradientEnabled",
+        name: "启用渐变",
+        type: "checkbox",
+        defaultValue: this.gradientEnabled,
+        description: "使用渐变色代替纯色",
+        category: "渐变设置",
+        order: 200,
+      },
+      {
+        id: "gradientColor1",
+        name: "渐变颜色 1",
+        type: "color",
+        defaultValue: this.gradientColors[0] || "#ff0000",
+        description: "渐变的起始颜色",
+        category: "渐变设置",
+        order: 210,
+        visibleWhen: { gradientEnabled: true },
+      },
+      {
+        id: "gradientColor2",
+        name: "渐变颜色 2",
+        type: "color",
+        defaultValue: this.gradientColors[1] || "#ffff00",
+        description: "渐变的中间颜色",
+        category: "渐变设置",
+        order: 220,
+        visibleWhen: { gradientEnabled: true },
+      },
+      {
+        id: "gradientColor3",
+        name: "渐变颜色 3",
+        type: "color",
+        defaultValue: this.gradientColors[2] || "#00ff00",
+        description: "渐变的结束颜色",
+        category: "渐变设置",
+        order: 230,
+        visibleWhen: { gradientEnabled: true },
+      },
+      {
+        id: "angle",
+        name: "渐变角度",
+        type: "slider",
+        defaultValue: this.angle,
+        min: 0,
+        max: 360,
+        step: 5,
+        description: "渐变的方向角度",
+        category: "渐变设置",
+        order: 240,
+        visibleWhen: { gradientEnabled: true },
+      },
+    ];
+
+    // 材质相关属性
+    const textureProperties = [
+      {
+        id: "textureEnabled",
+        name: "启用材质",
+        type: "checkbox",
+        defaultValue: this.textureEnabled,
+        description: "使用图片材质",
+        category: "材质设置",
+        order: 300,
+      },
+      {
+        id: "texturePath",
+        name: "材质图片",
+        type: "file",
+        defaultValue: this.texturePath,
+        description: "上传或选择要用作笔刷的图片材质",
+        category: "材质设置",
+        order: 310,
+        accept: "image/*",
+        visibleWhen: { textureEnabled: true },
+      },
+      {
+        id: "textureScale",
+        name: "材质缩放",
+        type: "slider",
+        defaultValue: this.textureScale,
+        min: 0.1,
+        max: 5.0,
+        step: 0.1,
+        description: "调整材质图片的大小",
+        category: "材质设置",
+        order: 320,
+        visibleWhen: { textureEnabled: true },
+      },
+      {
+        id: "textureOpacity",
+        name: "材质透明度",
+        type: "slider",
+        defaultValue: this.textureOpacity,
+        min: 0.1,
+        max: 1.0,
+        step: 0.05,
+        description: "调整材质图片的透明度",
+        category: "材质设置",
+        order: 330,
+        visibleWhen: { textureEnabled: true },
+      },
+      {
+        id: "presetTextures",
+        name: "预设材质",
+        type: "texture-grid",
+        defaultValue: "",
+        options: [
+          {
+            value: "/textures/brush1.png",
+            preview: "/textures/brush1_thumb.png",
+            label: "纹理1",
+          },
+          {
+            value: "/textures/brush2.png",
+            preview: "/textures/brush2_thumb.png",
+            label: "纹理2",
+          },
+        ],
+        description: "选择预设材质图案",
+        category: "材质设置",
+        order: 340,
+        visibleWhen: { textureEnabled: true },
+        // 动态选项加载（示例）
+        dynamicOptions: (values) => {
+          // 这里可以根据其他属性值动态加载不同的材质选项
+          // 例如从服务器获取，或者根据effectType显示不同的材质集
+          const defaultOptions = [
+            {
+              value: "/textures/brush1.png",
+              preview: "/textures/brush1_thumb.png",
+              label: "纹理1",
+            },
+            {
+              value: "/textures/brush2.png",
+              preview: "/textures/brush2_thumb.png",
+              label: "纹理2",
+            },
+          ];
+
+          if (values.effectType === "neon") {
+            defaultOptions.push({
+              value: "/textures/neon_glow.png",
+              preview: "/textures/neon_glow_thumb.png",
+              label: "霓虹光晕",
+            });
+          }
+
+          return defaultOptions;
+        },
+      },
+    ];
+
+    // 动画相关属性
+    const animationProperties = [
+      {
+        id: "animationEnabled",
+        name: "启用动画",
+        type: "checkbox",
+        defaultValue: this.animationEnabled,
+        description: "为笔刷添加动态动画效果",
+        category: "动画设置",
+        order: 400,
+      },
+      {
+        id: "animationType",
+        name: "动画类型",
+        type: "select",
+        defaultValue: this.animationType,
+        options: [
+          { value: "none", label: "无" },
+          { value: "pulse", label: "脉冲" },
+          { value: "rainbow", label: "彩虹" },
+        ],
+        description: "选择动画效果类型",
+        category: "动画设置",
+        order: 410,
+        visibleWhen: { animationEnabled: true },
+      },
+      {
+        id: "animationSpeed",
+        name: "动画速度",
+        type: "slider",
+        defaultValue: this.animationSpeed,
+        min: 0.1,
+        max: 5,
+        step: 0.1,
+        description: "调整动画播放速度",
+        category: "动画设置",
+        order: 420,
+        visibleWhen: { animationEnabled: true },
+      },
+    ];
+
+    // 合并并返回所有属性
+    return [
+      ...baseProperties,
+      effectTypeProperty,
+      ...dynamicProperties,
+      ...gradientProperties,
+      ...textureProperties,
+      ...animationProperties,
+    ];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理特效笔刷特有属性
+    switch (propId) {
+      case "effectType":
+        this.effectType = value;
+        // 需要重新创建笔刷
+        if (this.canvas) {
+          this.destroy();
+          this.brush = this.create();
+        }
+        return true;
+
+      case "patternType":
+        this.patternType = value;
+        this.configure(this.brush, {});
+        return true;
+
+      case "particleCount":
+        this.particleCount = value;
+        if (this.effectType === "spray" && this.brush) {
+          this.brush.density = value;
+        }
+        return true;
+
+      case "particleSize":
+        this.particleSize = value;
+        if (this.effectType === "spray" && this.brush) {
+          this.brush.dotWidth = value;
+        }
+        return true;
+
+      case "dashPattern1":
+      case "dashPattern2": {
+        // 更新虚线模式
+        const idx = propId === "dashPattern1" ? 0 : 1;
+        this.dashPattern[idx] = value;
+        if (this.patternType === "dashed" && this.brush) {
+          this.brush.strokeDashArray = this.dashPattern;
+        }
+        return true;
+      }
+
+      case "noiseAmount":
+        this.noiseAmount = value;
+        return true;
+
+      case "gradientEnabled":
+        this.gradientEnabled = value;
+        if (value && this.brush) {
+          this._configureGradient(this.brush);
+        }
+        return true;
+
+      case "gradientColor1":
+      case "gradientColor2":
+      case "gradientColor3": {
+        const colorIdx = parseInt(propId.slice(-1)) - 1;
+        this.gradientColors[colorIdx] = value;
+        if (this.gradientEnabled && this.brush) {
+          this._configureGradient(this.brush);
+        }
+        return true;
+      }
+
+      case "angle":
+        this.angle = value;
+        if (this.gradientEnabled && this.brush) {
+          this._configureGradient(this.brush);
+        }
+        return true;
+
+      case "textureEnabled":
+        this.textureEnabled = value;
+        if (value && this.texturePath) {
+          this._loadTextureImage();
+        }
+        return true;
+
+      case "texturePath":
+        this.texturePath = value;
+        if (this.textureEnabled && value) {
+          this._loadTextureImage();
+        }
+        return true;
+
+      case "textureScale":
+        this.textureScale = value;
+        if (this.textureEnabled && this.texturePath) {
+          this._loadTextureImage();
+        }
+        return true;
+
+      case "textureOpacity":
+        this.textureOpacity = value;
+        if (this.textureEnabled && this.texturePath) {
+          this._loadTextureImage();
+        }
+        return true;
+
+      case "animationEnabled":
+        this.animationEnabled = value;
+        if (value) {
+          this._startAnimation();
+        } else {
+          this._stopAnimation();
+        }
+        return true;
+
+      case "animationType":
+        this.animationType = value;
+        return true;
+
+      case "animationSpeed":
+        this.animationSpeed = value;
+        return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    // 根据效果类型返回不同的预览图
+    switch (this.effectType) {
+      case "neon":
+        return "data:image/svg+xml;base64,..."; // 示例图
+      case "spray":
+        return "data:image/svg+xml;base64,..."; // 示例图
+      case "pattern":
+        if (this._texture) {
+          // 返回材质图
+          return this._texture.toDataURL();
+        }
+        return "data:image/svg+xml;base64,..."; // 示例图
+      default:
+        return "data:image/svg+xml;base64,..."; // 示例图
+    }
+  }
+
+  /**
+   * 笔刷被选中时调用
+   * @override
+   */
+  onSelected() {
+    // 如果启用了动画，开始动画循环
+    if (this.animationEnabled) {
+      this._startAnimation();
+    }
+  }
+
+  /**
+   * 笔刷被取消选中时调用
+   * @override
+   */
+  onDeselected() {
+    // 停止动画
+    this._stopAnimation();
+  }
+
+  /**
+   * 销毁笔刷实例并清理资源
+   * @override
+   */
+  destroy() {
+    // 停止动画
+    this._stopAnimation();
+
+    // 清理资源
+    this._gradient = null;
+    this._texture = null;
+
+    // 调用基类销毁方法
+    super.destroy();
+  }
+}
+
+// 导出函数，用于注册这些自定义笔刷
+export function registerCustomBrushes() {
+  // 注册霓虹笔刷
+  brushRegistry.register("neon", NeonBrush, {
+    name: "霓虹笔",
+    description: "带有发光效果的霓虹笔刷",
+    category: "特效笔刷",
+  });
+
+  // 注册彩虹笔刷
+  brushRegistry.register("rainbow", RainbowBrush, {
+    name: "彩虹笔",
+    description: "绘制时会自动变换颜色的彩虹笔",
+    category: "特效笔刷",
+  });
+
+  console.log("已注册自定义笔刷");
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/CustomPenBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/CustomPenBrush.js
new file mode 100644
index 0000000..4a1fa94
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/CustomPenBrush.js
@@ -0,0 +1,196 @@
+import { BaseBrush } from "../BaseBrush";
+
+/**
+ * 钢笔笔刷
+ * 模拟钢笔效果，具有变化的透明度
+ */
+export class CustomPenBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "pen",
+      name: options.t('Canvas.Pen'),
+      description: "模拟钢笔效果，具有变化的透明度",
+      category: options.t('Canvas.BasicBrushes'),
+      icon: "pen",
+      ...options,
+    });
+
+    // 钢笔笔刷特有属性
+    this._baseWidth = options._baseWidth || 15;
+    this._lineWidth = options._lineWidth || 2;
+    this.inkOpacityMin = options.inkOpacityMin || 0.2;
+    this.inkOpacityMax = options.inkOpacityMax || 0.6;
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 创建fabric原生钢笔笔刷
+    this.brush = new fabric.PenBrush(this.canvas);
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+      // 更新笔刷相关属性
+      this._baseWidth = options.width / 2;
+    }
+
+    if (options.color !== undefined) {
+      brush.color = options.color;
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+
+    // 钢笔笔刷特有属性
+    if (options._baseWidth !== undefined) {
+      brush._baseWidth = options._baseWidth;
+      this._baseWidth = options._baseWidth;
+    }
+
+    if (options._lineWidth !== undefined) {
+      brush._lineWidth = options._lineWidth;
+      this._lineWidth = options._lineWidth;
+    }
+
+    // 确保线条连接设置正确
+    brush.canvas.contextTop.lineJoin = "round";
+    brush.canvas.contextTop.lineCap = "round";
+  }
+
+  /**
+   * 设置最小墨水透明度
+   * @param {Number} opacity 透明度值(0-1)
+   */
+  setInkOpacityMin(opacity) {
+    this.inkOpacityMin = Math.max(0.1, Math.min(0.5, opacity));
+    return this.inkOpacityMin;
+  }
+
+  /**
+   * 设置最大墨水透明度
+   * @param {Number} opacity 透明度值(0-1)
+   */
+  setInkOpacityMax(opacity) {
+    this.inkOpacityMax = Math.max(0.3, Math.min(1, opacity));
+    return this.inkOpacityMax;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 定义钢笔笔刷特有属性
+    const penProperties = [
+      {
+        id: "lineWidth",
+        name: this.t('Canvas.PenWidth'),	
+        type: "slider",
+        defaultValue: this._lineWidth,
+        min: 1,
+        max: 10,
+        step: 0.5,
+        description: this.t('Canvas.PenWidthDescription'),
+        category: this.t('Canvas.PenSettings'),
+        order: 100,
+      },
+      {
+        id: "inkOpacityMin",
+        name: this.t('Canvas.PenMinimumInkTransparency'),
+        type: "slider",
+        defaultValue: this.inkOpacityMin,
+        min: 0.1,
+        max: 0.5,
+        step: 0.05,
+        description: this.t('Canvas.PenMinimumInkTransparencyDescription'),
+        category: this.t('Canvas.PenSettings'),
+        order: 110,
+      },
+      {
+        id: "inkOpacityMax",
+        name: this.t('Canvas.PenMaximumInkTransparency'),
+        type: "slider",
+        defaultValue: this.inkOpacityMax,
+        min: 0.3,
+        max: 1,
+        step: 0.05,
+        description: this.t('Canvas.PenMaximumInkTransparencyDescription'),
+        category: this.t('Canvas.PenSettings'),
+        order: 120,
+      },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...penProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理钢笔笔刷特有属性
+    if (propId === "lineWidth") {
+      this._lineWidth = value;
+      if (this.brush) {
+        this.brush._lineWidth = value;
+      }
+      return true;
+    } else if (propId === "inkOpacityMin") {
+      this.setInkOpacityMin(value);
+      return true;
+    } else if (propId === "inkOpacityMax") {
+      this.setInkOpacityMax(value);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMjAgMjBMODAgODBNMjAgODBMODAgMjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=";
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/FurBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/FurBrush.js
new file mode 100644
index 0000000..b00f8ca
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/FurBrush.js
@@ -0,0 +1,201 @@
+import { BaseBrush } from "../BaseBrush";
+
+/**
+ * 毛发笔刷
+ * 创建类似于毛发或草的效果
+ */
+export class FurBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "fur",
+      name: options.t('Canvas.Longfur'),
+      description: "创建类似于毛发或草的纹理效果",
+      category: options.t('Canvas.SpecialEffectsBrush'),
+      icon: "fur",
+      ...options,
+    });
+
+    // 毛发笔刷特有属性
+    this.furLength = options.furLength || 10;
+    this.furDensity = options.furDensity || 0.7;
+    this.furRandomness = options.furRandomness || 0.5;
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 创建fabric原生毛发笔刷
+    this.brush = new fabric.FurBrush(this.canvas);
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+    }
+
+    if (options.color !== undefined) {
+      brush.color = options.color;
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+
+    // 这里可以添加对毛发笔刷特有属性的配置
+    // 由于fabric.FurBrush的原始实现可能没有直接暴露这些属性，
+    // 我们可能需要在onMouseMove等事件中动态调整行为
+
+    // 存储特有属性，供后续使用
+    if (options.furLength !== undefined) {
+      this.furLength = options.furLength;
+    }
+
+    if (options.furDensity !== undefined) {
+      this.furDensity = options.furDensity;
+    }
+
+    if (options.furRandomness !== undefined) {
+      this.furRandomness = options.furRandomness;
+    }
+  }
+
+  /**
+   * 设置毛发长度
+   * @param {Number} length 长度值
+   */
+  setFurLength(length) {
+    this.furLength = Math.max(1, Math.min(50, length));
+    return this.furLength;
+  }
+
+  /**
+   * 设置毛发密度
+   * @param {Number} density 密度值(0-1)
+   */
+  setFurDensity(density) {
+    this.furDensity = Math.max(0.1, Math.min(1, density));
+    return this.furDensity;
+  }
+
+  /**
+   * 设置毛发随机性
+   * @param {Number} randomness 随机性值(0-1)
+   */
+  setFurRandomness(randomness) {
+    this.furRandomness = Math.max(0, Math.min(1, randomness));
+    return this.furRandomness;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 定义毛发笔刷特有属性
+    const furProperties = [
+      {
+        id: "furLength",
+        name: this.t('Canvas.FurLength'),
+        type: "slider",
+        defaultValue: this.furLength,
+        min: 1,
+        max: 50,
+        step: 1,
+        description: this.t('Canvas.FurLengthDescription'),		
+        category: this.t('Canvas.FurSettings'),
+        order: 100,
+      },
+      {
+        id: "furDensity",
+        name: this.t('Canvas.FurDensity'),	
+        type: "slider",
+        defaultValue: this.furDensity,
+        min: 0.1,
+        max: 1,
+        step: 0.05,
+        description: this.t('Canvas.FurDensityDescription'),	
+        category: this.t('Canvas.FurSettings'),
+        order: 110,
+      },
+      {
+        id: "furRandomness",
+        name: this.t('Canvas.FurRandomness'),	
+        type: "slider",
+        defaultValue: this.furRandomness,
+        min: 0,
+        max: 1,
+        step: 0.05,
+        description: this.t('Canvas.FurRandomnessDescription'),	
+        category: this.t('Canvas.FurSettings'),
+        order: 120,
+      },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...furProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理毛发笔刷特有属性
+    if (propId === "furLength") {
+      this.setFurLength(value);
+      return true;
+    } else if (propId === "furDensity") {
+      this.setFurDensity(value);
+      return true;
+    } else if (propId === "furRandomness") {
+      this.setFurRandomness(value);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMTAgODBMNTAgMjBNMjAgODBMNjAgMjBNMzAgODBMNzAgMjBNNDAgODBMODAgMjBNNTAgODBMOTAgMjAiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIi8+PC9zdmc+";
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/InkBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/InkBrush.js
new file mode 100644
index 0000000..1dfc06d
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/InkBrush.js
@@ -0,0 +1,267 @@
+import { BaseBrush } from "../BaseBrush";
+
+/**
+ * 水墨笔刷
+ * 模拟中国传统水墨画效果
+ */
+export class InkBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "ink",
+      name: options.t('Canvas.Ink'),	
+      description: "模拟中国传统水墨画效果，墨色深浅不一",
+      category: options.t('Canvas.SpecialEffectsBrush'),
+      icon: "ink",
+      ...options,
+    });
+
+    // 水墨笔刷特有属性
+    this._baseWidth = options._baseWidth || 15;
+    this._inkAmount = options._inkAmount || 7;
+    this._range = options._range || 10;
+    this.splashEnabled = options.splashEnabled !== undefined ? options.splashEnabled : true;
+    this.splashSize = options.splashSize || 5;
+    this.splashDistance = options.splashDistance || 30;
+	this.t = options.t
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 创建fabric原生水墨笔刷
+    this.brush = new fabric.InkBrush(this.canvas);
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+      this._baseWidth = options.width / 2;
+    }
+
+    if (options.color !== undefined) {
+      brush.color = options.color;
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+
+    // 水墨笔刷特有属性
+    if (options._inkAmount !== undefined) {
+      brush._inkAmount = options._inkAmount;
+      this._inkAmount = options._inkAmount;
+    }
+
+    if (options._range !== undefined) {
+      brush._range = options._range;
+      this._range = options._range;
+    }
+
+    // 更新溅墨相关配置（这需要修改原始InkBrush的drawSplash方法）
+    if (this.splashEnabled !== undefined) {
+      // 由于原始InkBrush没有直接暴露这个配置，我们可能需要覆盖方法
+      // 这里仅保存配置，实际逻辑需要在brush创建后处理
+    }
+  }
+
+  /**
+   * 设置墨量
+   * @param {Number} amount 墨量值
+   */
+  setInkAmount(amount) {
+    this._inkAmount = Math.max(1, Math.min(20, amount));
+
+    if (this.brush) {
+      this.brush._inkAmount = this._inkAmount;
+    }
+
+    return this._inkAmount;
+  }
+
+  /**
+   * 设置笔触范围
+   * @param {Number} range 范围值
+   */
+  setRange(range) {
+    this._range = Math.max(5, Math.min(50, range));
+
+    if (this.brush) {
+      this.brush._range = this._range;
+    }
+
+    return this._range;
+  }
+
+  /**
+   * 启用/禁用溅墨效果
+   * @param {Boolean} enabled 是否启用
+   */
+  setSplashEnabled(enabled) {
+    this.splashEnabled = enabled;
+
+    // 实际应用需要更多的逻辑来支持这个功能
+    // 由于需要修改fabric.InkBrush的内部行为
+
+    return this.splashEnabled;
+  }
+
+  /**
+   * 设置溅墨大小
+   * @param {Number} size 大小值
+   */
+  setSplashSize(size) {
+    this.splashSize = Math.max(1, Math.min(20, size));
+    return this.splashSize;
+  }
+
+  /**
+   * 设置溅墨距离
+   * @param {Number} distance 距离值
+   */
+  setSplashDistance(distance) {
+    this.splashDistance = Math.max(10, Math.min(100, distance));
+    return this.splashDistance;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 定义水墨笔刷特有属性
+    const inkProperties = [
+      {
+        id: "inkAmount",
+        name: this.t('Canvas.InkAmount'),	
+        type: "slider",
+        defaultValue: this._inkAmount,
+        min: 1,
+        max: 20,
+        step: 1,
+        description: this.t('Canvas.InkAmountDescription'),
+        category: this.t('Canvas.InkSettings'),
+        order: 100,
+      },
+      {
+        id: "range",
+        name: this.t('Canvas.InkRange'),		
+        type: "slider",
+        defaultValue: this._range,
+        min: 5,
+        max: 50,
+        step: 1,
+        description: this.t('Canvas.InkRangeDescription'),
+        category: this.t('Canvas.InkSettings'),		
+        order: 110,
+      },
+      {
+        id: "splashEnabled",
+        name: this.t('Canvas.InkSplashEnabled'),
+        type: "checkbox",
+        defaultValue: this.splashEnabled,
+        description: this.t('Canvas.InkSplashEnabledDescription'),
+        category: this.t('Canvas.InkSettings'),		
+        order: 120,
+      },
+      {
+        id: "splashSize",
+        name: this.t('Canvas.InkSize'),	
+        type: "slider",
+        defaultValue: this.splashSize,
+        min: 1,
+        max: 20,
+        step: 1,
+        description: this.t('Canvas.InkSizeDescription'),
+        category: this.t('Canvas.InkSettings'),								
+        order: 130,
+        visibleWhen: { splashEnabled: true },
+      },
+      {
+        id: "splashDistance",
+        name: this.t('Canvas.InkRandomness'),	
+        type: "slider",
+        defaultValue: this.splashDistance,
+        min: 10,
+        max: 100,
+        step: 5,
+        description: this.t('Canvas.InkRandomnessDescription'),
+        category: this.t('Canvas.InkSettings'),								
+        order: 140,
+        visibleWhen: { splashEnabled: true },
+      },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...inkProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理水墨笔刷特有属性
+    if (propId === "inkAmount") {
+      this.setInkAmount(value);
+      return true;
+    } else if (propId === "range") {
+      this.setRange(value);
+      return true;
+    } else if (propId === "splashEnabled") {
+      this.setSplashEnabled(value);
+      return true;
+    } else if (propId === "splashSize") {
+      this.setSplashSize(value);
+      return true;
+    } else if (propId === "splashDistance") {
+      this.setSplashDistance(value);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMjAgODBDNDAgNjAgNjAgNDAgODAgMjAiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiLz48Y2lyY2xlIGN4PSI3MCIgY3k9IjMwIiByPSI1IiBmaWxsPSIjMDAwIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMyIgZmlsbD0iIzAwMCIvPjxjaXJjbGUgY3g9IjMwIiBjeT0iNzAiIHI9IjYiIGZpbGw9IiMwMDAiLz48L3N2Zz4=";
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/LongfurBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/LongfurBrush.js
new file mode 100644
index 0000000..470946e
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/LongfurBrush.js
@@ -0,0 +1,303 @@
+import { BaseBrush } from "../BaseBrush";
+
+/**
+ * 长毛发笔刷
+ * 创建类似于长毛、毛皮、草或头发的效果
+ */
+export class LongfurBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "longfur",
+      name: options.t('Canvas.Longfur'),
+      description: "创建流动的长毛发效果，适合绘制动物毛皮、草或头发",
+      category: options.t('Canvas.SpecialEffectsBrush'),
+      icon: "longfur",
+      ...options,
+    });
+
+    // 长毛发笔刷特有属性
+    this.furLength = options.furLength || 20;
+    this.furDensity = options.furDensity || 0.7;
+    this.furFlowFactor = options.furFlowFactor || 0.5;
+    this.furCurvature = options.furCurvature || 0.3;
+    this.randomizeDirection =
+      options.randomizeDirection !== undefined ? options.randomizeDirection : true;
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 创建fabric原生长毛发笔刷
+    this.brush = new fabric.LongfurBrush(this.canvas);
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+    }
+
+    if (options.color !== undefined) {
+      brush.color = options.color;
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+
+    // 长毛发笔刷特有属性
+    if (options.furLength !== undefined) {
+      this.furLength = options.furLength;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.furLength !== undefined) {
+        brush.furLength = this.furLength;
+      }
+    }
+
+    if (options.furDensity !== undefined) {
+      this.furDensity = options.furDensity;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.furDensity !== undefined) {
+        brush.furDensity = this.furDensity;
+      }
+    }
+
+    if (options.furFlowFactor !== undefined) {
+      this.furFlowFactor = options.furFlowFactor;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.furFlowFactor !== undefined) {
+        brush.furFlowFactor = this.furFlowFactor;
+      }
+    }
+
+    if (options.furCurvature !== undefined) {
+      this.furCurvature = options.furCurvature;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.furCurvature !== undefined) {
+        brush.furCurvature = this.furCurvature;
+      }
+    }
+
+    if (options.randomizeDirection !== undefined) {
+      this.randomizeDirection = options.randomizeDirection;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.randomizeDirection !== undefined) {
+        brush.randomizeDirection = this.randomizeDirection;
+      }
+    }
+  }
+
+  /**
+   * 设置毛发长度
+   * @param {Number} length 长度值
+   */
+  setFurLength(length) {
+    this.furLength = Math.max(5, Math.min(100, length));
+
+    if (this.brush && this.brush.furLength !== undefined) {
+      this.brush.furLength = this.furLength;
+    }
+
+    return this.furLength;
+  }
+
+  /**
+   * 设置毛发密度
+   * @param {Number} density 密度值(0-1)
+   */
+  setFurDensity(density) {
+    this.furDensity = Math.max(0.1, Math.min(1, density));
+
+    if (this.brush && this.brush.furDensity !== undefined) {
+      this.brush.furDensity = this.furDensity;
+    }
+
+    return this.furDensity;
+  }
+
+  /**
+   * 设置毛发流动系数
+   * @param {Number} factor 流动系数(0-1)
+   */
+  setFurFlowFactor(factor) {
+    this.furFlowFactor = Math.max(0, Math.min(1, factor));
+
+    if (this.brush && this.brush.furFlowFactor !== undefined) {
+      this.brush.furFlowFactor = this.furFlowFactor;
+    }
+
+    return this.furFlowFactor;
+  }
+
+  /**
+   * 设置毛发弯曲度
+   * @param {Number} curvature 弯曲度(0-1)
+   */
+  setFurCurvature(curvature) {
+    this.furCurvature = Math.max(0, Math.min(1, curvature));
+
+    if (this.brush && this.brush.furCurvature !== undefined) {
+      this.brush.furCurvature = this.furCurvature;
+    }
+
+    return this.furCurvature;
+  }
+
+  /**
+   * 设置是否随机化方向
+   * @param {Boolean} randomize 是否随机化
+   */
+  setRandomizeDirection(randomize) {
+    this.randomizeDirection = randomize;
+
+    if (this.brush && this.brush.randomizeDirection !== undefined) {
+      this.brush.randomizeDirection = this.randomizeDirection;
+    }
+
+    return this.randomizeDirection;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 定义长毛发笔刷特有属性
+    const longfurProperties = [
+      {
+        id: "furLength",
+        name: this.t('Canvas.FurLength'),
+        type: "slider",
+        defaultValue: this.furLength,
+        min: 5,
+        max: 100,
+        step: 1,
+        description: this.t('Canvas.FurLengthDescription'),
+        category: this.t('Canvas.FurSettings'),
+        order: 100,
+      },
+      {
+        id: "furDensity",
+        name: this.t('Canvas.FurDensity'),
+        type: "slider",
+        defaultValue: this.furDensity,
+        min: 0.1,
+        max: 1,
+        step: 0.05,
+        description: this.t('Canvas.FurDensityDescription'),
+        category: this.t('Canvas.FurSettings'),
+        order: 110,
+      },
+      {
+        id: "furFlowFactor",
+        name: this.t('Canvas.FlowCoefficient'),
+        type: "slider",
+        defaultValue: this.furFlowFactor,
+        min: 0,
+        max: 1,
+        step: 0.05,
+        description: this.t('Canvas.FlowCoefficientDescription'),
+        category: this.t('Canvas.FurSettings'),
+        order: 120,
+      },
+      {
+        id: "furCurvature",
+        name: this.t('Canvas.furCurvature'),
+        type: "slider",
+        defaultValue: this.furCurvature,
+        min: 0,
+        max: 1,
+        step: 0.05,
+        description: this.t('Canvas.furCurvatureDescription'),
+        category: this.t('Canvas.FurSettings'),
+        order: 130,
+      },
+      {
+        id: "randomizeDirection",
+        name: this.t('Canvas.randomizeDirection'),
+        type: "checkbox",
+        defaultValue: this.randomizeDirection,
+        description: this.t('Canvas.randomizeDirectionDescription'),
+        category: this.t('Canvas.FurSettings'),
+        order: 140,
+      },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...longfurProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理长毛发笔刷特有属性
+    if (propId === "furLength") {
+      this.setFurLength(value);
+      return true;
+    } else if (propId === "furDensity") {
+      this.setFurDensity(value);
+      return true;
+    } else if (propId === "furFlowFactor") {
+      this.setFurFlowFactor(value);
+      return true;
+    } else if (propId === "furCurvature") {
+      this.setFurCurvature(value);
+      return true;
+    } else if (propId === "randomizeDirection") {
+      this.setRandomizeDirection(value);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMjUgNTBDMjUgNTAgNTAgMTAgNTAgNTBDNTAgNTAgNTAgOTAgNzUgNTAiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIi8+PGxpbmUgeDE9IjMwIiB5MT0iNDUiIHgyPSIzMCIgeTI9IjEwIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSI0MCIgeTE9IjQwIiB4Mj0iNDAiIHkyPSI1IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSI1MCIgeTE9IjQwIiB4Mj0iNTAiIHkyPSIxMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEiLz48bGluZSB4MT0iNjAiIHkxPSI0MCIgeDI9IjYwIiB5Mj0iNSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEiLz48bGluZSB4MT0iNzAiIHkxPSI0NSIgeDI9IjcwIiB5Mj0iMTAiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+";
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/MarkerBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/MarkerBrush.js
new file mode 100644
index 0000000..7e655fc
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/MarkerBrush.js
@@ -0,0 +1,230 @@
+import { BaseBrush } from "../BaseBrush";
+
+/**
+ * 马克笔笔刷
+ * 模拟马克笔效果，具有半透明平头笔触
+ */
+export class MarkerBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "marker",
+      name: options.t("Canva.Marker"),
+      description: "模拟马克笔效果，具有半透明平头笔触",
+      category: options.t("Canvas.BasicBrushes"),
+      icon: "marker",
+      ...options,
+    });
+
+    // 马克笔特有属性
+    this._baseWidth = options._baseWidth || 15;
+    this._lineWidth = options._lineWidth || 2;
+    this.capStyle = options.capStyle || "round"; // "round" 或 "square"
+    this.blendMode = options.blendMode || "multiply"; // 混合模式
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 创建fabric原生马克笔笔刷
+    this.brush = new fabric.MarkerBrush(this.canvas);
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+      // 更新笔刷相关属性
+      this._baseWidth = options.width;
+    }
+
+    if (options.color !== undefined) {
+      brush.color = options.color;
+    }
+
+    if (options.opacity !== undefined) {
+      // 马克笔的透明度默认不要太高
+      brush.opacity = Math.min(0.8, options.opacity || 0.6);
+    }
+
+    // 马克笔笔刷特有属性
+    if (options._baseWidth !== undefined) {
+      brush._baseWidth = options._baseWidth;
+      this._baseWidth = options._baseWidth;
+    }
+
+    if (options._lineWidth !== undefined) {
+      brush._lineWidth = options._lineWidth;
+      this._lineWidth = options._lineWidth;
+    }
+
+    // 笔触样式设置
+    brush.canvas.contextTop.lineJoin = "round";
+    brush.canvas.contextTop.lineCap = this.capStyle || "round";
+
+    // 马克笔的混合模式设置
+    if (this.blendMode === "multiply") {
+      brush.canvas.contextTop.globalCompositeOperation = "multiply";
+    } else {
+      brush.canvas.contextTop.globalCompositeOperation = "source-over";
+    }
+  }
+
+  /**
+   * 设置笔触线宽
+   * @param {Number} width 线宽值
+   */
+  setLineWidth(width) {
+    this._lineWidth = Math.max(1, Math.min(10, width));
+
+    if (this.brush) {
+      this.brush._lineWidth = this._lineWidth;
+    }
+
+    return this._lineWidth;
+  }
+
+  /**
+   * 设置笔头样式
+   * @param {String} style 笔头样式 ('round' 或 'square')
+   */
+  setCapStyle(style) {
+    if (style === "round" || style === "square") {
+      this.capStyle = style;
+
+      if (this.brush && this.brush.canvas) {
+        this.brush.canvas.contextTop.lineCap = style;
+      }
+    }
+
+    return this.capStyle;
+  }
+
+  /**
+   * 设置混合模式
+   * @param {String} mode 混合模式 ('multiply' 或 'normal')
+   */
+  setBlendMode(mode) {
+    this.blendMode = mode;
+
+    if (this.brush && this.brush.canvas) {
+      this.brush.canvas.contextTop.globalCompositeOperation =
+        mode === "multiply" ? "multiply" : "source-over";
+    }
+
+    return this.blendMode;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 定义马克笔笔刷特有属性
+    const markerProperties = [
+      {
+        id: "lineWidth",
+        name: this.t('Canvas.MarkerWidth'),
+        type: "slider",
+        defaultValue: this._lineWidth,
+        min: 1,
+        max: 10,
+        step: 0.5,
+        description: this.t('Canvas.MarkerWidthDescription'),
+        category: this.t('Canvas.MarkerSettings'),
+        order: 100,
+      },
+      {
+        id: "capStyle",
+        name: this.t('Canvas.MarkerCapStyle'),
+        type: "select",
+        defaultValue: this.capStyle,
+        options: [
+          { value: "round", label: this.t('Canvas.MarkerCapStyleRound') },
+          { value: "square", label: this.t('Canvas.MarkerCapStyleSquare') },
+        ],
+        description: this.t('Canvas.MarkerCapStyleDescription'),
+        category: this.t('Canvas.MarkerSettings'),
+        order: 110,
+      },
+      {
+        id: "blendMode",
+        name: this.t('Canvas.MarkerMixedModel'),
+        type: "select",
+        defaultValue: this.blendMode,
+        options: [
+          { value: "multiply", label: this.t('Canvas.MarkerMixedModelMultiply') },
+          { value: "normal", label: this.t('Canvas.MarkerMixedModelNormal') },
+        ],
+        description: this.t('Canvas.MarkerMixedModelDescription'),
+        category: this.t('Canvas.MarkerSettings'),
+        order: 120,
+      },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...markerProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理马克笔笔刷特有属性
+    if (propId === "lineWidth") {
+      this.setLineWidth(value);
+      return true;
+    } else if (propId === "capStyle") {
+      this.setCapStyle(value);
+      return true;
+    } else if (propId === "blendMode") {
+      this.setBlendMode(value);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMTAgNTBIOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyMCIgc3Ryb2tlLW9wYWNpdHk9IjAuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+";
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/PencilBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/PencilBrush.js
new file mode 100644
index 0000000..3fe768e
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/PencilBrush.js
@@ -0,0 +1,378 @@
+import { BaseBrush } from "../BaseBrush";
+
+/**
+ * 铅笔笔刷
+ * fabric原生铅笔笔刷的包装类
+ */
+export class PencilBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+	// console.log(options,'=-===========================')
+    super(canvas, {
+      id: "pencil",
+      name: "铅笔",
+      description: "基础铅笔工具，适合精细线条绘制",
+      category: "基础笔刷",
+      icon: "pencil",
+	  t: options.t,
+      ...options,
+    });
+
+    // 铅笔笔刷特有属性
+    this.decimate = options.decimate || 0.4;
+    this.strokeLineCap = options.strokeLineCap || "round";
+    this.strokeLineJoin = options.strokeLineJoin || "round";
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric.PencilBrush实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 创建fabric原生铅笔笔刷
+    this.brush = new fabric.PencilBrush(this.canvas);
+
+    // 重写 _finalizeAndAddPath 方法，使其调用 convertToImg 而不是创建 Path 对象
+    const originalFinalizeAndAddPath = this.brush._finalizeAndAddPath.bind(this.brush);
+    const self = this; // 保存外部this引用
+
+    this.brush._finalizeAndAddPath = function () {
+      console.log("PencilBrush: _finalizeAndAddPath called");
+      const ctx = this.canvas.contextTop;
+      ctx.closePath();
+
+      // 应用点简化
+      if (this.decimate) {
+        this._points = this.decimatePoints(this._points, this.decimate);
+      }
+
+      console.log("PencilBrush: points count =", this._points ? this._points.length : 0);
+
+      // 检查是否有有效的路径数据
+      if (!this._points || this._points.length < 2) {
+        // 如果点数不足，直接请求重新渲染
+        console.log("PencilBrush: Not enough points, skipping");
+        this.canvas.requestRenderAll();
+        return;
+      }
+
+      const pathData = this.convertPointsToSVGPath(this._points);
+
+      const isEmpty = self._isEmptySVGPath(pathData);
+      console.log("PencilBrush: isEmpty =", isEmpty);
+
+      if (isEmpty) {
+        // 如果路径为空，直接请求重新渲染
+        console.log("PencilBrush: Path is empty, skipping");
+        this.canvas.requestRenderAll();
+        return;
+      }
+
+      // 先触发事件，模拟原生行为
+      const path = this.createPath(pathData);
+      this.canvas.fire("before:path:created", { path: path });
+
+      console.log("PencilBrush: Calling convertToImg");
+
+      // 调用 convertToImg 方法将绘制内容转换为图片
+      if (typeof this.convertToImg === "function") {
+        // 确保在转换前设置正确的透明度
+        const currentAlpha = ctx.globalAlpha;
+        ctx.globalAlpha = this.opacity || 1;
+
+        this.convertToImg();
+        console.log("PencilBrush: convertToImg called successfully");
+
+        // 恢复透明度
+        ctx.globalAlpha = currentAlpha;
+      } else {
+        console.warn("convertToImg method not found, falling back to original behavior");
+        // 如果没有convertToImg方法，回退到原始行为
+        this.canvas.add(path);
+        this.canvas.fire("path:created", { path: path });
+        this.canvas.clearContext(this.canvas.contextTop);
+      }
+
+      // 重置阴影
+      this._resetShadow();
+    };
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 检查 SVG 路径是否为空
+   * @private
+   * @param {Array} pathData SVG 路径数据
+   * @returns {Boolean} 是否为空路径
+   */
+  _isEmptySVGPath(pathData) {
+    if (!pathData || pathData.length === 0) {
+      return true;
+    }
+
+    // 检查路径是否只包含移动命令或者是一个点
+    let hasDrawing = false;
+    let moveCount = 0;
+
+    for (let i = 0; i < pathData.length; i++) {
+      const command = pathData[i];
+      if (command[0] === "M") {
+        moveCount++;
+      } else if (command[0] === "L" || command[0] === "Q" || command[0] === "C") {
+        hasDrawing = true;
+        break;
+      }
+    }
+
+    // 如果只有移动命令且超过1个，或者没有绘制命令，则认为是空路径
+    return !hasDrawing || (moveCount > 0 && pathData.length <= moveCount);
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric.PencilBrush实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) {
+      return;
+    }
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+    }
+
+    if (options.color !== undefined && options.opacity !== undefined) {
+      // 使用RGBA颜色而不是设置globalAlpha
+      brush.color = this._createRGBAColor(options.color, options.opacity);
+    } else if (options.color !== undefined) {
+      brush.color = options.color;
+    } else if (options.opacity !== undefined) {
+      // 如果只设置了透明度，基于当前颜色创建RGBA
+      const currentColor = brush.color || "#000000";
+      brush.color = this._createRGBAColor(currentColor, options.opacity);
+    }
+
+    // 确保不使用globalAlpha，避免圆圈绘制问题
+    if (brush.canvas && brush.canvas.contextTop) {
+      brush.canvas.contextTop.globalAlpha = 1;
+      brush.canvas.contextTop.lineCap = "round";
+      brush.canvas.contextTop.lineJoin = "round";
+    }
+
+    // 特殊属性配置
+    options.decimate = 0;
+    if (options.decimate !== undefined) {
+      brush.decimate = options.decimate;
+      this.decimate = options.decimate;
+    }
+    options.strokeLineCap = "round";
+    if (options.strokeLineCap !== undefined) {
+      brush.strokeLineCap = options.strokeLineCap;
+      this.strokeLineCap = options.strokeLineCap;
+    }
+    options.strokeLineJoin = "round";
+    if (options.strokeLineJoin !== undefined) {
+      brush.strokeLineJoin = options.strokeLineJoin;
+      this.strokeLineJoin = options.strokeLineJoin;
+    }
+  }
+
+  /**
+   * 创建RGBA颜色字符串
+   * @private
+   * @param {String} color 十六进制颜色或已有颜色
+   * @param {Number} opacity 透明度 (0-1)
+   * @returns {String} RGBA颜色字符串
+   */
+  _createRGBAColor(color, opacity) {
+    // 如果已经是rgba颜色，先提取RGB部分
+    if (color.startsWith("rgba")) {
+      const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
+      if (rgbaMatch) {
+        const [, r, g, b] = rgbaMatch;
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+      }
+    }
+
+    // 如果是rgb颜色，提取RGB部分
+    if (color.startsWith("rgb")) {
+      const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+      if (rgbMatch) {
+        const [, r, g, b] = rgbMatch;
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+      }
+    }
+
+    // 处理十六进制颜色
+    if (color.startsWith("#")) {
+      const hex = color.replace("#", "");
+      let r, g, b;
+
+      if (hex.length === 3) {
+        r = parseInt(hex[0] + hex[0], 16);
+        g = parseInt(hex[1] + hex[1], 16);
+        b = parseInt(hex[2] + hex[2], 16);
+      } else if (hex.length === 6) {
+        r = parseInt(hex.substring(0, 2), 16);
+        g = parseInt(hex.substring(2, 4), 16);
+        b = parseInt(hex.substring(4, 6), 16);
+      } else {
+        // 无效的十六进制颜色，使用默认
+        r = g = b = 0;
+      }
+
+      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+
+    // 如果是其他格式的颜色，尝试转换（例如颜色名称）
+    // 这里简化处理，实际项目中可以使用更复杂的颜色解析
+    return color; // fallback到原颜色
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+    // 定义铅笔笔刷特有属性
+    const pencilProperties = [
+      // {
+      //   id: "decimate",
+      //   name: "精细度",
+      //   type: "slider",
+      //   defaultValue: this.decimate,
+      //   min: 0,
+      //   max: 1,
+      //   step: 0.1,
+      //   description: "控制笔触路径的简化程度，值越小路径越精细",
+      //   category: "铅笔设置",
+      //   order: 100,
+      // },
+      // {
+      //   id: "strokeLineCap",
+      //   name: "线条端点",
+      //   type: "select",
+      //   defaultValue: this.strokeLineCap,
+      //   options: [
+      //     { value: "round", label: "圆形" },
+      //     { value: "butt", label: "平直" },
+      //     { value: "square", label: "方形" },
+      //   ],
+      //   description: "线条端点的形状",
+      //   category: "铅笔设置",
+      //   order: 110,
+      // },
+      // {
+      //   id: "strokeLineJoin",
+      //   name: "线条连接",
+      //   type: "select",
+      //   defaultValue: this.strokeLineJoin,
+      //   options: [
+      //     { value: "round", label: "圆角" },
+      //     { value: "bevel", label: "斜角" },
+      //     { value: "miter", label: "尖角" },
+      //   ],
+      //   description: "线条拐角的连接方式",
+      //   category: "铅笔设置",
+      //   order: 120,
+      // },
+      // {
+      //   id: "smoothingEnabled",
+      //   name: "启用平滑",
+      //   type: "checkbox",
+      //   defaultValue: false,
+      //   description: "是否对线条进行平滑处理",
+      //   category: "铅笔设置",
+      //   order: 130,
+      // },
+      // {
+      //   id: "smoothingFactor",
+      //   name: "平滑程度",
+      //   type: "slider",
+      //   defaultValue: 0.5,
+      //   min: 0,
+      //   max: 1,
+      //   step: 0.05,
+      //   description: "线条平滑的强度",
+      //   category: "铅笔设置",
+      //   order: 140,
+      //   // 只有当smoothingEnabled为true时才显示
+      //   visibleWhen: { smoothingEnabled: true },
+      // },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...pencilProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理铅笔特有属性
+    if (propId === "decimate") {
+      this.decimate = value;
+      if (this.brush) {
+        this.brush.decimate = value;
+        return true;
+      }
+    } else if (propId === "strokeLineCap") {
+      this.strokeLineCap = value;
+      if (this.brush) {
+        this.brush.strokeLineCap = value;
+        return true;
+      }
+    } else if (propId === "strokeLineJoin") {
+      this.strokeLineJoin = value;
+      if (this.brush) {
+        this.brush.strokeLineJoin = value;
+        return true;
+      }
+    } else if (propId === "smoothingEnabled") {
+      this.smoothingEnabled = value;
+      // 实现平滑逻辑...
+      return true;
+    } else if (propId === "smoothingFactor") {
+      this.smoothingFactor = value;
+      // 实现平滑度调整...
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    // 实际项目中可以返回一个实际的预览图URL
+    return "data:image/svg+xml;base64,..."; // 示例SVG
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/RibbonBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/RibbonBrush.js
new file mode 100644
index 0000000..48e7f09
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/RibbonBrush.js
@@ -0,0 +1,357 @@
+import { BaseBrush } from "../BaseBrush";
+
+/**
+ * 丝带笔刷
+ * 创建流畅的飘带状线条
+ */
+export class RibbonBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "ribbon",
+      name: options.t('Canvas.Ribbon'),
+      description: "创建流畅的飘带状线条，具有动态宽度变化和曲线美感",
+      category: options.t('Canvas.SpecialEffectsBrush'),
+      icon: "ribbon",
+      ...options,
+    });
+
+    // 丝带笔刷特有属性
+    this.ribbonWidth = options.ribbonWidth || 20;
+    this.widthVariation = options.widthVariation || 0.5;
+    this.ribbonSmoothness = options.ribbonSmoothness || 0.7;
+    this.gradient = options.gradient !== undefined ? options.gradient : true;
+    this.gradientColors = options.gradientColors || ["#000000", "#555555"];
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 创建fabric原生丝带笔刷
+    this.brush = new fabric.RibbonBrush(this.canvas);
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+      // 基于主宽度更新丝带宽度
+      this.ribbonWidth = options.width * 2;
+    }
+
+    if (options.color !== undefined) {
+      brush.color = options.color;
+
+      // 如果启用渐变，更新渐变的第一个颜色
+      if (this.gradient && this.gradientColors.length > 0) {
+        this.gradientColors[0] = options.color;
+        this.updateGradient();
+      }
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+      // 如果启用渐变，更新渐变的第一个颜色
+      if (this.gradient && this.gradientColors.length > 0) {
+        this.gradientColors[0] = this._createRGBAColor(brush.color, options.opacity);
+        this.updateGradient();
+      }
+      brush.canvas.freeDrawingBrush.opacity = options.opacity;
+    }
+
+    // 丝带笔刷特有属性
+    if (options.ribbonWidth !== undefined) {
+      this.ribbonWidth = options.ribbonWidth;
+
+      // 如果原生笔刷支持此属性
+      if (brush.ribbonWidth !== undefined) {
+        brush.ribbonWidth = this.ribbonWidth;
+      }
+    }
+
+    if (options.widthVariation !== undefined) {
+      this.widthVariation = options.widthVariation;
+
+      // 如果原生笔刷支持此属性
+      if (brush.widthVariation !== undefined) {
+        brush.widthVariation = this.widthVariation;
+      }
+    }
+
+    if (options.ribbonSmoothness !== undefined) {
+      this.ribbonSmoothness = options.ribbonSmoothness;
+
+      // 如果原生笔刷支持此属性
+      if (brush.ribbonSmoothness !== undefined) {
+        brush.ribbonSmoothness = this.ribbonSmoothness;
+      }
+    }
+
+    if (options.gradient !== undefined) {
+      this.gradient = options.gradient;
+      this.updateGradient();
+    }
+
+    if (options.gradientColors !== undefined) {
+      this.gradientColors = options.gradientColors;
+      this.updateGradient();
+    }
+  }
+
+  /**
+   * 更新渐变设置
+   * @private
+   */
+  updateGradient() {
+    if (!this.brush || !this.canvas) return;
+
+    if (this.gradient && this.gradientColors.length >= 2) {
+      // 创建渐变对象
+      const ctx = this.canvas.contextTop;
+      const gradient = ctx.createLinearGradient(0, 0, this.ribbonWidth, 0);
+
+      // 添加渐变色
+      const colorCount = this.gradientColors.length;
+      this.gradientColors.forEach((color, index) => {
+        gradient.addColorStop(index / (colorCount - 1), color);
+      });
+
+      // 如果原生笔刷支持渐变
+      if (typeof this.brush.setGradient === "function") {
+        this.brush.setGradient(gradient);
+      } else if (this.brush.gradient !== undefined) {
+        this.brush.gradient = gradient;
+      }
+
+      // 如果原生笔刷支持渐变标志
+      if (this.brush.useGradient !== undefined) {
+        this.brush.useGradient = true;
+      }
+    } else if (this.brush.useGradient !== undefined) {
+      // 禁用渐变
+      this.brush.useGradient = false;
+    }
+  }
+
+  /**
+   * 设置丝带宽度
+   * @param {Number} width 宽度值
+   */
+  setRibbonWidth(width) {
+    this.ribbonWidth = Math.max(5, Math.min(100, width));
+
+    if (this.brush && this.brush.ribbonWidth !== undefined) {
+      this.brush.ribbonWidth = this.ribbonWidth;
+    }
+
+    // 更新渐变（因为宽度变了）
+    if (this.gradient) {
+      this.updateGradient();
+    }
+
+    return this.ribbonWidth;
+  }
+
+  /**
+   * 设置宽度变化率
+   * @param {Number} variation 变化率(0-1)
+   */
+  setWidthVariation(variation) {
+    this.widthVariation = Math.max(0, Math.min(1, variation));
+
+    if (this.brush && this.brush.widthVariation !== undefined) {
+      this.brush.widthVariation = this.widthVariation;
+    }
+
+    return this.widthVariation;
+  }
+
+  /**
+   * 设置丝带平滑度
+   * @param {Number} smoothness 平滑度值(0-1)
+   */
+  setRibbonSmoothness(smoothness) {
+    this.ribbonSmoothness = Math.max(0, Math.min(1, smoothness));
+
+    if (this.brush && this.brush.ribbonSmoothness !== undefined) {
+      this.brush.ribbonSmoothness = this.ribbonSmoothness;
+    }
+
+    return this.ribbonSmoothness;
+  }
+
+  /**
+   * 启用/禁用渐变效果
+   * @param {Boolean} enabled 是否启用
+   */
+  setGradient(enabled) {
+    this.gradient = enabled;
+    this.updateGradient();
+    return this.gradient;
+  }
+
+  /**
+   * 设置渐变颜色
+   * @param {Array} colors 颜色数组
+   */
+  setGradientColors(colors) {
+    if (Array.isArray(colors) && colors.length >= 2) {
+      this.gradientColors = colors;
+      this.updateGradient();
+    }
+    return this.gradientColors;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 定义丝带笔刷特有属性
+    const ribbonProperties = [
+      {
+        id: "ribbonWidth",
+        name: this.t('Canvas.RibbonWidth'),
+        type: "slider",
+        defaultValue: this.ribbonWidth,
+        min: 5,
+        max: 100,
+        step: 5,
+        description: this.t('Canvas.RibbonWidthDescription'),
+        category: this.t('Canvas.RibbonSettings'),
+        order: 100,
+      },
+      {
+        id: "widthVariation",
+        name: this.t('Canvas.RibbonVariation'),
+        type: "slider",
+        defaultValue: this.widthVariation,
+        min: 0,
+        max: 1,
+        step: 0.05,
+        description: this.t('Canvas.RibbonVariationDescription'),
+        category: this.t('Canvas.RibbonSettings'),
+        order: 110,
+      },
+      {
+        id: "ribbonSmoothness",
+        name: this.t('Canvas.RibbonSmoothness'),
+        type: "slider",
+        defaultValue: this.ribbonSmoothness,
+        min: 0,
+        max: 1,
+        step: 0.05,
+        description: this.t('Canvas.RibbonSmoothnessDescription'),
+        category: this.t('Canvas.RibbonSettings'),
+        order: 120,
+      },
+      {
+        id: "gradient",
+        name: this.t('Canvas.RibbonGradient'),
+        type: "checkbox",
+        defaultValue: this.gradient,
+        description: this.t('Canvas.RibbonGradientDescription'),
+        category: this.t('Canvas.RibbonSettings'),
+        order: 130,
+      },
+      {
+        id: "gradientColor1",
+        name: this.t('Canvas.RibbonGradientColor1'),
+        type: "color",
+        defaultValue: this.gradientColors[0] || "#000000",
+        description: this.t('Canvas.RibbonGradientColor1Description'),
+        category: this.t('Canvas.RibbonSettings'),
+        order: 140,
+        visibleWhen: { gradient: true },
+      },
+      {
+        id: "gradientColor2",
+        name: this.t('Canvas.RibbonGradientColor2'),
+        type: "color",
+        defaultValue: this.gradientColors[1] || "#555555",
+        description: this.t('Canvas.RibbonGradientColor2Description'),
+        category: this.t('Canvas.RibbonSettings'),
+        order: 150,
+        visibleWhen: { gradient: true },
+      },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...ribbonProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理丝带笔刷特有属性
+    if (propId === "ribbonWidth") {
+      this.setRibbonWidth(value);
+      return true;
+    } else if (propId === "widthVariation") {
+      this.setWidthVariation(value);
+      return true;
+    } else if (propId === "ribbonSmoothness") {
+      this.setRibbonSmoothness(value);
+      return true;
+    } else if (propId === "gradient") {
+      this.setGradient(value);
+      return true;
+    } else if (propId === "gradientColor1") {
+      const colors = [...this.gradientColors];
+      colors[0] = value;
+      this.setGradientColors(colors);
+      return true;
+    } else if (propId === "gradientColor2") {
+      const colors = [...this.gradientColors];
+      colors[1] = value;
+      this.setGradientColors(colors);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNTU1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHBhdGggZD0iTTIwIDUwQzMwIDMwIDUwIDMwIDYwIDUwQzcwIDcwIDgwIDcwIDkwIDUwIiBzdHJva2U9InVybCgjZ3JhZCkiIHN0cm9rZS13aWR0aD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==";
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/ShadedBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/ShadedBrush.js
new file mode 100644
index 0000000..283d5ac
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/ShadedBrush.js
@@ -0,0 +1,362 @@
+import { BaseBrush } from "../BaseBrush";
+
+/**
+ * 阴影笔刷
+ * 创建带有阴影效果的绘制，有深浅变化
+ */
+export class ShadedBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "shaded",
+      name: options.t('Canvas.Shaded'),
+      description: "创建带有阴影效果的绘制，适合素描和明暗表现",
+      category: options.t('Canvas.PaintingBrush'),
+      icon: "shaded",
+      ...options,
+    });
+
+    // 阴影笔刷特有属性
+    this.shadowColor = options.shadowColor || "#000000";
+    this.shadowBlur = options.shadowBlur || 5;
+    this.shadowOffsetX = options.shadowOffsetX || 2;
+    this.shadowOffsetY = options.shadowOffsetY || 2;
+    this.blendMode = options.blendMode || "multiply";
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 创建fabric原生阴影笔刷
+    this.brush = new fabric.ShadedBrush(this.canvas);
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+    }
+
+    if (options.color !== undefined) {
+      brush.color = options.color;
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+
+    // 阴影笔刷特有属性
+    if (options.shadowColor !== undefined) {
+      this.shadowColor = options.shadowColor;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.shadow) {
+        brush.shadow.color = this.shadowColor;
+      } else {
+        brush.shadow = new fabric.Shadow({
+          color: this.shadowColor,
+          blur: this.shadowBlur,
+          offsetX: this.shadowOffsetX,
+          offsetY: this.shadowOffsetY,
+        });
+      }
+    }
+
+    if (options.shadowBlur !== undefined) {
+      this.shadowBlur = options.shadowBlur;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.shadow) {
+        brush.shadow.blur = this.shadowBlur;
+      } else {
+        brush.shadow = new fabric.Shadow({
+          color: this.shadowColor,
+          blur: this.shadowBlur,
+          offsetX: this.shadowOffsetX,
+          offsetY: this.shadowOffsetY,
+        });
+      }
+    }
+
+    if (options.shadowOffsetX !== undefined) {
+      this.shadowOffsetX = options.shadowOffsetX;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.shadow) {
+        brush.shadow.offsetX = this.shadowOffsetX;
+      } else {
+        brush.shadow = new fabric.Shadow({
+          color: this.shadowColor,
+          blur: this.shadowBlur,
+          offsetX: this.shadowOffsetX,
+          offsetY: this.shadowOffsetY,
+        });
+      }
+    }
+
+    if (options.shadowOffsetY !== undefined) {
+      this.shadowOffsetY = options.shadowOffsetY;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.shadow) {
+        brush.shadow.offsetY = this.shadowOffsetY;
+      } else {
+        brush.shadow = new fabric.Shadow({
+          color: this.shadowColor,
+          blur: this.shadowBlur,
+          offsetX: this.shadowOffsetX,
+          offsetY: this.shadowOffsetY,
+        });
+      }
+    }
+
+    if (options.blendMode !== undefined) {
+      this.blendMode = options.blendMode;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.globalCompositeOperation !== undefined) {
+        brush.globalCompositeOperation = this.blendMode;
+      }
+    }
+  }
+
+  /**
+   * 设置阴影颜色
+   * @param {String} color 颜色值
+   */
+  setShadowColor(color) {
+    this.shadowColor = color;
+
+    if (this.brush && this.brush.shadow) {
+      this.brush.shadow.color = this.shadowColor;
+    }
+
+    return this.shadowColor;
+  }
+
+  /**
+   * 设置阴影模糊值
+   * @param {Number} blur 模糊值
+   */
+  setShadowBlur(blur) {
+    this.shadowBlur = Math.max(0, Math.min(50, blur));
+
+    if (this.brush && this.brush.shadow) {
+      this.brush.shadow.blur = this.shadowBlur;
+    }
+
+    return this.shadowBlur;
+  }
+
+  /**
+   * 设置阴影X偏移
+   * @param {Number} offset X偏移值
+   */
+  setShadowOffsetX(offset) {
+    this.shadowOffsetX = Math.max(-20, Math.min(20, offset));
+
+    if (this.brush && this.brush.shadow) {
+      this.brush.shadow.offsetX = this.shadowOffsetX;
+    }
+
+    return this.shadowOffsetX;
+  }
+
+  /**
+   * 设置阴影Y偏移
+   * @param {Number} offset Y偏移值
+   */
+  setShadowOffsetY(offset) {
+    this.shadowOffsetY = Math.max(-20, Math.min(20, offset));
+
+    if (this.brush && this.brush.shadow) {
+      this.brush.shadow.offsetY = this.shadowOffsetY;
+    }
+
+    return this.shadowOffsetY;
+  }
+
+  /**
+   * 设置混合模式
+   * @param {String} mode 混合模式
+   */
+  setBlendMode(mode) {
+    const validModes = [
+      "normal",
+      "multiply",
+      "screen",
+      "overlay",
+      "darken",
+      "lighten",
+      "color-dodge",
+      "color-burn",
+      "hard-light",
+      "soft-light",
+      "difference",
+      "exclusion",
+      "hue",
+      "saturation",
+      "color",
+      "luminosity",
+    ];
+
+    if (validModes.includes(mode)) {
+      this.blendMode = mode;
+
+      if (this.brush && this.brush.globalCompositeOperation !== undefined) {
+        this.brush.globalCompositeOperation = this.blendMode;
+      }
+    }
+
+    return this.blendMode;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 定义阴影笔刷特有属性
+    const shadedProperties = [
+      {
+        id: "shadowColor",
+        name: this.t('Canvas.ShadedColor'),
+        type: "color",
+        defaultValue: this.shadowColor,
+        description: this.t('Canvas.ShadedColorDescription'),
+        category: this.t('Canvas.ShadedSettings'),
+        order: 100,
+      },
+      {
+        id: "shadowBlur",
+        name: this.t('Canvas.ShadedBlur'),
+        type: "slider",
+        defaultValue: this.shadowBlur,
+        min: 0,
+        max: 50,
+        step: 1,
+        description: this.t('Canvas.ShadedBlurDescription'),
+        category: this.t('Canvas.ShadedSettings'),
+        order: 110,
+      },
+      {
+        id: "shadowOffsetX",
+        name: this.t('Canvas.ShadedOffsetX'),
+        type: "slider",
+        defaultValue: this.shadowOffsetX,
+        min: -20,
+        max: 20,
+        step: 1,
+        description: this.t('Canvas.ShadedOffsetXDescription'),
+        category: this.t('Canvas.ShadedSettings'),
+        order: 120,
+      },
+      {
+        id: "shadowOffsetY",
+        name: this.t('Canvas.ShadedOffsetY'),
+        type: "slider",
+        defaultValue: this.shadowOffsetY,
+        min: -20,
+        max: 20,
+        step: 1,
+        description: this.t('Canvas.ShadedOffsetYDescription'),
+        category: this.t('Canvas.ShadedSettings'),
+        order: 130,
+      },
+      {
+        id: "blendMode",
+        name: this.t('Canvas.ShadedMixedModel'),
+        type: "select",
+        defaultValue: this.blendMode,
+        options: [
+          { value: "normal", label: this.t('Canvas.ShadedMixedModelNormal') },
+          { value: "multiply", label: this.t('Canvas.ShadedMixedModelMultiply') },
+          { value: "screen", label: this.t('Canvas.ShadedMixedModelScreen') },
+          { value: "overlay", label: this.t('Canvas.ShadedMixedModelOverlay') },
+          { value: "darken", label: this.t('Canvas.ShadedMixedModelDarken') },
+          { value: "lighten", label: this.t('Canvas.ShadedMixedModelLighten') },
+          { value: "color-dodge", label: this.t('Canvas.ShadedMixedModelColorDodge') },
+          { value: "color-burn", label: this.t('Canvas.ShadedMixedModelColorBurn') },
+          { value: "hard-light", label: this.t('Canvas.ShadedMixedModelHardLight') },
+          { value: "soft-light", label: this.t('Canvas.ShadedMixedModelSoftLight') },
+          { value: "difference", label: this.t('Canvas.ShadedMixedModelDifference') },
+          { value: "exclusion", label: this.t('Canvas.ShadedMixedModelExclusion') },
+        ],
+        description: this.t('Canvas.ShadedMixedModelDescription'),
+        category: this.t('Canvas.ShadedSettings'),
+        order: 140,
+      },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...shadedProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理阴影笔刷特有属性
+    if (propId === "shadowColor") {
+      this.setShadowColor(value);
+      return true;
+    } else if (propId === "shadowBlur") {
+      this.setShadowBlur(value);
+      return true;
+    } else if (propId === "shadowOffsetX") {
+      this.setShadowOffsetX(value);
+      return true;
+    } else if (propId === "shadowOffsetY") {
+      this.setShadowOffsetY(value);
+      return true;
+    } else if (propId === "blendMode") {
+      this.setBlendMode(value);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSIyMCIgZmlsbD0iIzY2NiIvPjxjaXJjbGUgY3g9IjQ1IiBjeT0iNDUiIHI9IjIwIiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTIwIDgwQzMwIDYwIDUwIDcwIDcwIDUwIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTIzIDgzQzMzIDYzIDUzIDczIDczIDUzIiBzdHJva2U9IiM2NjYiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+";
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/SketchyBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/SketchyBrush.js
new file mode 100644
index 0000000..f633132
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/SketchyBrush.js
@@ -0,0 +1,371 @@
+import { BaseBrush } from "../BaseBrush";
+
+/**
+ * 素描笔刷
+ * 创建手绘素描效果，有不规则的线条和纹理
+ */
+export class SketchyBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "sketchy",
+      name: "素描",
+      description: "创建手绘素描效果，有不规则的线条和纹理",
+      category: "绘画笔刷",
+      icon: "sketchy",
+      ...options,
+    });
+
+    // 素描笔刷特有属性
+    this.roughness = options.roughness || 0.7;
+    this.bowing = options.bowing || 0.5;
+    this.stroke = options.stroke !== undefined ? options.stroke : true;
+    this.hachureAngle = options.hachureAngle || 60;
+    this.dashOffset = options.dashOffset || 0;
+    this.dashArray = options.dashArray || [6, 2];
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 创建fabric原生素描笔刷
+    this.brush = new fabric.SketchyBrush(this.canvas);
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+    }
+
+    if (options.color !== undefined) {
+      brush.color = options.color;
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+
+    // 素描笔刷特有属性
+    if (options.roughness !== undefined) {
+      this.roughness = options.roughness;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.roughness !== undefined) {
+        brush.roughness = this.roughness;
+      }
+    }
+
+    if (options.bowing !== undefined) {
+      this.bowing = options.bowing;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.bowing !== undefined) {
+        brush.bowing = this.bowing;
+      }
+    }
+
+    if (options.stroke !== undefined) {
+      this.stroke = options.stroke;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.stroke !== undefined) {
+        brush.stroke = this.stroke;
+      }
+    }
+
+    if (options.hachureAngle !== undefined) {
+      this.hachureAngle = options.hachureAngle;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.hachureAngle !== undefined) {
+        brush.hachureAngle = this.hachureAngle;
+      }
+    }
+
+    if (options.dashOffset !== undefined) {
+      this.dashOffset = options.dashOffset;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.dashOffset !== undefined) {
+        brush.dashOffset = this.dashOffset;
+      }
+    }
+
+    if (options.dashArray !== undefined) {
+      this.dashArray = options.dashArray;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.dashArray !== undefined) {
+        brush.dashArray = this.dashArray;
+      }
+    }
+
+    // 为笔刷设置手绘效果
+    const originalOnMouseMove = brush.onMouseMove;
+    brush.onMouseMove = function (pointer, options) {
+      // 添加微小随机偏移，模拟手绘效果
+      const jitter = (this.width / 4) * this.roughness;
+      pointer.x += (Math.random() - 0.5) * jitter;
+      pointer.y += (Math.random() - 0.5) * jitter;
+
+      // 调用原始方法
+      if (originalOnMouseMove) {
+        originalOnMouseMove.call(this, pointer, options);
+      }
+    };
+  }
+
+  /**
+   * 设置粗糙度
+   * @param {Number} value 粗糙度值(0-1)
+   */
+  setRoughness(value) {
+    this.roughness = Math.max(0, Math.min(1, value));
+
+    if (this.brush && this.brush.roughness !== undefined) {
+      this.brush.roughness = this.roughness;
+    }
+
+    return this.roughness;
+  }
+
+  /**
+   * 设置弯曲度
+   * @param {Number} value 弯曲度值(0-1)
+   */
+  setBowing(value) {
+    this.bowing = Math.max(0, Math.min(1, value));
+
+    if (this.brush && this.brush.bowing !== undefined) {
+      this.brush.bowing = this.bowing;
+    }
+
+    return this.bowing;
+  }
+
+  /**
+   * 设置是否描边
+   * @param {Boolean} value 是否描边
+   */
+  setStroke(value) {
+    this.stroke = value;
+
+    if (this.brush && this.brush.stroke !== undefined) {
+      this.brush.stroke = this.stroke;
+    }
+
+    return this.stroke;
+  }
+
+  /**
+   * 设置素描线条角度
+   * @param {Number} value 角度值(0-180)
+   */
+  setHachureAngle(value) {
+    this.hachureAngle = Math.max(0, Math.min(180, value));
+
+    if (this.brush && this.brush.hachureAngle !== undefined) {
+      this.brush.hachureAngle = this.hachureAngle;
+    }
+
+    return this.hachureAngle;
+  }
+
+  /**
+   * 设置虚线偏移量
+   * @param {Number} value 偏移量
+   */
+  setDashOffset(value) {
+    this.dashOffset = value;
+
+    if (this.brush && this.brush.dashOffset !== undefined) {
+      this.brush.dashOffset = this.dashOffset;
+    }
+
+    return this.dashOffset;
+  }
+
+  /**
+   * 设置虚线数组
+   * @param {Array} value 虚线数组[线长, 间隔]
+   */
+  setDashArray(value) {
+    if (Array.isArray(value) && value.length >= 2) {
+      this.dashArray = value;
+
+      if (this.brush && this.brush.dashArray !== undefined) {
+        this.brush.dashArray = this.dashArray;
+      }
+    }
+
+    return this.dashArray;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 定义素描笔刷特有属性
+    const sketchyProperties = [
+      {
+        id: "roughness",
+        name: "粗糙度",
+        type: "slider",
+        defaultValue: this.roughness,
+        min: 0,
+        max: 1,
+        step: 0.05,
+        description: "控制素描线条的粗糙程度",
+        category: "素描设置",
+        order: 100,
+      },
+      {
+        id: "bowing",
+        name: "弯曲度",
+        type: "slider",
+        defaultValue: this.bowing,
+        min: 0,
+        max: 1,
+        step: 0.05,
+        description: "控制素描线条的弯曲程度",
+        category: "素描设置",
+        order: 110,
+      },
+      {
+        id: "stroke",
+        name: "描边",
+        type: "checkbox",
+        defaultValue: this.stroke,
+        description: "是否使用描边",
+        category: "素描设置",
+        order: 120,
+      },
+      {
+        id: "hachureAngle",
+        name: "线条角度",
+        type: "slider",
+        defaultValue: this.hachureAngle,
+        min: 0,
+        max: 180,
+        step: 5,
+        description: "控制素描线条的角度",
+        category: "素描设置",
+        order: 130,
+      },
+      {
+        id: "dashOffset",
+        name: "虚线偏移",
+        type: "slider",
+        defaultValue: this.dashOffset,
+        min: 0,
+        max: 10,
+        step: 1,
+        description: "控制虚线的偏移量",
+        category: "素描设置",
+        order: 140,
+      },
+      {
+        id: "dashArray",
+        name: "虚线模式",
+        type: "select",
+        defaultValue: JSON.stringify(this.dashArray),
+        options: [
+          { value: JSON.stringify([0]), label: "实线" },
+          { value: JSON.stringify([6, 2]), label: "短虚线" },
+          { value: JSON.stringify([10, 5]), label: "长虚线" },
+          { value: JSON.stringify([2, 2]), label: "点线" },
+          { value: JSON.stringify([10, 5, 2, 5]), label: "点划线" },
+        ],
+        description: "设置虚线的模式",
+        category: "素描设置",
+        order: 150,
+        parseValue: (value) => JSON.parse(value),
+      },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...sketchyProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理素描笔刷特有属性
+    if (propId === "roughness") {
+      this.setRoughness(value);
+      return true;
+    } else if (propId === "bowing") {
+      this.setBowing(value);
+      return true;
+    } else if (propId === "stroke") {
+      this.setStroke(value);
+      return true;
+    } else if (propId === "hachureAngle") {
+      this.setHachureAngle(value);
+      return true;
+    } else if (propId === "dashOffset") {
+      this.setDashOffset(value);
+      return true;
+    } else if (propId === "dashArray") {
+      let parsedValue = value;
+      if (typeof value === "string") {
+        try {
+          parsedValue = JSON.parse(value);
+        } catch (e) {
+          console.error("Invalid dashArray value:", e);
+          return false;
+        }
+      }
+      this.setDashArray(parsedValue);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMjMgMzBDMjUgMjggNTIgMzggNzUgMzciIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMjIgNDBDMjIgMzggNTkgNDYgNzYgNDMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMjAgNTBDMjIgNDggNTYgNTYgNzYgNTIiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMjQgNjBDMjMgNTggNDYgNjQgNzUgNjQiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyLjgiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yNiA3MkMyNyA2OSA0OSA3NCA3NSA3MiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+";
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/SprayBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/SprayBrush.js
new file mode 100644
index 0000000..95181a8
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/SprayBrush.js
@@ -0,0 +1,246 @@
+import { BaseBrush } from "../BaseBrush";
+
+/**
+ * 喷枪笔刷
+ * 模拟喷枪效果，具有颗粒感和纹理
+ */
+export class SprayBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "crayon",
+      name: options.t('Canvas.Spray'),
+      description: "模拟喷枪效果，具有颗粒感和纹理",
+      category: options.t('Canvas.SpecialEffectsBrush'),
+      icon: "crayon",
+      ...options,
+    });
+
+    // 喷枪笔刷特有属性
+    this._baseWidth = options._baseWidth || 15;
+    this._size = options._size || 0;
+    this._sep = options._sep || options._sep === 0 ? options._sep : 1;
+    this._inkAmount = options._inkAmount || 10;
+    this.randomness = options.randomness || 0.8; // 随机性
+    this.texture = options.texture || "default"; // 纹理类型
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 创建fabric原生喷枪笔刷
+    this.brush = new fabric.CrayonBrush(this.canvas);
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    options._sep = options._sep || this._sep;
+    options._inkAmount = options._inkAmount || this._inkAmount;
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+      // 更新笔刷相关属性
+      this._baseWidth = options.width / 2;
+      this._size = options.width / 2 + this._baseWidth;
+    }
+
+    if (options.color !== undefined) {
+      brush.color = options.color;
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+
+    // 喷枪笔刷特有属性
+    if (options._baseWidth !== undefined) {
+      brush._baseWidth = options._baseWidth;
+      this._baseWidth = options._baseWidth;
+      this._size = this.width / 2 + this._baseWidth;
+    }
+    if (options._sep !== undefined) {
+      brush._sep = options._sep;
+      this._sep = options._sep;
+    }
+
+    if (options._inkAmount !== undefined) {
+      brush._inkAmount = options._inkAmount;
+      this._inkAmount = options._inkAmount;
+    }
+  }
+
+  /**
+   * 设置颗粒分离度
+   * @param {Number} sep 分离度值
+   */
+  setSeparation(sep) {
+    this._sep = Math.max(0.5, Math.min(10, sep));
+
+    if (this.brush) {
+      this.brush._sep = this._sep;
+    }
+
+    return this._sep;
+  }
+
+  /**
+   * 设置墨量
+   * @param {Number} amount 墨量值
+   */
+  setInkAmount(amount) {
+    this._inkAmount = Math.max(1, Math.min(50, amount));
+
+    if (this.brush) {
+      this.brush._inkAmount = this._inkAmount;
+    }
+
+    return this._inkAmount;
+  }
+
+  /**
+   * 设置随机性
+   * @param {Number} value 随机性值(0-1)
+   */
+  setRandomness(value) {
+    this.randomness = Math.max(0, Math.min(1, value));
+    return this.randomness;
+  }
+
+  /**
+   * 设置纹理类型
+   * @param {String} type 纹理类型
+   */
+  setTexture(type) {
+    this.texture = type;
+    // 实际应用可能需要更多的实现逻辑
+    return this.texture;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 定义喷枪笔刷特有属性
+    const crayonProperties = [
+      {
+        id: "separation",
+        name: this.t('Canvas.ParticleSeparationDegree'),
+        type: "slider",
+        defaultValue: this._sep,
+        min: 0.5,
+        max: 10,
+        step: 0.5,
+        description: this.t('Canvas.ParticleSeparationDegree'),
+        category: this.t('Canvas.SpraySettings'),
+        order: 100,
+      },
+      {
+        id: "inkAmount",
+        name: this.t('Canvas.TheAmountOfInk'),
+        type: "slider",
+        defaultValue: this._inkAmount,
+        min: 1,
+        max: 50,
+        step: 1,
+        description: this.t('Canvas.TheAmountOfInkDescription'),
+        category: this.t('Canvas.SpraySettings'),
+        order: 110,
+      },
+      {
+        id: "randomness",
+        name: this.t('Canvas.randomness'),
+        type: "slider",
+        defaultValue: this.randomness,
+        min: 0,
+        max: 1,
+        step: 0.05,
+        description: this.t('Canvas.randomnessDescription'),
+        category: this.t('Canvas.SpraySettings'),
+        order: 120,
+      },
+      {
+        id: "texture",
+        name: this.t('Canvas.TextureType'),
+        type: "select",
+        defaultValue: this.texture,
+        options: [
+          { value: "default", label: this.t('Canvas.Default') },
+          { value: "rough", label: this.t('Canvas.Rough') },
+          { value: "smooth", label: this.t('Canvas.Smooth') },
+        ],
+        description: this.t('Canvas.TextureTypeDescription'),
+        category: this.t('Canvas.SpraySettings'),
+        order: 130,
+      },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...crayonProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理喷枪笔刷特有属性
+    if (propId === "separation") {
+      this.setSeparation(value);
+      return true;
+    } else if (propId === "inkAmount") {
+      this.setInkAmount(value);
+      return true;
+    } else if (propId === "randomness") {
+      this.setRandomness(value);
+      return true;
+    } else if (propId === "texture") {
+      this.setTexture(value);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cmVjdCB4PSIxMCIgeT0iMTAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiLz48cmVjdCB4PSIyMCIgeT0iMjAiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiLz48cmVjdCB4PSIzMCIgeT0iMzAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=";
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/SpraypaintBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/SpraypaintBrush.js
new file mode 100644
index 0000000..ca87e24
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/SpraypaintBrush.js
@@ -0,0 +1,315 @@
+import { BaseBrush } from "../BaseBrush";
+
+/**
+ * 喷漆笔刷
+ * 创建喷漆效果，点状分散的绘制风格
+ */
+export class SpraypaintBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "spraypaint",
+      name: "喷漆笔刷",
+      description: "创建喷漆效果，点状分散的绘制风格",
+      category: "绘画笔刷",
+      icon: "spraypaint",
+      ...options,
+    });
+
+    // 喷漆笔刷特有属性
+    this.density = options.density || 20;
+    this.sprayRadius = options.sprayRadius || 10;
+    this.randomOpacity = options.randomOpacity !== undefined ? options.randomOpacity : true;
+    this.dotSize = options.dotSize || 1;
+    this.dotShape = options.dotShape || "circle";
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 创建fabric原生喷漆笔刷
+    this.brush = new fabric.SprayBrush(this.canvas);
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 设置基本属性
+    if (options.width !== undefined) {
+      brush.width = options.width;
+    }
+
+    if (options.color !== undefined) {
+      brush.color = options.color;
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+
+    // 喷漆笔刷特有属性
+    if (options.density !== undefined) {
+      this.density = options.density;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.density !== undefined) {
+        brush.density = this.density;
+      }
+    }
+
+    if (options.sprayRadius !== undefined) {
+      this.sprayRadius = options.sprayRadius;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.sprayWidth !== undefined) {
+        brush.sprayWidth = this.sprayRadius;
+      } else if (brush.width !== undefined) {
+        brush.width = this.sprayRadius;
+      }
+    }
+
+    if (options.randomOpacity !== undefined) {
+      this.randomOpacity = options.randomOpacity;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.randomOpacity !== undefined) {
+        brush.randomOpacity = this.randomOpacity;
+      }
+    }
+
+    if (options.dotSize !== undefined) {
+      this.dotSize = options.dotSize;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.dotWidth !== undefined) {
+        brush.dotWidth = this.dotSize;
+      }
+    }
+
+    if (options.dotShape !== undefined) {
+      this.dotShape = options.dotShape;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.dotShape !== undefined) {
+        brush.dotShape = this.dotShape;
+      }
+    }
+  }
+
+  /**
+   * 设置喷漆密度
+   * @param {Number} value 密度值
+   */
+  setDensity(value) {
+    this.density = Math.max(1, Math.min(100, value));
+
+    if (this.brush && this.brush.density !== undefined) {
+      this.brush.density = this.density;
+    }
+
+    return this.density;
+  }
+
+  /**
+   * 设置喷漆半径
+   * @param {Number} value 半径值
+   */
+  setSprayRadius(value) {
+    this.sprayRadius = Math.max(1, value);
+
+    if (this.brush) {
+      if (this.brush.sprayWidth !== undefined) {
+        this.brush.sprayWidth = this.sprayRadius;
+      } else if (this.brush.width !== undefined) {
+        this.brush.width = this.sprayRadius;
+      }
+    }
+
+    return this.sprayRadius;
+  }
+
+  /**
+   * 设置是否随机透明度
+   * @param {Boolean} value 是否随机透明度
+   */
+  setRandomOpacity(value) {
+    this.randomOpacity = value;
+
+    if (this.brush && this.brush.randomOpacity !== undefined) {
+      this.brush.randomOpacity = this.randomOpacity;
+    }
+
+    return this.randomOpacity;
+  }
+
+  /**
+   * 设置点大小
+   * @param {Number} value 点大小
+   */
+  setDotSize(value) {
+    this.dotSize = Math.max(0.1, value);
+
+    if (this.brush && this.brush.dotWidth !== undefined) {
+      this.brush.dotWidth = this.dotSize;
+    }
+
+    return this.dotSize;
+  }
+
+  /**
+   * 设置点形状
+   * @param {String} value 点形状，如 'circle', 'square', 'diamond'
+   */
+  setDotShape(value) {
+    const validShapes = ["circle", "square", "diamond", "random"];
+
+    if (validShapes.includes(value)) {
+      this.dotShape = value;
+
+      if (this.brush && this.brush.dotShape !== undefined) {
+        this.brush.dotShape = this.dotShape;
+      }
+    }
+
+    return this.dotShape;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 定义喷漆笔刷特有属性
+    const spraypaintProperties = [
+      {
+        id: "density",
+        name: "喷漆密度",
+        type: "slider",
+        defaultValue: this.density,
+        min: 1,
+        max: 100,
+        step: 1,
+        description: "控制喷漆点的密度",
+        category: "喷漆设置",
+        order: 100,
+      },
+      {
+        id: "sprayRadius",
+        name: "喷漆半径",
+        type: "slider",
+        defaultValue: this.sprayRadius,
+        min: 1,
+        max: 50,
+        step: 1,
+        description: "控制喷漆的覆盖半径",
+        category: "喷漆设置",
+        order: 110,
+      },
+      {
+        id: "randomOpacity",
+        name: "随机透明度",
+        type: "checkbox",
+        defaultValue: this.randomOpacity,
+        description: "使喷漆点有随机透明度",
+        category: "喷漆设置",
+        order: 120,
+      },
+      {
+        id: "dotSize",
+        name: "点大小",
+        type: "slider",
+        defaultValue: this.dotSize,
+        min: 0.1,
+        max: 10,
+        step: 0.1,
+        description: "控制喷漆点的大小",
+        category: "喷漆设置",
+        order: 130,
+      },
+      {
+        id: "dotShape",
+        name: "点形状",
+        type: "select",
+        defaultValue: this.dotShape,
+        options: [
+          { value: "circle", label: "圆形" },
+          { value: "square", label: "方形" },
+          { value: "diamond", label: "菱形" },
+          { value: "random", label: "随机" },
+        ],
+        description: "设置喷漆点的形状",
+        category: "喷漆设置",
+        order: 140,
+      },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...spraypaintProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理喷漆笔刷特有属性
+    if (propId === "density") {
+      this.setDensity(value);
+      return true;
+    } else if (propId === "sprayRadius") {
+      this.setSprayRadius(value);
+      return true;
+    } else if (propId === "randomOpacity") {
+      this.setRandomOpacity(value);
+      return true;
+    } else if (propId === "dotSize") {
+      this.setDotSize(value);
+      return true;
+    } else if (propId === "dotShape") {
+      this.setDotShape(value);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1NSIgY3k9IjUwIiByPSIyMCIgZmlsbD0icmdiYSgwLDAsMCwwLjEpIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMC41Ii8+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMSIgZmlsbD0iIzAwMCIvPjxjaXJjbGUgY3g9IjU1IiBjeT0iNTUiIHI9IjAuOCIgZmlsbD0iIzAwMCIvPjxjaXJjbGUgY3g9IjYwIiBjeT0iNDUiIHI9IjEuMiIgZmlsbD0iIzAwMCIvPjxjaXJjbGUgY3g9IjQ1IiBjeT0iNTUiIHI9IjAuNyIgZmlsbD0iIzAwMCIvPjxjaXJjbGUgY3g9IjQ3IiBjeT0iNDgiIHI9IjAuOSIgZmlsbD0iIzAwMCIvPjxjaXJjbGUgY3g9IjU4IiBjeT0iNTMiIHI9IjEuMSIgZmlsbD0iIzAwMCIvPjxjaXJjbGUgY3g9IjYyIiBjeT0iNTYiIHI9IjAuNiIgZmlsbD0iIzAwMCIvPjxjaXJjbGUgY3g9IjUyIiBjeT0iNTgiIHI9IjAuOCIgZmlsbD0iIzAwMCIvPjxjaXJjbGUgY3g9IjU0IiBjeT0iNDMiIHI9IjEiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSI0OSIgY3k9IjQzIiByPSIwLjYiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSI0MyIgY3k9IjQ3IiByPSIwLjciIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSI2NSIgY3k9IjQ4IiByPSIwLjkiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSI2MiIgY3k9IjQxIiByPSIwLjUiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSI0OSIgY3k9IjYxIiByPSIwLjgiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSI2NiIgY3k9IjUyIiByPSIwLjciIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSI0MSIgY3k9IjUxIiByPSIwLjYiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSI2OCIgY3k9IjU3IiByPSIwLjQiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSI0NSIgY3k9IjQwIiByPSIwLjUiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSI1NyIgY3k9IjYxIiByPSIwLjciIGZpbGw9IiMwMDAiLz48L3N2Zz4=";
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/TextureBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/TextureBrush.js
new file mode 100644
index 0000000..71ce6f1
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/TextureBrush.js
@@ -0,0 +1,945 @@
+import { BaseBrush } from "../BaseBrush";
+import { fabric } from "fabric-with-all";
+import texturePresetManager from "../TexturePresetManager";
+import i18n from "@/lang/index.ts";
+const {t} = i18n.global;
+
+/**
+ * 纹理笔刷
+ * 使用图像纹理进行绘制的笔刷
+ */
+export class TextureBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "texture",
+      name: "纹理笔刷",
+      description: "使用图像纹理进行绘制的笔刷",
+      category: "特效笔刷",
+      icon: "texture",
+      ...options,
+    });
+
+    // 纹理笔刷特有属性
+    this.textureSource = options.textureSource || null;
+    this.textureRepeat = options.textureRepeat || "repeat";
+    this.textureScale = options.textureScale || 1;
+    this.textureAngle = options.textureAngle || 0;
+    this.opacity = options.opacity !== undefined ? options.opacity : 1;
+
+    // 预设材质相关
+    this.selectedTextureId = options.selectedTextureId || null;
+    this.texturePresets = [];
+
+    // 加载预设材质
+    this._loadTexturePresets();
+
+    // 当前选中的材质索引
+    this.currentTextureIndex = options.currentTextureIndex || 0;
+
+    // 从预设管理器加载自定义材质
+    texturePresetManager.loadCustomTexturesFromStorage();
+  }
+
+  /**
+   * 加载材质预设
+   * @private
+   */
+  _loadTexturePresets() {
+    // 从预设管理器获取所有材质
+    this.texturePresets = texturePresetManager.getAllTextures();
+
+    // 如果没有选中的材质ID，使用第一个预设材质
+    if (!this.selectedTextureId && this.texturePresets.length > 0) {
+      this.selectedTextureId = this.texturePresets[0].id;
+      this.currentTextureIndex = 0;
+    }
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 创建fabric原生纹理笔刷
+    this.brush = new fabric.PatternBrush(this.canvas);
+
+    // 重写 _finalizeAndAddPath 方法，使其调用 convertToImg 而不是创建 Path 对象
+    const originalFinalizeAndAddPath = this.brush._finalizeAndAddPath.bind(this.brush);
+    const self = this; // 保存外部this引用
+
+    this.brush._finalizeAndAddPath = function () {
+      console.log("TextureBrush: _finalizeAndAddPath called");
+      const ctx = this.canvas.contextTop;
+      ctx.closePath();
+
+      // 应用点简化（如果PatternBrush支持）
+      if (this.decimate && this._points) {
+        this._points = this.decimatePoints(this._points, this.decimate);
+      }
+
+      console.log("TextureBrush: points count =", this._points ? this._points.length : 0);
+
+      // 检查是否有有效的路径数据
+      if (!this._points || this._points.length < 2) {
+        // 如果点数不足，直接请求重新渲染
+        console.log("TextureBrush: Not enough points, skipping");
+        this.canvas.requestRenderAll();
+        return;
+      }
+
+      const pathData = this.convertPointsToSVGPath(this._points);
+
+      const isEmpty = self._isEmptySVGPath(pathData);
+      console.log("TextureBrush: isEmpty =", isEmpty);
+
+      if (isEmpty) {
+        // 如果路径为空，直接请求重新渲染
+        console.log("TextureBrush: Path is empty, skipping");
+        this.canvas.requestRenderAll();
+        return;
+      }
+
+      // 先触发事件，模拟原生行为
+      const path = this.createPath(pathData);
+      this.canvas.fire("before:path:created", { path: path });
+
+      console.log("TextureBrush: Calling convertToImg");
+
+      // 调用 convertToImg 方法将绘制内容转换为图片
+      if (typeof this.convertToImg === "function") {
+        this.convertToImg();
+        console.log("TextureBrush: convertToImg called successfully");
+      } else {
+        console.warn("convertToImg method not found, falling back to original behavior");
+        // 如果没有convertToImg方法，回退到原始行为
+        this.canvas.add(path);
+        this.canvas.fire("path:created", { path: path });
+        this.canvas.clearContext(this.canvas.contextTop);
+      }
+
+      // 重置阴影
+      this._resetShadow();
+    };
+
+    // 配置笔刷基本属性
+    this.configure(this.brush, this.options);
+
+    // 如果有选中的材质，则设置纹理
+    if (this.selectedTextureId) {
+      this.setTextureById(this.selectedTextureId);
+    } else if (this.textureSource) {
+      this.setTexture(this.textureSource);
+    }
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 设置基本属性
+    if (options.width !== undefined) {
+      brush.width = options.width;
+    }
+
+    if (options.color !== undefined) {
+      brush.color = options.color;
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+
+    // 纹理笔刷特有属性
+    if (options.textureRepeat !== undefined) {
+      this.textureRepeat = options.textureRepeat;
+      // 需要重新应用纹理以应用重复模式
+      if (this.selectedTextureId) {
+        this.setTextureById(this.selectedTextureId);
+      } else if (this.textureSource) {
+        this.setTexture(this.textureSource);
+      }
+    }
+
+    if (options.textureScale !== undefined) {
+      this.textureScale = options.textureScale;
+      // 需要重新应用纹理以应用缩放
+      if (this.selectedTextureId) {
+        this.setTextureById(this.selectedTextureId);
+      } else if (this.textureSource) {
+        this.setTexture(this.textureSource);
+      }
+    }
+
+    if (options.textureAngle !== undefined) {
+      this.textureAngle = options.textureAngle;
+      // 需要重新应用纹理以应用旋转角度
+      if (this.selectedTextureId) {
+        this.setTextureById(this.selectedTextureId);
+      } else if (this.textureSource) {
+        this.setTexture(this.textureSource);
+      }
+    }
+
+    if (options.opacity !== undefined) {
+      this.opacity = options.opacity;
+      // 需要重新应用纹理以应用透明度
+      if (this.selectedTextureId) {
+        this.setTextureById(this.selectedTextureId);
+      } else if (this.textureSource) {
+        this.setTexture(this.textureSource);
+      }
+    }
+  }
+
+  /**
+   * 根据材质ID设置纹理
+   * @param {String} textureId 材质ID
+   * @returns {Promise} 加载完成的Promise
+   */
+  setTextureById(textureId) {
+    const texture = texturePresetManager.getTextureById(textureId);
+    if (!texture) {
+      return Promise.reject(new Error(`材质 ${textureId} 不存在`));
+    }
+
+    this.selectedTextureId = textureId;
+
+    // 更新当前材质索引
+    const allTextures = texturePresetManager.getAllTextures();
+    this.currentTextureIndex = allTextures.findIndex((t) => t.id === textureId);
+
+    return this.setTexture(texture.path);
+  }
+
+  /**
+   * 设置纹理
+   * @param {String|Object} source 纹理源（URL或Image对象）
+   * @returns {Promise} 加载完成的Promise
+   */
+  setTexture(source) {
+    this.textureSource = source;
+
+    if (!this.brush) {
+      return Promise.reject(new Error("笔刷实例不存在"));
+    }
+
+    return new Promise((resolve, reject) => {
+      if (typeof source === "string") {
+        // 如果是URL，加载图像
+        fabric.util.loadImage(source, (img) => {
+          if (!img) {
+            reject(new Error("纹理加载失败"));
+            return;
+          }
+          this._applyTextureToPatternBrush(img);
+          resolve(img);
+        });
+      } else if (source instanceof Image || source instanceof HTMLCanvasElement) {
+        // 如果已经是Image或Canvas对象，直接使用
+        this._applyTextureToPatternBrush(source);
+        resolve(source);
+      } else {
+        reject(new Error("无效的纹理源"));
+      }
+    });
+  }
+
+  /**
+   * 将纹理应用到PatternBrush
+   * @param {Object} img 图像对象
+   * @private
+   */
+  _applyTextureToPatternBrush(img) {
+    if (!this.brush || !img) return;
+
+    // 创建Canvas来处理纹理
+    const canvasTexture = document.createElement("canvas");
+    const ctx = canvasTexture.getContext("2d");
+
+    // 根据缩放设置Canvas大小
+    const width = img.width * this.textureScale;
+    const height = img.height * this.textureScale;
+    canvasTexture.width = width;
+    canvasTexture.height = height;
+
+    // 应用纹理透明度设置 - 仅控制纹理的透明度
+    if (this.opacity < 1) {
+      ctx.globalAlpha = this.opacity;
+    }
+
+    // 绘制前应用旋转
+    if (this.textureAngle !== 0) {
+      ctx.save();
+      ctx.translate(width / 2, height / 2);
+      ctx.rotate((this.textureAngle * Math.PI) / 180);
+      ctx.translate(-width / 2, -height / 2);
+      ctx.drawImage(img, 0, 0, width, height);
+      ctx.restore();
+    } else {
+      ctx.drawImage(img, 0, 0, width, height);
+    }
+
+    // 缓存处理后的纹理图像
+    this._processedTextureCanvas = canvasTexture;
+
+    // 使用fabric.js 5.x正确的API方式设置PatternBrush
+    // 直接设置source属性，这是PatternBrush的标准用法
+    this.brush.source = canvasTexture;
+
+    this.brush.canvas.opacity = this.opacity; // 确保画布不透明
+
+    // 设置笔刷颜色为完全透明的RGBA，避免重复绘制时的叠加效果
+    // 笔刷的透明度通过RGBA颜色控制，而不是通过globalAlpha
+    const brushOpacity = this.brush.opacity || 1;
+    this.brush.color = `rgba(0, 0, 0, ${brushOpacity})`;
+
+    // 确保画布上下文使用完整的透明度，避免圆圈重叠问题
+    // if (this.canvas && this.canvas.contextTop) {
+    //   this.canvas.contextTop.globalAlpha = 1;
+    // }
+
+    // 通知画布重绘
+    if (this.canvas && this.canvas.requestRenderAll) {
+      this.canvas.requestRenderAll();
+    }
+  }
+
+  /**
+   * 设置纹理重复模式
+   * @param {String} mode 重复模式：'repeat', 'repeat-x', 'repeat-y', 'no-repeat'
+   * @returns {String} 设置后的重复模式
+   */
+  setTextureRepeat(mode) {
+    const validModes = ["repeat", "repeat-x", "repeat-y", "no-repeat"];
+    if (validModes.includes(mode)) {
+      this.textureRepeat = mode;
+
+      // 重新应用纹理以更新重复模式
+      if (this.selectedTextureId) {
+        this.setTextureById(this.selectedTextureId);
+      } else if (this.textureSource) {
+        this.setTexture(this.textureSource);
+      }
+    }
+
+    return this.textureRepeat;
+  }
+
+  /**
+   * 设置纹理缩放比例
+   * @param {Number} scale 缩放比例
+   * @returns {Number} 设置后的缩放比例
+   */
+  setTextureScale(scale) {
+    this.textureScale = Math.max(0.1, scale);
+
+    // 重新应用纹理以更新缩放
+    if (this.selectedTextureId) {
+      this.setTextureById(this.selectedTextureId);
+    } else if (this.textureSource) {
+      this.setTexture(this.textureSource);
+    }
+
+    return this.textureScale;
+  }
+
+  /**
+   * 设置纹理旋转角度
+   * @param {Number} angle 旋转角度（度）
+   * @returns {Number} 设置后的旋转角度
+   */
+  setTextureAngle(angle) {
+    this.textureAngle = angle % 360;
+
+    // 重新应用纹理以更新旋转角度
+    if (this.selectedTextureId) {
+      this.setTextureById(this.selectedTextureId);
+    } else if (this.textureSource) {
+      this.setTexture(this.textureSource);
+    }
+
+    return this.textureAngle;
+  }
+
+  /**
+   * 设置纹理透明度
+   * @param {Number} opacity 透明度
+   * @returns {Number} 设置后的透明度
+   */
+  setopacity(opacity) {
+    this.opacity = Math.min(1, Math.max(0, opacity));
+
+    // 重新应用纹理以更新透明度
+    if (this.selectedTextureId) {
+      this.setTextureById(this.selectedTextureId);
+    } else if (this.textureSource) {
+      this.setTexture(this.textureSource);
+    }
+
+    return this.opacity;
+  }
+
+  /**
+   * 切换到下一个预设材质
+   * @returns {Promise} 切换完成的Promise
+   */
+  nextTexture() {
+    const textures = texturePresetManager.getAllTextures();
+    if (textures.length === 0) return Promise.resolve();
+
+    this.currentTextureIndex = (this.currentTextureIndex + 1) % textures.length;
+    const nextTexture = textures[this.currentTextureIndex];
+
+    return this.setTextureById(nextTexture.id);
+  }
+
+  /**
+   * 切换到上一个预设材质
+   * @returns {Promise} 切换完成的Promise
+   */
+  previousTexture() {
+    const textures = texturePresetManager.getAllTextures();
+    if (textures.length === 0) return Promise.resolve();
+
+    this.currentTextureIndex =
+      this.currentTextureIndex === 0 ? textures.length - 1 : this.currentTextureIndex - 1;
+    const prevTexture = textures[this.currentTextureIndex];
+
+    return this.setTextureById(prevTexture.id);
+  }
+
+  /**
+   * 使用索引切换纹理
+   * @param {Number} index 纹理索引
+   */
+  switchTexture(index) {
+    const textures = texturePresetManager.getAllTextures();
+    if (index >= 0 && index < textures.length) {
+      this.currentTextureIndex = index;
+      const texture = textures[index];
+      return this.setTextureById(texture.id);
+    }
+    return Promise.reject(new Error("无效的纹理索引"));
+  }
+
+  /**
+   * 获取当前选中的材质信息
+   * @returns {Object|null} 材质信息
+   */
+  getCurrentTexture() {
+    if (this.selectedTextureId) {
+      return texturePresetManager.getTextureById(this.selectedTextureId);
+    }
+    return null;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 获取所有可用材质
+    const allTextures = texturePresetManager.getAllTextures();
+    const textureOptions = allTextures.map((texture, index) => ({
+      value: texture.id,
+      label: texture.name,
+      preview: texturePresetManager.getTexturePreviewUrl(texture),
+      category: texture.category,
+    }));
+
+    // 定义纹理笔刷特有属性
+    const textureProperties = [
+      {
+        id: "textureSelector",
+        name: t('Canvas.TextureSelector'),
+        type: "texture-grid",
+        defaultValue: this.selectedTextureId,
+        options: textureOptions,
+        description: t('Canvas.selectTexture'),
+        category: t('Canvas.TextureSettings'),
+        order: 100,
+        hidden: allTextures.length === 0,
+      },
+      // {
+      //   id: "textureRepeat",
+      //   name: "纹理重复模式",
+      //   type: "select",
+      //   defaultValue: this.textureRepeat,
+      //   options: [
+      //     { value: "repeat", label: "双向重复" },
+      //     { value: "repeat-x", label: "水平重复" },
+      //     { value: "repeat-y", label: "垂直重复" },
+      //     { value: "no-repeat", label: "不重复" },
+      //   ],
+      //   description: "设置纹理的重复模式",
+      //   category: "纹理设置",
+      //   order: 110,
+      // },
+      // {
+      //   id: "textureScale",
+      //   name: "纹理缩放",
+      //   type: "slider",
+      //   defaultValue: this.textureScale,
+      //   min: 0.1,
+      //   max: 5,
+      //   step: 0.1,
+      //   description: "调整纹理的缩放比例",
+      //   category: "纹理设置",
+      //   order: 120,
+      // },
+      // {
+      //   id: "textureAngle",
+      //   name: "纹理旋转",
+      //   type: "slider",
+      //   defaultValue: this.textureAngle,
+      //   min: 0,
+      //   max: 360,
+      //   step: 5,
+      //   description: "调整纹理的旋转角度",
+      //   category: "纹理设置",
+      //   order: 130,
+      // },
+      // {
+      //   id: "opacity",
+      //   name: "纹理透明度",
+      //   type: "slider",
+      //   defaultValue: this.opacity,
+      //   min: 0,
+      //   max: 1,
+      //   step: 0.05,
+      //   description: "调整纹理的透明度",
+      //   category: "纹理设置",
+      //   order: 140,
+      // },
+      // {
+      //   id: "uploadTexture",
+      //   name: "上传纹理",
+      //   type: "file",
+      //   action: "uploadTexture",
+      //   description: "上传自定义纹理",
+      //   category: "纹理设置",
+      //   order: 150,
+      // },
+      // {
+      //   id: "texturePreview",
+      //   name: "纹理预览",
+      //   type: "preview",
+      //   description: "当前纹理预览",
+      //   category: "纹理设置",
+      //   order: 160,
+      //   getValue: () => {
+      //     const currentTexture = this.getCurrentTexture();
+      //     return currentTexture
+      //       ? texturePresetManager.getTexturePreviewUrl(currentTexture)
+      //       : null;
+      //   },
+      // },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...textureProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理纹理笔刷特有属性
+    if (propId === "textureSelector") {
+      this.setTextureById(value);
+      return true;
+    } else if (propId === "textureRepeat") {
+      this.setTextureRepeat(value);
+      return true;
+    } else if (propId === "textureScale") {
+      this.setTextureScale(value);
+      return true;
+    } else if (propId === "textureAngle") {
+      this.setTextureAngle(value);
+      return true;
+    } else if (propId === "opacity") {
+      this.setopacity(value);
+      return true;
+    } else if (propId === "uploadTexture") {
+      // 触发上传纹理事件
+      // 这里通常由外部处理，返回true表示属性被处理
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 添加自定义材质
+   * @param {Object} textureData 材质数据
+   * @returns {String} 材质ID
+   */
+  addCustomTexture(textureData) {
+    const textureId = texturePresetManager.addCustomTexture(textureData);
+
+    // 重新加载材质预设
+    this._loadTexturePresets();
+
+    // 保存到本地存储
+    texturePresetManager.saveCustomTexturesToStorage();
+
+    return textureId;
+  }
+
+  /**
+   * 删除自定义材质
+   * @param {String} textureId 材质ID
+   * @returns {Boolean} 是否删除成功
+   */
+  removeCustomTexture(textureId) {
+    const success = texturePresetManager.removeCustomTexture(textureId);
+
+    if (success) {
+      // 如果删除的是当前选中的材质，切换到第一个可用材质
+      if (this.selectedTextureId === textureId) {
+        const allTextures = texturePresetManager.getAllTextures();
+        if (allTextures.length > 0) {
+          this.setTextureById(allTextures[0].id);
+        } else {
+          this.selectedTextureId = null;
+          this.currentTextureIndex = 0;
+        }
+      }
+
+      // 重新加载材质预设
+      this._loadTexturePresets();
+
+      // 保存到本地存储
+      texturePresetManager.saveCustomTexturesToStorage();
+    }
+
+    return success;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    const currentTexture = this.getCurrentTexture();
+    if (currentTexture) {
+      return texturePresetManager.getTexturePreviewUrl(currentTexture);
+    }
+
+    // 返回默认纹理预览
+    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48cGF0dGVybiBpZD0icGF0dGVybiIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIj48cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iNSIgeT0iNSIgd2lkdGg9IjUiIGhlaWdodD0iNSIgZmlsbD0iI2RkZCIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=";
+  }
+
+  /**
+   * 笔刷被选中时调用
+   * @override
+   */
+  onSelected() {
+    // 重新加载材质预设（可能有新的自定义材质）
+    this._loadTexturePresets();
+  }
+
+  /**
+   * 销毁笔刷实例并清理资源
+   * @override
+   */
+  destroy() {
+    super.destroy();
+    this.textureSource = null;
+    this.selectedTextureId = null;
+    this.texturePresets = [];
+  }
+
+  /**
+   * 设置材质属性
+   * @param {String} property 属性名称
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否设置成功
+   */
+  setTextureProperty(property, value) {
+    switch (property) {
+      case "scale":
+        return this.setTextureScale(value);
+      case "opacity":
+        return this.setopacity(value);
+      case "repeat":
+        return this.setTextureRepeat(value);
+      case "angle":
+        return this.setTextureAngle(value);
+      default:
+        return false;
+    }
+  }
+
+  /**
+   * 获取材质属性
+   * @param {String} property 属性名称
+   * @returns {any} 属性值
+   */
+  getTextureProperty(property) {
+    switch (property) {
+      case "scale":
+        return this.textureScale;
+      case "opacity":
+        return this.opacity;
+      case "repeat":
+        return this.textureRepeat;
+      case "angle":
+        return this.textureAngle;
+      case "textureId":
+        return this.selectedTextureId;
+      default:
+        return undefined;
+    }
+  }
+
+  /**
+   * 应用材质预设
+   * @param {String|Object} preset 预设ID或预设对象
+   * @returns {Boolean} 是否应用成功
+   */
+  applyTexturePreset(preset) {
+    let presetData = null;
+
+    if (typeof preset === "string") {
+      // 如果是预设ID，从预设管理器获取
+      presetData = texturePresetManager.applyTexturePreset(preset);
+    } else if (typeof preset === "object") {
+      // 如果是预设对象，直接使用
+      presetData = preset;
+    }
+
+    if (!presetData) {
+      console.warn("无效的材质预设:", preset);
+      return false;
+    }
+
+    // 应用预设设置
+    if (presetData.textureId) {
+      this.setTextureById(presetData.textureId);
+    }
+
+    if (presetData.scale !== undefined) {
+      this.setTextureScale(presetData.scale);
+    }
+
+    if (presetData.opacity !== undefined) {
+      this.setopacity(presetData.opacity);
+    }
+
+    if (presetData.repeat !== undefined) {
+      this.setTextureRepeat(presetData.repeat);
+    }
+
+    if (presetData.angle !== undefined) {
+      this.setTextureAngle(presetData.angle);
+    }
+
+    // 如果预设包含笔刷属性，也一并应用
+    if (presetData.brushSize !== undefined && this.brush) {
+      this.brush.width = presetData.brushSize;
+    }
+
+    if (presetData.brushOpacity !== undefined && this.brush) {
+      this.brush.opacity = presetData.brushOpacity;
+    }
+
+    if (presetData.brushColor !== undefined && this.brush) {
+      this.brush.color = presetData.brushColor;
+    }
+
+    return true;
+  }
+
+  /**
+   * 获取当前材质状态
+   * @returns {Object} 当前材质状态
+   */
+  getCurrentTextureState() {
+    return {
+      textureId: this.selectedTextureId,
+      scale: this.textureScale,
+      opacity: this.opacity,
+      repeat: this.textureRepeat,
+      angle: this.textureAngle,
+      // 包含笔刷状态
+      brushSize: this.brush ? this.brush.width : this.options.width,
+      brushOpacity: this.brush ? this.brush.opacity : this.options.opacity,
+      brushColor: this.brush ? this.brush.color : this.options.color,
+    };
+  }
+
+  /**
+   * 恢复材质状态
+   * @param {Object} state 要恢复的状态
+   * @returns {Boolean} 是否恢复成功
+   */
+  restoreTextureState(state) {
+    if (!state) return false;
+
+    try {
+      // 恢复材质属性
+      if (state.textureId) {
+        this.setTextureById(state.textureId);
+      }
+
+      if (state.scale !== undefined) {
+        this.setTextureScale(state.scale);
+      }
+
+      if (state.opacity !== undefined) {
+        this.setopacity(state.opacity);
+      }
+
+      if (state.repeat !== undefined) {
+        this.setTextureRepeat(state.repeat);
+      }
+
+      if (state.angle !== undefined) {
+        this.setTextureAngle(state.angle);
+      }
+
+      // 恢复笔刷属性
+      if (this.brush) {
+        if (state.brushSize !== undefined) {
+          this.brush.width = state.brushSize;
+        }
+
+        if (state.brushOpacity !== undefined) {
+          this.brush.opacity = state.brushOpacity;
+        }
+
+        if (state.brushColor !== undefined) {
+          this.brush.color = state.brushColor;
+        }
+      }
+
+      return true;
+    } catch (error) {
+      console.error("恢复材质状态失败:", error);
+      return false;
+    }
+  }
+
+  /**
+   * 创建材质预设
+   * @param {String} name 预设名称
+   * @returns {String} 预设ID
+   */
+  createTexturePreset(name) {
+    const currentState = this.getCurrentTextureState();
+    return texturePresetManager.createTexturePreset(name, currentState);
+  }
+
+  /**
+   * 获取可用的材质分类
+   * @returns {Array} 分类数组
+   */
+  getTextureCategories() {
+    return texturePresetManager.getCategories();
+  }
+
+  /**
+   * 根据分类获取材质
+   * @param {String} category 分类名称
+   * @returns {Array} 材质数组
+   */
+  getTexturesByCategory(category) {
+    return texturePresetManager.getTexturesByCategory(category);
+  }
+
+  /**
+   * 搜索材质
+   * @param {String} query 搜索关键词
+   * @returns {Array} 匹配的材质数组
+   */
+  searchTextures(query) {
+    return texturePresetManager.searchTextures(query);
+  }
+
+  /**
+   * 预加载材质图像
+   * @param {String} textureId 材质ID
+   * @returns {Promise<HTMLImageElement>} 图像对象
+   */
+  preloadTexture(textureId) {
+    return texturePresetManager.loadTextureImage(textureId);
+  }
+
+  /**
+   * 批量预加载材质
+   * @param {Array} textureIds 材质ID数组
+   * @returns {Promise<Array>} 加载结果数组
+   */
+  preloadTextures(textureIds) {
+    const loadPromises = textureIds.map((id) =>
+      this.preloadTexture(id).catch((error) => ({ id, error }))
+    );
+    return Promise.all(loadPromises);
+  }
+
+  /**
+   * 获取材质统计信息
+   * @returns {Object} 统计信息
+   */
+  getTextureStats() {
+    return texturePresetManager.getStats();
+  }
+
+  /**
+   * 检查 SVG 路径是否为空
+   * @private
+   * @param {Array} pathData SVG 路径数据
+   * @returns {Boolean} 是否为空路径
+   */
+  _isEmptySVGPath(pathData) {
+    if (!pathData || pathData.length === 0) {
+      return true;
+    }
+
+    // 检查路径是否只包含移动命令或者是一个点
+    let hasDrawing = false;
+    let moveCount = 0;
+
+    for (let i = 0; i < pathData.length; i++) {
+      const command = pathData[i];
+      if (command[0] === "M") {
+        moveCount++;
+      } else if (command[0] === "L" || command[0] === "Q" || command[0] === "C") {
+        hasDrawing = true;
+        break;
+      }
+    }
+
+    // 如果只有移动命令且超过1个，或者没有绘制命令，则认为是空路径
+    return !hasDrawing || (moveCount > 0 && pathData.length <= moveCount);
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/brushes/types/WritingBrush.js b/src/components/Canvas/DepthCanvas/manager/brushes/types/WritingBrush.js
new file mode 100644
index 0000000..6cb62a5
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/brushes/types/WritingBrush.js
@@ -0,0 +1,264 @@
+import { BaseBrush } from "../BaseBrush";
+
+/**
+ * 书法笔刷
+ * 模拟中国传统书法效果，具有笔锋和墨色变化
+ */
+export class WritingBrush extends BaseBrush {
+  /**
+   * 构造函数
+   * @param {Object} canvas fabric画布实例
+   * @param {Object} options 配置选项
+   */
+  constructor(canvas, options = {}) {
+    super(canvas, {
+      id: "writing",
+      name: options.t('Canvas.Writing'),
+      description: "模拟中国传统书法毛笔效果，具有笔锋和墨色变化",
+      category: options.t('Canvas.SpecialEffectsBrush'),
+      icon: "writing",
+      ...options,
+    });
+
+    // 书法笔刷特有属性
+    this.brushPressure = options.brushPressure || 0.7;
+    this.inkAmount = options.inkAmount || 20;
+    this.brushTaperFactor = options.brushTaperFactor || 0.6;
+    this.enableInkDripping =
+      options.enableInkDripping !== undefined ? options.enableInkDripping : true;
+  }
+
+  /**
+   * 创建笔刷实例
+   * @returns {Object} fabric笔刷实例
+   */
+  create() {
+    if (!this.canvas) {
+      throw new Error("画布实例不存在");
+    }
+
+    // 创建fabric原生书法笔刷
+    this.brush = new fabric.WritingBrush(this.canvas);
+
+    // 配置笔刷
+    this.configure(this.brush, this.options);
+
+    return this.brush;
+  }
+
+  /**
+   * 配置笔刷
+   * @param {Object} brush fabric笔刷实例
+   * @param {Object} options 配置选项
+   */
+  configure(brush, options = {}) {
+    if (!brush) return;
+
+    // 基础属性配置
+    if (options.width !== undefined) {
+      brush.width = options.width;
+    }
+
+    if (options.color !== undefined) {
+      brush.color = options.color;
+    }
+
+    if (options.opacity !== undefined) {
+      brush.opacity = options.opacity;
+    }
+
+    // 书法笔刷特有属性
+    if (options.brushPressure !== undefined) {
+      this.brushPressure = options.brushPressure;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.brushPressure !== undefined) {
+        brush.brushPressure = this.brushPressure;
+      }
+    }
+
+    if (options.inkAmount !== undefined) {
+      this.inkAmount = options.inkAmount;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.inkAmount !== undefined) {
+        brush.inkAmount = this.inkAmount;
+      }
+    }
+
+    if (options.brushTaperFactor !== undefined) {
+      this.brushTaperFactor = options.brushTaperFactor;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.brushTaperFactor !== undefined) {
+        brush.brushTaperFactor = this.brushTaperFactor;
+      }
+    }
+
+    if (options.enableInkDripping !== undefined) {
+      this.enableInkDripping = options.enableInkDripping;
+
+      // 如果原生笔刷支持此属性，则设置
+      if (brush.enableInkDripping !== undefined) {
+        brush.enableInkDripping = this.enableInkDripping;
+      }
+    }
+  }
+
+  /**
+   * 设置笔压感应
+   * @param {Number} pressure 笔压值(0-1)
+   */
+  setBrushPressure(pressure) {
+    this.brushPressure = Math.max(0.1, Math.min(1, pressure));
+
+    if (this.brush && this.brush.brushPressure !== undefined) {
+      this.brush.brushPressure = this.brushPressure;
+    }
+
+    return this.brushPressure;
+  }
+
+  /**
+   * 设置墨量
+   * @param {Number} amount 墨量值
+   */
+  setInkAmount(amount) {
+    this.inkAmount = Math.max(1, Math.min(50, amount));
+
+    if (this.brush && this.brush.inkAmount !== undefined) {
+      this.brush.inkAmount = this.inkAmount;
+    }
+
+    return this.inkAmount;
+  }
+
+  /**
+   * 设置笔锋系数
+   * @param {Number} factor 笔锋系数(0-1)
+   */
+  setBrushTaperFactor(factor) {
+    this.brushTaperFactor = Math.max(0, Math.min(1, factor));
+
+    if (this.brush && this.brush.brushTaperFactor !== undefined) {
+      this.brush.brushTaperFactor = this.brushTaperFactor;
+    }
+
+    return this.brushTaperFactor;
+  }
+
+  /**
+   * 启用/禁用墨滴效果
+   * @param {Boolean} enabled 是否启用
+   */
+  setInkDripping(enabled) {
+    this.enableInkDripping = enabled;
+
+    if (this.brush && this.brush.enableInkDripping !== undefined) {
+      this.brush.enableInkDripping = this.enableInkDripping;
+    }
+
+    return this.enableInkDripping;
+  }
+
+  /**
+   * 获取笔刷可配置属性
+   * @returns {Array} 可配置属性描述数组
+   * @override
+   */
+  getConfigurableProperties() {
+    // 获取基础属性
+    const baseProperties = super.getConfigurableProperties();
+
+    // 定义书法笔刷特有属性
+    const writingProperties = [
+      {
+        id: "brushPressure",
+        name: this.t('Canvas.WritingBrushPressure'),
+        type: "slider",
+        defaultValue: this.brushPressure,
+        min: 0.1,
+        max: 1,
+        step: 0.05,
+        description: this.t('Canvas.WritingBrushPressureDescription'),
+        category: this.t('Canvas.WritingSettings'),
+        order: 100,
+      },
+      {
+        id: "inkAmount",
+        name: this.t('Canvas.WritingAmount'),
+        type: "slider",
+        defaultValue: this.inkAmount,
+        min: 1,
+        max: 50,
+        step: 1,
+        description: this.t('Canvas.WritingAmountDescription'),
+        category: this.t('Canvas.WritingSettings'),
+        order: 110,
+      },
+      {
+        id: "brushTaperFactor",
+        name: this.t('Canvas.WritingPenTipCoefficient'),
+        type: "slider",
+        defaultValue: this.brushTaperFactor,
+        min: 0,
+        max: 1,
+        step: 0.05,
+        description: this.t('Canvas.WritingPenTipCoefficientDescription'),
+        category: this.t('Canvas.WritingSettings'),
+        order: 120,
+      },
+      {
+        id: "enableInkDripping",
+        name: this.t('Canvas.WritingDropEffect'),
+        type: "checkbox",
+        defaultValue: this.enableInkDripping,
+        description: this.t('Canvas.WritingDropEffectDescription'),
+        category: this.t('Canvas.WritingSettings'),
+        order: 130,
+      },
+    ];
+
+    // 合并并返回所有属性
+    return [...baseProperties, ...writingProperties];
+  }
+
+  /**
+   * 更新笔刷属性
+   * @param {String} propId 属性ID
+   * @param {any} value 属性值
+   * @returns {Boolean} 是否更新成功
+   * @override
+   */
+  updateProperty(propId, value) {
+    // 先检查基类能否处理此属性
+    if (super.updateProperty(propId, value)) {
+      return true;
+    }
+
+    // 处理书法笔刷特有属性
+    if (propId === "brushPressure") {
+      this.setBrushPressure(value);
+      return true;
+    } else if (propId === "inkAmount") {
+      this.setInkAmount(value);
+      return true;
+    } else if (propId === "brushTaperFactor") {
+      this.setBrushTaperFactor(value);
+      return true;
+    } else if (propId === "enableInkDripping") {
+      this.setInkDripping(value);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 获取预览图
+   * @returns {String} 预览图URL
+   */
+  getPreview() {
+    return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMzAgMzBDNTAgMzAgNjAgNzAgODAgNzAiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTc1IDYwQzc4IDcwIDg1IDY1IDkwIDcwIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSJub25lIi8+PC9zdmc+";
+  }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
index ded2794..b073193 100644
--- a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
+++ b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
@@ -43,7 +43,7 @@ export class CanvasEventManager {
 		}
 
 		// 共享事件
-		// this.setupSelectionEvents();
+		this.setupSelectionEvents();
 		// this.setupObjectEvents();
 		// this.setupDoubleClickEvents();
 
@@ -228,7 +228,7 @@ export class CanvasEventManager {
 			if (this.lastMousePositions.length > this.positionHistoryLimit) {
 				this.lastMousePositions.shift();
 			}
-
+			this.canvas.setViewportTransform(vpt);
 			this.canvas.renderAll();
 			this.canvas.lastPosX = opt.e.clientX;
 			this.canvas.lastPosY = opt.e.clientY;
@@ -429,7 +429,7 @@ export class CanvasEventManager {
 
 				this.touchState.lastTouchTime = now;
 			}
-
+			this.canvas.setViewportTransform(vpt);
 			this.canvas.requestRenderAll(); // 使用requestRenderAll代替renderAll
 			this.canvas.lastPosX = currentX;
 			this.canvas.lastPosY = currentY;
@@ -616,7 +616,8 @@ export class CanvasEventManager {
 		if (this.toolManager) {
 			// this.toolManager.restoreSelectionState(); // 恢复选择状态
 		}
-
+		const vpt = this.canvas.viewportTransform;
+		this.canvas.setViewportTransform(vpt);
 		this.canvas.renderAll();
 	}
 
@@ -878,7 +879,7 @@ export class CanvasEventManager {
 	updateSelectedLayer(opt) {
 		const selected = opt.selected[0];
 		if (selected) {
-			this.layerManager.activeLayerId.value = selected.layerId;
+			this.layerManager.setActiveID(selected?.info?.id, false)
 		}
 	}
 
@@ -1068,7 +1069,7 @@ export class CanvasEventManager {
 						const vpt = this.canvas.viewportTransform;
 						vpt[4] += e.pageX - this.canvas.lastPosX;
 						vpt[5] += e.pageY - this.canvas.lastPosY;
-
+						this.canvas.setViewportTransform(vpt);
 						this.canvas.renderAll();
 						this.canvas.lastPosX = e.pageX;
 						this.canvas.lastPosY = e.pageY;
diff --git a/src/components/Canvas/DepthCanvas/tools/canvasMethod.js b/src/components/Canvas/DepthCanvas/tools/canvasMethod.js
new file mode 100644
index 0000000..02c9034
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/tools/canvasMethod.js
@@ -0,0 +1,40 @@
+/**  克隆对象 */
+export async function cloneObjects(objects = []) {
+	const arrs = []
+	for (const obj of objects) {
+		const clonedObj = await new Promise((resolve, reject) => {
+			obj.clone((v) => {
+				v.set({
+					left: obj.left,
+					top: obj.top,
+					width: obj.width,
+					height: obj.height,
+					scaleX: obj.scaleX,
+					scaleY: obj.scaleY,
+				})
+				resolve(v)
+			})
+		})
+		arrs.push(clonedObj)
+	}
+	return arrs
+}
+
+
+/**  获取组合对象边界 */
+export async function getObjectsBoundingBox(objects = []) {
+	const box1 = { x: Infinity, y: Infinity }
+	const box2 = { x: -Infinity, y: -Infinity }
+	objects.forEach(obj => {
+		box1.x = Math.min(box1.x, obj.left)
+		box1.y = Math.min(box1.y, obj.top)
+		box2.x = Math.max(box2.x, obj.left + obj.width * obj.scaleX)
+		box2.y = Math.max(box2.y, obj.top + obj.height * obj.scaleY)
+	})
+	return {
+		left: box1.x,
+		top: box1.y,
+		width: box2.x - box1.x,
+		height: box2.y - box1.y,
+	}
+}
\ No newline at end of file
diff --git a/src/components/Canvas/DepthCanvas/tools/exportMethod.js b/src/components/Canvas/DepthCanvas/tools/exportMethod.js
new file mode 100644
index 0000000..2c92451
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/tools/exportMethod.js
@@ -0,0 +1,26 @@
+import { createStaticCanvas } from './canvasFactory'
+import { getObjectsBoundingBox, cloneObjects } from './canvasMethod'
+/**  导出指定对象 */
+export async function exportObjectsToImage(objects = [], isDetails = false) {
+	const clonedObjects = await cloneObjects(objects)
+	const boundingBox = await getObjectsBoundingBox(clonedObjects)
+	const staticCanvas = createStaticCanvas(document.createElement('canvas'))
+	staticCanvas.setWidth(boundingBox.width)
+	staticCanvas.setHeight(boundingBox.height)
+	clonedObjects.forEach(obj => {
+		obj.set({
+			left: obj.left - boundingBox.left,
+			top: obj.top - boundingBox.top,
+		})
+		staticCanvas.add(obj)
+	})
+	// 导出图片
+	const dataURL = staticCanvas.toDataURL({
+		type: 'image/png',
+		quality: 1,
+	})
+	return isDetails ? {
+		url: dataURL,
+		...boundingBox,
+	} : dataURL
+}
\ No newline at end of file
diff --git a/src/components/Canvas/DepthCanvas/tools/index.d.ts b/src/components/Canvas/DepthCanvas/tools/index.d.ts
deleted file mode 100644
index 49c4d93..0000000
--- a/src/components/Canvas/DepthCanvas/tools/index.d.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**  
- * 组件
-*/
-export const NODE_COMPONENT = {
-	RESULT_IMAGE: 'result-image',
-	CARD: 'card',
-	TEXT: 'text',
-}
-
-/**
- * 节点类型
- */
-export const NODE_TYPE = {
-	INPUT: 'InputNode',
-	SECONDARY: 'SecondaryNode',
-	OUTPUT: 'OutputNode',
-	ALONE: 'AloneNode',
-}
-
-/**
- * 节点数据类型
- */
-export const NODE_DATATYPE = {
-	RESULT_IMAGE: 'result-image',
-	CARDS_SELECT: 'cards-select',
-	TO_REAL_STYLE: 'to-real-style',
-	SURFACE_EDIT: 'surface-edit',
-	SCENE_COMPOSITION: 'scene-composition',
-	COLOR_PALETTE: 'color-palette',
-	TO_3D_MODEL: 'to-3d-model',
-	TO_3VIEW: 'to-3view',
-}
-/**
- * 节点数据层级
- */
-export const NODE_DATATIER = {
-	RESULT_IMAGE: 0,
-	CARDS_SELECT: 0,
-	TO_REAL_STYLE: 1,
-	SURFACE_EDIT: 1,
-	SCENE_COMPOSITION: 2,
-	COLOR_PALETTE: 2,
-	TO_3D_MODEL: 2,
-	TO_3VIEW: 3,
-}
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue b/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue
index e9da2d3..20213dc 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue
@@ -67,7 +67,7 @@
 	const showMenu = ref(false)
 	const data = reactive({
 		url: props.data?.url || '',
-		scale: props.data?.scale || { x: 1, y: 1 }
+		scale: props.data?.scale || { x: 1, y: 1 },
 	})
 	watch(
 		() => props.data.url,

From ea3818fd2efe99008ed1c3be2e03ed5e8d52717a Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Wed, 11 Mar 2026 16:57:27 +0800
Subject: [PATCH 2/6] fix

---
 src/api/flow-canvas.ts                        |  54 ++++++
 .../Canvas/FlowCanvas/components/node.vue     |   6 +-
 .../components/nodes/cards/cards-select.vue   |   3 +-
 .../components/nodes/cards/index.vue          |  32 +++-
 .../components/nodes/result-image.vue         | 177 +++++++++++-------
 .../Canvas/FlowCanvas/flow-canvas.vue         |  27 ++-
 .../FlowCanvas/manager/GenerateManager.ts     |  33 ++++
 .../Canvas/FlowCanvas/manager/NodeManager.ts  |   7 +-
 8 files changed, 257 insertions(+), 82 deletions(-)
 create mode 100644 src/components/Canvas/FlowCanvas/manager/GenerateManager.ts

diff --git a/src/api/flow-canvas.ts b/src/api/flow-canvas.ts
index 062708d..d4590cc 100644
--- a/src/api/flow-canvas.ts
+++ b/src/api/flow-canvas.ts
@@ -31,6 +31,9 @@ export const putSketchFlowCanvas = (data:saveSketchFlowCanvasData) => {
 	return request({
 		url: `/api/canvas/detail/${data.id}`,
 		method: 'put',
+		headers: {
+			'Content-Type': 'application/json'
+		},
 		data: data.canvasData
 	})
 }
@@ -52,3 +55,54 @@ export const deleteSketchFlowCanvas = (data:deleteSketchFlowCanvasData) => {
 		method: 'delete',
 	})
 }
+
+/**
+ * 根据taskId查询结果
+ * @param data 根据taskId查询结果的参数
+ * @param data.taskIds taskIds列表
+ * @returns 根据taskId查询结果
+ */
+export interface taskIdList {
+	taskIds?: Array<string>
+}
+export const getTaskidResult = (data:taskIdList) => {
+	return request({
+		url: `/api/image/tasks/batch`,
+		method: 'post',
+		data: {
+			taskIds: data.taskIds
+		}
+	})
+}
+
+/**
+ * 图片转真是风格
+ * @param data 图片转真是风格的参数
+ * @param data.sketchId sketch id
+ * @param data.mode 选择的模型
+ * @param data.size 生成图片的大小
+ * @param data.imageUrl 进行生成的图片。minio地址和正常地址都可以
+ * @param data.userPrompt 生成图片的提示词
+ * @returns 图片转真是风格
+ */
+export interface toRealStyleData {
+	sketchId?: string
+	mode?: string
+	size?: string
+	imageUrl?: string
+	userPrompt?: string
+}
+export const toRealStyleApi = (data:toRealStyleData) => {
+	return request({
+		url: `/api/image/to-real-style`,
+		method: 'post',
+		data:{
+			sketchId: data.sketchId,
+			mode: data.mode,
+			size: data.size,
+			imageUrl: data.imageUrl,
+			userPrompt: data.userPrompt
+		}
+	})
+}
+
diff --git a/src/components/Canvas/FlowCanvas/components/node.vue b/src/components/Canvas/FlowCanvas/components/node.vue
index 06938b6..4a3ec70 100644
--- a/src/components/Canvas/FlowCanvas/components/node.vue
+++ b/src/components/Canvas/FlowCanvas/components/node.vue
@@ -60,8 +60,12 @@
 	)
 	const onAdd = () => {
 		const tier_ = tier.value + 1
+		// 从data中获取originalImage
+		let nodeData = props.node?.data?.data.imageProcessTasks.filter((v) => v.taskId === props.node?.data?.data.selectTaskId)
+		const originalImage = nodeData[0]?.url
+		if(!originalImage)console.log('originalImage 找不到原始图片')
 		props.stateManager.nodeManager.createCardsSelect({
-			data: { tier: tier_, superiorID: props.node.id }
+			data: { tier: tier_, superiorID: props.node.id, originalImage }
 		})
 	}
 	const posCenter = computed(() => {
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/cards/cards-select.vue b/src/components/Canvas/FlowCanvas/components/nodes/cards/cards-select.vue
index 839f78b..4fa4e73 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/cards/cards-select.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/cards-select.vue
@@ -60,7 +60,8 @@
 			data: {
 				tier: v.tier,
 				type: v.type,
-				superiorID
+				superiorID,
+				originalImage: props.node.data?.originalImage,
 			}
 		})
 	}
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue b/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
index a9fe0e8..f880db6 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue
@@ -36,6 +36,8 @@
 	import To3View from './to-3view.vue'
 	import To3DModel from './to-3d-model.vue'
 
+	import { toRealStyleApi } from '@/api/flow-canvas'
+
 	// import ToVideo from './to-video.vue'
 	// import AddPrint from './add-print.vue'
 	// import ToCAD from './to-cad.vue'
@@ -46,19 +48,20 @@
 			title: 'Advanced Tools',
 			component: CardsSelect,
 			hideFooter: true,
-			hideIcon: true
+			hideIcon: true,
 		},
 		{
 			tier: NODE_DATATIER.TO_REAL_STYLE,
 			type: NODE_DATATYPE.TO_REAL_STYLE,
 			title: 'To Real Style',
-			component: ToRealStyle
+			component: ToRealStyle,
+			api: toRealStyleApi
 		},
 		{
 			tier: NODE_DATATIER.SURFACE_EDIT,
 			type: NODE_DATATYPE.SURFACE_EDIT,
 			title: 'Surface Edit',
-			component: SurfaceEdit
+			component: SurfaceEdit,
 		},
 		{
 			tier: NODE_DATATIER.SCENE_COMPOSITION,
@@ -100,6 +103,10 @@
 				| 'to-3view',
 			default: 'to-real-style'
 		},
+		sketchId: {
+			type: String,
+			default: ''
+		},
 		data: {
 			type: Object,
 			default: () => ({})
@@ -110,17 +117,32 @@
 		return components.find((item) => item.type === props.type)
 	})
 	const componentRef = ref(null)
-	const onGenerateClick = () => {
+	
+	const onGenerateClick = async () => {
 		const data = componentRef.value.data
 		const subordNode = stateManager.getSubordNodeByID(attrs.node.id)
 		emit('update-data', data)
+		console.log(attrs.node,data)
+		if(!attrs.node?.data?.originalImage)console.log('originalImage 找不到原始图片')
+
+		const apiData = {
+			sketchId: props.sketchId,
+			mode: data.mode,
+			size: data.pixelRatio,
+			imageUrl: attrs.node?.data?.originalImage,
+			userPrompt: data.prompt,
+		}
+		const taskList = await currentComponent.value.api(apiData).then((rv)=>{
+			return rv
+		}) || []
 		if (!subordNode) {
 			nodeManager.createResultNode({
 				data: {
 					superiorID: attrs.node.id,
 					tier: currentComponent.value.tier,
 					data: {
-						url: 'https://s3-alpha-sig.figma.com/img/ea2f/590e/9638f62a2fc91e31f33db0022db1642c?Expires=1773014400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=M0B8oJJOk~dGG0aZAqOIocAp7T0LFdJ9FYmCrEZVTCRzYxM6SJRNtYMTX-rTO3Z~s14QINh~o-S41XiZnBv-0zcKjuWot~VVaNHfd0~1LesfNe2KwvCinT~72btFut1pheLnKE-wWCX5ewtonxU77bnw386YPMTqv7DBZzksf2udsJA7NmOYD6~TUG3Q2dWSt~zPH~lkaidscPqpCnCbqzljCEi4RiHY4U3A45l5XypcX2umqn1UaYUFCTqV9471J4qdB6Dg2pcKocdp-7-3s1De6Q~2SmBOrSgDQ~KEADCB2lhKfhxgWmy0lwMvhTd4l90ygVZDWZRABgjHNrGUvg__'
+						imageProcessTasks:taskList,
+						selectTaskId:taskList[0].taskId,
 					}
 				}
 			})
diff --git a/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue b/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue
index e9da2d3..98e3057 100644
--- a/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue
+++ b/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue
@@ -1,49 +1,56 @@
 <template>
 	<!-- 结果图片 -->
-	<div class="result-image">
-		<div class="header" v-show="showHeader" @mousedown.stop>
-			<span class="icon">
-				<svg-icon name="chat-compose" size="20" size-unit="px" />
-			</span>
-			<span class="icon" @click="onPreview">
-				<svg-icon name="expand-lg" size="20" size-unit="px" />
-			</span>
-			<span class="icon" @click="onDownload">
-				<svg-icon name="download" size="20" size-unit="px" />
-			</span>
-			<button class="edit" @click="onEdit">
-				<span class="icon"><svg-icon name="edit" size="13" /></span>
-				<span class="text">Edit</span>
-			</button>
-		</div>
-		<img
-			class="image"
-			:src="data.url"
-			:style="{ transform: `scale(${data?.scale?.x || 1}, ${data?.scale?.y || 1})` }"
-		/>
-		<div class="more" @click="showMenu = !showMenu" @mousedown.stop>
-			<svg-icon name="more" size="24" size-unit="px" color="#C9C9C9" />
-		</div>
-		<div class="menu" v-show="showMenu" @mousedown.stop>
-			<div
-				v-for="(v, i) in menus"
-				:key="i"
-				:class="[v.isDivide ? 'divide' : 'item', { disabled: v.disabled }]"
-				@click="onMenuItem(v)"
-			>
-				<template v-if="!v.isDivide">
-					<span class="label">{{ v.label }}</span>
-					<span class="tip">{{ v.tip }}</span>
-				</template>
+	 <div class="result-image-container" :class="{'show-border': data.imageProcessTasks.length > 1}">
+		<div class="result-image" 
+			v-for="(item, i) in data.imageProcessTasks" 
+			:key="item.taskId" 
+			:class="{'active': item.taskId === data.selectTaskId}"
+			@click="setSelectTaskId(item.taskId)"
+		>
+			<div class="header" v-show="showHeader && item.taskId === data.selectTaskId" @mousedown.stop>
+				<span class="icon">
+					<svg-icon name="chat-compose" size="20" size-unit="px" />
+				</span>
+				<span class="icon" @click="onPreview(item?.url)">
+					<svg-icon name="expand-lg" size="20" size-unit="px" />
+				</span>
+				<span class="icon" @click="onDownload(item?.url)">
+					<svg-icon name="download" size="20" size-unit="px" />
+				</span>
+				<button class="edit" @click="onEdit(item?.url)">
+					<span class="icon"><svg-icon name="edit" size="13" /></span>
+					<span class="text">Edit</span>
+				</button>
+			</div>
+			<img
+				class="image"
+				:src="item?.url"
+				:style="{ transform: `scale(${item?.scale?.x || 1}, ${item?.scale?.y || 1})` }"
+			/>
+			<div class="more" @click="clickimageProcessTaskItem(item.taskId)" @mousedown.stop>
+				<svg-icon name="more" size="24" size-unit="px" color="#C9C9C9" />
+			</div>
+			<div class="menu" v-show="showMenu && item.taskId === clickTaskId" @mousedown.stop>
+				<div
+					v-for="(v, i) in menus"
+					:key="i"
+					:class="[v.isDivide ? 'divide' : 'item', { disabled: v.disabled }]"
+					@click="onMenuItem(v)"
+				>
+					<template v-if="!v.isDivide">
+						<span class="label">{{ v.label }}</span>
+						<span class="tip">{{ v.tip }}</span>
+					</template>
+				</div>
 			</div>
 		</div>
-	</div>
+	 </div>
 </template>
 
 <script setup lang="ts">
 	import myEvent from '@/utils/myEvent'
 	import { downloadImage } from '../../../tools/tools'
-	import { reactive, ref, onBeforeUnmount, useAttrs, inject, watch } from 'vue'
+	import { reactive, ref, onBeforeUnmount, useAttrs, inject, watch, } from 'vue'
 	const openImagePreview = inject('openImagePreview') as (url: string) => void
 	const props = defineProps({
 		config: {
@@ -65,10 +72,21 @@
 	const attrs = useAttrs()
 	const showHeader = ref(!!attrs.node?.data?.isHeader)
 	const showMenu = ref(false)
+	const clickTaskId = ref('')
+	const clickimageProcessTaskItem = (taskId: string) => {
+		if(clickTaskId.value == taskId){
+			showMenu.value = !showMenu.value
+		}
+		clickTaskId.value = taskId
+	}
 	const data = reactive({
-		url: props.data?.url || '',
-		scale: props.data?.scale || { x: 1, y: 1 }
+		selectTaskId: props.data?.selectTaskId || '',
+		imageProcessTasks: props.data?.imageProcessTasks || [],
 	})
+	const setSelectTaskId = (taskId: string) => {
+		data.selectTaskId = taskId
+		emit('update-data', data)
+	}
 	watch(
 		() => props.data.url,
 		(newVal) => {
@@ -76,34 +94,49 @@
 		}
 	)
 	const menus = ref([
-		{ label: 'Copy', tip: 'Ctrl+C', on: () => emit('copy-node') },
+		{ label: 'Copy', tip: 'Ctrl+C', on: () => emit('copy-node', clickTaskId.value) },
 		{
 			label: 'Delete',
 			tip: 'Del',
-			on: () => emit('delete-node'),
+			on: () => {
+				if(data.imageProcessTasks.length > 1){
+					if(clickTaskId.value){
+						data.imageProcessTasks = data.imageProcessTasks.filter((item) => item.taskId !== clickTaskId.value)
+						clickTaskId.value = ''
+						emit('update-data', data)
+					}
+				}else{
+					emit('delete-node')
+				}
+			},
 			disabled: !!props.config?.disableDelete
 		},
 		{ isDivide: true },
-		{
-			label: 'Bring to font',
-			tip: '',
-			on: () => {
-				emit('bring-to-font')
-			}
-		},
-		{
-			label: 'Send to back',
-			tip: '',
-			on: () => {
-				emit('send-to-back')
-			}
-		},
-		{ isDivide: true },
+		// {
+		// 	label: 'Bring to font',
+		// 	tip: '',
+		// 	on: () => {
+		// 		emit('bring-to-font')
+		// 	}
+		// },
+		// {
+		// 	label: 'Send to back',
+		// 	tip: '',
+		// 	on: () => {
+		// 		emit('send-to-back')
+		// 	}
+		// },
+		// { isDivide: true },
 		{
 			label: 'Flip horizontal',
 			tip: '',
 			on: () => {
-				data.scale.x = -data.scale.x
+				data.imageProcessTasks.forEach((item) => {
+					if(!item.scale){
+						item.scale = { x: 1, y: 1 }
+					}
+					item.scale.x = -item.scale.x
+				})
 				emit('update-data', data)
 			}
 		},
@@ -111,16 +144,21 @@
 			label: 'Flip vertical',
 			tip: '',
 			on: () => {
-				data.scale.y = -data.scale.y
+				data.imageProcessTasks.forEach((item) => {
+					if(!item.scale){
+						item.scale = { x: 1, y: 1 }
+					}
+					item.scale.y = -item.scale.y
+				})
 				emit('update-data', data)
 			}
 		}
 	])
-	const onPreview = () => {
-		openImagePreview(data.url)
+	const onPreview = (url: string) => {
+		openImagePreview(url)
 	}
-	const onDownload = () => {
-		downloadImage(data.url, 'image.png')
+	const onDownload = (url: string) => {
+		downloadImage(url, 'image.png')
 	}
 	const onMenuItem = (v) => {
 		if (v.disabled) return
@@ -129,9 +167,10 @@
 	}
 	const hideMenu = () => {
 		showMenu.value = false
+		clickTaskId.value = ''
 	}
-	const onEdit = () => {
-		myEvent.emit('openDepthCanvas', { url: data.url })
+	const onEdit = (url: string) => {
+		myEvent.emit('openDepthCanvas', { url })
 	}
 	document.addEventListener('mousedown', hideMenu)
 	onBeforeUnmount(() => {
@@ -141,6 +180,16 @@
 </script>
 
 <style lang="less" scoped>
+	.result-image-container{
+		&.show-border{
+			border: 1px solid #d9d9d9;
+			border-radius: 9.4px;
+			padding: 16px;	
+			display: grid;
+			grid-template-columns: repeat(2, 1fr); /* 一行3列 */
+			gap: 8px;
+		}
+	}
 	.result-image {
 		width: 244px;
 		border-radius: 16px;
diff --git a/src/components/Canvas/FlowCanvas/flow-canvas.vue b/src/components/Canvas/FlowCanvas/flow-canvas.vue
index 56a7893..9ecd1b0 100644
--- a/src/components/Canvas/FlowCanvas/flow-canvas.vue
+++ b/src/components/Canvas/FlowCanvas/flow-canvas.vue
@@ -31,10 +31,11 @@
 						:active="stateManager.activeNodeID.value === node.id"
 						:node="node"
 						:config="node.data"
+						:sketchId="config.imgId"
 						:data="node.data.data"
 						v-bind="node.data"
 						@delete-node="deleteNode(node.id)"
-						@copy-node="copyNode(node.id)"
+						@copy-node="copyNode($event,node.id)"
 						@update-data="(v) => (node.data.data = v)"
 						@bring-to-font="bringToFont(node.id)"
 						@send-to-back="sendToBack(node.id)"
@@ -157,8 +158,8 @@
 		nodeManager.deleteNode(id)
 	}
 	/** 复制节点 */
-	const copyNode = (id) => {
-		nodeManager.copyNodeById(id)
+	const copyNode = (clickTaskId,id) => {
+		nodeManager.copyNodeById(clickTaskId,id)
 	}
 	/** 节点zIndex设置最大 */
 	const bringToFont = (id) => {
@@ -171,11 +172,11 @@
 	// 导出流程
 	const exportFlow = () => {
 		// flowManager.exportFlow()
-		
+
 		const str = JSON.stringify(stateManager.nodes.value)
 		const json = JSON.parse(str)
 		putSketchFlowCanvas({
-			id: props.config.id || '==========',
+			id: props.config.imgId,
 			canvasData: str
 		}).then((res) => {
 			if (res) {
@@ -214,10 +215,9 @@
 		// window['nodes'] = nodes
 		let json = []
 		await new Promise((resolve) => {
-			getSketchFlowCanvas({ id: props.config.id || '==========' }).then((res) => {
+			getSketchFlowCanvas({ id: props.config.imgId }).then((res:any) => {
 				if (res) {
-					console.log(res)
-					json = res.data
+					json = JSON.parse(res)
 				}
 				resolve(true)
 			}).catch(() => {
@@ -227,12 +227,21 @@
 		if(json.length > 0){
 			importFlow(json)
 		}else{
+			const timestamp = Date.now()
 			nodeManager.createResultNode({
 				data: {
 					disableDelete: true,
 					isHeader: false,
 					data: {
-						url: props.config.url
+						imageProcessTasks:[
+							{
+								id: props.config.imgId,
+								url: props.config.url,
+								state:'success',
+								taskId: timestamp + '',
+							},
+						],
+						selectTaskId: timestamp + '',
 					}
 				}
 			})
diff --git a/src/components/Canvas/FlowCanvas/manager/GenerateManager.ts b/src/components/Canvas/FlowCanvas/manager/GenerateManager.ts
new file mode 100644
index 0000000..278e88f
--- /dev/null
+++ b/src/components/Canvas/FlowCanvas/manager/GenerateManager.ts
@@ -0,0 +1,33 @@
+import { getTaskidResult } from '@/api/flow-canvas'
+interface NodeOptions {
+	id?: string
+	position?: { x: number, y: number }
+	positionX?: number
+	positionY?: number
+	component?: any
+}
+
+export class GenerateManager {
+	stateManager: any
+	taskIds: string[] = []
+	constructor(options) {
+		this.stateManager = options.stateManager;
+	}
+
+	/** 删除taskId */
+	deleteTaskId(taskId: string) {
+
+	}
+	/** 添加taskId */
+	addTaskId(TaskId: any) {
+		this.stateManager.addTaskId(TaskId)
+	}
+	/** 添加taskId */
+	async getTasksIdImg(list) {
+		let taskIds = list.map((item)=>item.taskId)
+		getTaskidResult({taskIds}).then((rv)=>{
+			console.log(rv)
+		})
+	}
+	
+}
diff --git a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
index 47f0d19..c1ec2ed 100644
--- a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
@@ -9,6 +9,7 @@ interface NodeData {
 	superiorID?: string// 上级节点ID
 	disableDelete?: boolean// 是否禁用删除
 	disableCopy?: boolean// 是否禁用复制
+	originalImage?: string// 要进行生成的图片
 }
 interface NodeOptions {
 	id?: string
@@ -113,13 +114,15 @@ export class NodeManager {
 		return this.createNode(options_)
 	}
 
-	copyNodeById(id: string) {
+	copyNodeById(clickTaskId:string, id: string) {
 		const node = this.stateManager.getNodeById(id)
+		let copyNode = JSON.parse(JSON.stringify(node))
+		copyNode.data.data.imageProcessTasks = copyNode.data.data.imageProcessTasks.filter((item:any)=>item.taskId == clickTaskId)
 		const flowNode = this.stateManager.flowManager.getNodeById(id)
 		if (!node) return console.warn(`${id}找不到对应节点`)
 		if (node.data?.disableCopy) return console.warn(`${id}节点已禁用复制`)
 		const node_ = {
-			...JSON.parse(JSON.stringify(node)),
+			...copyNode,
 			id: createId(),
 			position: {
 				x: node.position.x,

From adf562bbe42fd1cc54544558a971c65d9baafa88 Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Wed, 11 Mar 2026 17:02:32 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E7=94=BB=E5=B8=83=E6=B8=85=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Canvas/FlowCanvas/flow-canvas.vue            | 6 +++++-
 src/components/Canvas/FlowCanvas/manager/EventManager.ts    | 3 +++
 src/components/Canvas/FlowCanvas/manager/FlowManager.ts     | 1 +
 src/components/Canvas/FlowCanvas/manager/GenerateManager.ts | 4 ++++
 src/components/Canvas/FlowCanvas/manager/NodeManager.ts     | 1 +
 src/components/Canvas/FlowCanvas/manager/StateManager.ts    | 4 ++++
 src/components/Canvas/FlowCanvas/manager/ToolManager.ts     | 2 +-
 7 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/Canvas/FlowCanvas/flow-canvas.vue b/src/components/Canvas/FlowCanvas/flow-canvas.vue
index 9ecd1b0..0af0176 100644
--- a/src/components/Canvas/FlowCanvas/flow-canvas.vue
+++ b/src/components/Canvas/FlowCanvas/flow-canvas.vue
@@ -249,7 +249,11 @@
 		
 	})
 	onBeforeMount(() => {
-		eventManager.removeEvents() // 移除事件
+		stateManager.dispose()
+		eventManager.dispose()
+		flowManager.dispose()
+		nodeManager.dispose()
+		toolManager.dispose()
 	})
 </script>
 <style lang="less">
diff --git a/src/components/Canvas/FlowCanvas/manager/EventManager.ts b/src/components/Canvas/FlowCanvas/manager/EventManager.ts
index b2e616c..895ce32 100644
--- a/src/components/Canvas/FlowCanvas/manager/EventManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/EventManager.ts
@@ -81,4 +81,7 @@ export class EventManager {
 		// document.removeEventListener('copy', this.handleCopy.bind(this))
 		document.removeEventListener('keydown', this.handleKeyDown.bind(this))
 	}
+	dispose() {
+		this.removeEvents()
+	}
 }
diff --git a/src/components/Canvas/FlowCanvas/manager/FlowManager.ts b/src/components/Canvas/FlowCanvas/manager/FlowManager.ts
index f2cc897..ae3a992 100644
--- a/src/components/Canvas/FlowCanvas/manager/FlowManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/FlowManager.ts
@@ -23,4 +23,5 @@ export class FlowManager {
 		return this.vueFlow.value.getNodes?.find((v) => v.data.superiorID === id)
 	}
 
+	dispose() {}
 }
diff --git a/src/components/Canvas/FlowCanvas/manager/GenerateManager.ts b/src/components/Canvas/FlowCanvas/manager/GenerateManager.ts
index 278e88f..cafc1bc 100644
--- a/src/components/Canvas/FlowCanvas/manager/GenerateManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/GenerateManager.ts
@@ -30,4 +30,8 @@ export class GenerateManager {
 		})
 	}
 	
+	dispose() {
+		this.taskIds = []
+		
+	}
 }
diff --git a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
index c1ec2ed..33b345a 100644
--- a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts
@@ -133,4 +133,5 @@ export class NodeManager {
 		delete node_.data?.disableDelete
 		this.stateManager.addNode(node_)
 	}
+	dispose() {}
 }
diff --git a/src/components/Canvas/FlowCanvas/manager/StateManager.ts b/src/components/Canvas/FlowCanvas/manager/StateManager.ts
index 1d5bba8..0c1345a 100644
--- a/src/components/Canvas/FlowCanvas/manager/StateManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/StateManager.ts
@@ -183,4 +183,8 @@ export class StateManager {
 		this.nodes.value = JSON.parse(state.nodes)
 	}
 
+	dispose() {
+		this.historyList.value = []
+		this.historyIndex.value = 0
+	}
 }
diff --git a/src/components/Canvas/FlowCanvas/manager/ToolManager.ts b/src/components/Canvas/FlowCanvas/manager/ToolManager.ts
index 7638bbc..1e4f859 100644
--- a/src/components/Canvas/FlowCanvas/manager/ToolManager.ts
+++ b/src/components/Canvas/FlowCanvas/manager/ToolManager.ts
@@ -43,5 +43,5 @@ export class ToolManager {
 		this.stateManager.setPanOnDrag(!!tool.panOnDrag)
 		this.stateManager.setCursor(tool.cursor || "")
 	}
-
+	dispose() {}
 }

From 86f1efbf432f7fdc8d1fc97af526e4f66d28ed5a Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Thu, 12 Mar 2026 11:40:48 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E6=B7=B1=E5=BA=A6=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E9=94=AE=E7=9B=98=E4=BA=8B=E4=BB=B6-=E6=92=A4=E5=9B=9E?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 .../components/details-panel/index.vue        |  64 +-
 .../Canvas/DepthCanvas/depth-canvas.vue       |  18 +-
 .../DepthCanvas/manager/CanvasManager.ts      |  32 +-
 .../DepthCanvas/manager/EraserStateManager.js |   1 +
 .../DepthCanvas/manager/LayerManager.ts       |  12 +
 .../DepthCanvas/manager/StateManager.ts       |  64 +-
 .../Canvas/DepthCanvas/manager/ToolManager.ts |   5 +-
 .../manager/events/CanvasEventManager.js      | 184 +----
 .../manager/events/KeyEventManager.ts         |  35 +
 .../manager/events/KeyboardManager.js         | 762 ------------------
 11 files changed, 228 insertions(+), 951 deletions(-)
 create mode 100644 src/components/Canvas/DepthCanvas/manager/events/KeyEventManager.ts
 delete mode 100644 src/components/Canvas/DepthCanvas/manager/events/KeyboardManager.js

diff --git a/.env.development b/.env.development
index 8eca712..f844c2d 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # VITE_APP_URL = http://192.168.31.82:8771
 VITE_APP_URL = http://18.167.251.121:10015
 # VITE_APP_URL = http://192.168.31.118:8080
-VITE_APP_URL = http://192.168.31.82:8755
+# VITE_APP_URL = http://192.168.31.82:8755
 VITE_GOOGLE_CLIENT_ID = 216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com
diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue b/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
index 289ec28..3439d21 100644
--- a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
+++ b/src/components/Canvas/DepthCanvas/components/details-panel/index.vue
@@ -7,16 +7,57 @@
 				<svg-icon name="dc-down_arrow2" size="10" />
 			</span>
 		</div>
-		<div class="content" v-show="show">
-			这是一些设置参数...
+		<div class="content" v-if="activeObject" v-show="show">
+			<div>
+				<span class="label">X:</span>
+				<span class="value">{{ activeObject.left }}</span>
+			</div>
+			<div>
+				<span class="label">Y:</span>
+				<span class="value">{{ activeObject.top }}</span>
+			</div>
+			<div>
+				<span class="label">Width:</span>
+				<span class="value">{{ activeObject.width }}</span>
+			</div>
+			<div>
+				<span class="label">Height:</span>
+				<span class="value">{{ activeObject.height }}</span>
+			</div>
+			<div>
+				<span class="label">缩放X:</span>
+				<span class="value">{{ activeObject.scaleX }}</span>
+			</div>
+			<div>
+				<span class="label">缩放Y:</span>
+				<span class="value">{{ activeObject.scaleY }}</span>
+			</div>
+			<div>
+				<span class="label">Angle:</span>
+				<span class="value">{{ activeObject.angle }}</span>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { ref, inject, computed } from 'vue'
+	import { ref, inject, computed, watch, onMounted } from 'vue'
 	const props = defineProps({})
+	const layerManager = inject('layerManager') as any
+	const canvasManager = inject('canvasManager') as any
 	const show = ref(true)
+	const activeID = computed(() => layerManager.activeID.value)
+	const layers = computed(() => layerManager.layers.value)
+	const activeObject = ref(null)
+	const updateActiveObject = () => {
+		const obj = layers.value.find((v: any) => v.info.id === activeID.value)
+		activeObject.value = obj?.toJSON('info') || null
+	}
+	watch(layers, () => updateActiveObject())
+	watch(activeID, () => updateActiveObject())
+	onMounted(() => {
+		updateActiveObject()
+	})
 </script>
 
 <style lang="less" scoped>
@@ -53,6 +94,23 @@
 		}
 		> .content {
 			padding: 1.6rem;
+			> div {
+				padding: 0.8rem 0;
+				display: flex;
+				align-items: center;
+				> .label {
+					font-size: 1.6rem;
+					color: #000;
+					font-weight: bold;
+					min-width: 7rem;
+					text-align: right;
+					margin-right: 0.8rem;
+				}
+				> .value {
+					font-size: 1.6rem;
+					color: #333;
+				}
+			}
 		}
 	}
 </style>
diff --git a/src/components/Canvas/DepthCanvas/depth-canvas.vue b/src/components/Canvas/DepthCanvas/depth-canvas.vue
index 1f56296..41fae1f 100644
--- a/src/components/Canvas/DepthCanvas/depth-canvas.vue
+++ b/src/components/Canvas/DepthCanvas/depth-canvas.vue
@@ -20,7 +20,7 @@
 
 <script setup lang="ts">
 	import { fabric } from 'fabric-with-all'
-	import { computed, ref, markRaw, onMounted, nextTick, provide, onBeforeMount } from 'vue'
+	import { computed, ref, markRaw, onMounted, nextTick, provide, onBeforeUnmount } from 'vue'
 	import { OperationType } from './tools/layerHelper'
 	// 组件
 	import layerPanel from './components/layer-panel/index.vue'
@@ -34,6 +34,7 @@
 	import { LayerManager } from './manager/LayerManager'
 	import { CanvasManager } from './manager/CanvasManager'
 	import { ToolManager } from './manager/ToolManager'
+	import { KeyEventManager } from './manager/events/KeyEventManager'
 
 	// 准备就绪
 	const isReady = ref(false)
@@ -66,6 +67,11 @@
 	stateManager.setManager({ toolManager })
 	provide('toolManager', toolManager)
 
+	//键盘事件管理器
+	const keyEventManager = new KeyEventManager({ stateManager })
+	stateManager.setManager({ keyEventManager })
+	provide('keyEventManager', keyEventManager)
+
 	const observer = ref(null)
 	onMounted(() => {
 		canvasManager.initCanvas({
@@ -79,6 +85,7 @@
 		canvasManager?.onMounted?.()
 		layerManager?.onMounted?.()
 		toolManager?.onMounted?.()
+		keyEventManager?.onMounted?.()
 
 		const trailingTimeout = ref(null)
 		observer.value = new ResizeObserver((entries) => {
@@ -91,7 +98,13 @@
 
 		isReady.value = true // 准备就绪
 	})
-	onBeforeMount(() => {})
+	onBeforeUnmount(() => {
+		canvasManager.dispose()
+		stateManager.dispose()
+		layerManager.dispose()
+		toolManager.dispose()
+		keyEventManager.dispose()
+	})
 	async function handleWindowResize() {
 		console.log('==========画布窗口大小变化==========')
 		canvasManager.setCanvasViewSize({
@@ -135,6 +148,7 @@
 			} else {
 				console.log('导入失败')
 			}
+			stateManager.clearState(true)
 		})
 	}
 </script>
diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
index bb9c713..f23f79b 100644
--- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
@@ -59,6 +59,18 @@ export class CanvasManager {
 		const canvasY = this.canvasViewHeight / 2 - this.canvasHeight / 2
 		this.canvas.viewportTransform = [1, 0, 0, 1, canvasX, canvasY]
 
+		// 动画管理器
+		this.animationManager = new AnimationManager(this.canvas, {
+			currentZoom: this.currentZoom,
+			canvasManager: this,
+			wheelThrottleTime: 15, // 降低滚轮事件节流时间，提高响应性
+			defaultEase: "power2.lin",
+			defaultDuration: 0.3, // 缩短默认动画时间
+		});
+		this.setupCanvasEvents()
+		this.setupBrushEvents()
+
+		this.stateManager.toolManager.setTool(OperationType.SELECT)
 		// 创建矩形
 		const rect = this.layerManager.createRectLayer({
 			left: 400,
@@ -71,21 +83,9 @@ export class CanvasManager {
 		})
 		// 文字
 		const text = this.layerManager.createTextLayer('Hello World');
-
-		this.animationManager = new AnimationManager(this.canvas, {
-			currentZoom: this.currentZoom,
-			canvasManager: this,
-			wheelThrottleTime: 15, // 降低滚轮事件节流时间，提高响应性
-			defaultEase: "power2.lin",
-			defaultDuration: 0.3, // 缩短默认动画时间
-		});
-		this.setupCanvasEvents()
-		this.stateManager.toolManager.setTool(OperationType.SELECT)
 		this.layerManager.updateLayers()
 		this.layerManager.setActiveID(text.info.id)
-
-
-		this.setupBrushEvents()
+		this.stateManager.recordState()
 	}
 	/** 画布添加对象 */
 	add(obj: any, isUpdate = true) {
@@ -104,6 +104,7 @@ export class CanvasManager {
 			animationManager: this.animationManager,
 			toolManager: this.stateManager.toolManager,
 			layerManager: this.stateManager.layerManager,
+			stateManager: this.stateManager,
 		});
 		// 设置动画交互效果
 		this.animationManager.setupInteractionAnimations();
@@ -176,7 +177,6 @@ export class CanvasManager {
 	getCanvasJSON() {
 		const keys = ["top", "left", "width", "height", "scaleX", "scaleY", "info",]
 		const json = this.canvas.toJSON(keys)
-		console.log(json, this.getObjects())
 		return JSON.stringify(json)
 	}
 	/** 加载画布JSON */
@@ -195,4 +195,8 @@ export class CanvasManager {
 		})
 
 	}
+	dispose() {
+		this.animationManager?.dispose()
+		this.eventManager?.dispose()
+	}
 }
diff --git a/src/components/Canvas/DepthCanvas/manager/EraserStateManager.js b/src/components/Canvas/DepthCanvas/manager/EraserStateManager.js
index 49e0476..4fe6d39 100644
--- a/src/components/Canvas/DepthCanvas/manager/EraserStateManager.js
+++ b/src/components/Canvas/DepthCanvas/manager/EraserStateManager.js
@@ -96,4 +96,5 @@ export class EraserStateManager {
 		this.currentSnapshot = null;
 		this.pendingCommand = null;
 	}
+	dispose() {}
 }
diff --git a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
index 53957db..07f2fe1 100644
--- a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
@@ -53,6 +53,17 @@ export class LayerManager {
 	// 更新图层列表
 	updateLayers() {
 		this.layers.value = this.canvasManager.getObjects().filter((v: any) => !!v?.info?.id).reverse()
+		window["layers"] = this.layers
+	}
+	// 更新图层参数
+	updateLayerParams(layer, keys = []) {
+		this.layers.value.forEach((item: any) => {
+			if (item.info.id === layer.info.id) {
+				keys.forEach((key: string) => {
+					item.set(key, layer[key])
+				})
+			}
+		})
 	}
 
 	/** 设置图层位置-不设置默认居中 */
@@ -204,4 +215,5 @@ export class LayerManager {
 			})
 		})
 	}
+	dispose() {}
 }
\ No newline at end of file
diff --git a/src/components/Canvas/DepthCanvas/manager/StateManager.ts b/src/components/Canvas/DepthCanvas/manager/StateManager.ts
index cb05bde..d033828 100644
--- a/src/components/Canvas/DepthCanvas/manager/StateManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/StateManager.ts
@@ -9,6 +9,7 @@ export class StateManager {
 	mxHistory: any
 	historyList: any
 	historyIndex: any
+	running: any
 
 	// 管理器	
 	canvasManager: any
@@ -16,6 +17,7 @@ export class StateManager {
 	eventManager: any
 	toolManager: any
 	brushManager: any
+	keyEventManager: any
 	// 设置管理器
 	setManager(options) {
 		options.eventManager && (this.eventManager = options.eventManager)
@@ -23,45 +25,65 @@ export class StateManager {
 		options.layerManager && (this.layerManager = options.layerManager)
 		options.toolManager && (this.toolManager = options.toolManager)
 		options.brushManager && (this.brushManager = options.brushManager)
+		options.keyEventManager && (this.keyEventManager = options.keyEventManager)
 	}
 	constructor(options) {
 		this.mxHistory = ref(50)
 		this.historyList = ref([])
 		this.historyIndex = ref(0)
+		this.running = ref(false)
 
 
 	}
 
 
 
+	/** 清空状态 */
+	clearState(isRecordCurrentState?: boolean) {
+		this.historyList.value = []
+		this.historyIndex.value = 0
+		this.running.value = false
+		if (isRecordCurrentState) this.recordState()
+	}
 	/** 记录状态 */
 	recordState() {
-		// if (this.historyIndex.value < this.historyList.value.length - 1) {
-		// 	this.historyList.value.splice(this.historyIndex.value + 1)
-		// }
-		// const state = {
-		// 	nodes: JSON.stringify(this.nodes.value)
-		// }
-		// this.historyList.value.push(state)
-		// const size = this.historyList.value.length - this.mxHistory.value
-		// if (size > 0) this.historyList.value.splice(0, size)
-		// this.historyIndex.value = this.historyList.value.length - 1
+		if (this.running.value) return
+		this.running.value = true
+		if (this.historyIndex.value < this.historyList.value.length - 1) {
+			this.historyList.value.splice(this.historyIndex.value + 1)
+		}
+		const state = {
+			canvas: this.canvasManager.getCanvasJSON(),
+		}
+		this.historyList.value.push(state)
+		const size = this.historyList.value.length - this.mxHistory.value
+		if (size > 0) this.historyList.value.splice(0, size)
+		this.historyIndex.value = this.historyList.value.length - 1
+		this.running.value = false
 	}
 	/** 撤回状态 */
 	undoState() {
-		// var index = this.historyIndex.value - 1
-		// const state = this.historyList.value[index]
-		// if (!state) return
-		// this.historyIndex.value = index
-		// this.nodes.value = JSON.parse(state.nodes)
+		if (this.running.value) return
+		var index = this.historyIndex.value - 1
+		const state = this.historyList.value[index]
+		if (!state) return
+		this.running.value = true
+		this.historyIndex.value = index
+		this.canvasManager.loadJSON(state.canvas, () => {
+			this.running.value = false
+		})
 	}
 	/** 重做状态 */
 	redoState() {
-		// var index = this.historyIndex.value + 1
-		// const state = this.historyList.value[index]
-		// if (!state) return
-		// this.historyIndex.value = index
-		// this.nodes.value = JSON.parse(state.nodes)
+		if (this.running.value) return
+		var index = this.historyIndex.value + 1
+		const state = this.historyList.value[index]
+		if (!state) return
+		this.running.value = true
+		this.historyIndex.value = index
+		this.canvasManager.loadJSON(state.canvas, () => {
+			this.running.value = false
+		})
 	}
-
+	dispose() { }
 }
diff --git a/src/components/Canvas/DepthCanvas/manager/ToolManager.ts b/src/components/Canvas/DepthCanvas/manager/ToolManager.ts
index 51d1f23..8b17c25 100644
--- a/src/components/Canvas/DepthCanvas/manager/ToolManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/ToolManager.ts
@@ -170,5 +170,8 @@ export class ToolManager {
 
 		this.brushIndicator.disable();
 	}
-
+	dispose() {
+		this.brushIndicator?.dispose()
+		this.brushManager?.dispose()
+	}
 }
diff --git a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
index b073193..8571fb7 100644
--- a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
+++ b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
@@ -6,6 +6,7 @@ export class CanvasEventManager {
 		this.canvas = canvas;
 		this.canvasManager = options.canvasManager;
 		this.toolManager = options.toolManager || null;
+		this.stateManager = options.stateManager || null;
 		this.animationManager = options.animationManager;
 		this.thumbnailManager = options.thumbnailManager;
 		this.activeElementId = options.activeElementId || { value: null };
@@ -44,7 +45,7 @@ export class CanvasEventManager {
 
 		// 共享事件
 		this.setupSelectionEvents();
-		// this.setupObjectEvents();
+		this.setupObjectEvents();
 		// this.setupDoubleClickEvents();
 
 		// this.setupHandlePathCreated();
@@ -632,129 +633,47 @@ export class CanvasEventManager {
 
 	setupObjectEvents() {
 		// 监听对象变化事件，用于更新缩略图
-		this.canvas.on("object:added", (e) => {
-			if (this.thumbnailManager && e.target && e.target.id) {
-				// 延迟更新以确保对象完全添加
-				setTimeout(() => {
-					// 现在图层就是元素本身，直接更新元素的缩略图
-					this.thumbnailManager.generateLayerThumbnail(e.target.layerId);
-				}, 300);
-			}
-		});
+		// this.canvas.on("object:added", (e) => {
+		// 	if (this.thumbnailManager && e.target && e.target.id) {
+		// 		// 延迟更新以确保对象完全添加
+		// 		setTimeout(() => {
+		// 			// 现在图层就是元素本身，直接更新元素的缩略图
+		// 			this.thumbnailManager.generateLayerThumbnail(e.target.layerId);
+		// 		}, 300);
+		// 	}
+		// });
+
+		const updateLayers = (e) => {
+			if (e.target._objects) return;
+			this.layerManager.updateLayers();
+		};
 
 		// 添加对象开始变换时的状态捕获
-		this.canvas.on(
-			"object:moving",
-			this._captureInitialTransformState.bind(this)
-		);
-		this.canvas.on(
-			"object:scaling",
-			this._captureInitialTransformState.bind(this)
-		);
-		this.canvas.on(
-			"object:rotating",
-			this._captureInitialTransformState.bind(this)
-		);
-		this.canvas.on(
-			"object:skewing",
-			this._captureInitialTransformState.bind(this)
-		);
-
+		this.canvas.on("object:moving", (e) => {
+			// console.log("object:moving", e);
+			updateLayers(e);
+		});
+		this.canvas.on("object:scaling", (e) => {
+			// console.log("object:scaling", e);
+			updateLayers(e);
+		});
+		this.canvas.on("object:rotating", (e) => {
+			// console.log("object:rotating", e);
+			updateLayers(e);
+		});
+		this.canvas.on("object:skewing", (e) => {
+			// console.log("object:skewing", e);
+			updateLayers(e);
+		});
 		this.canvas.on("object:modified", (e) => {
-			// 移除调试日志
-			// console.log("object:modified", e);
-
-			const activeObj = e.target || this.canvas.getActiveObject();
-
-			if (activeObj && this.layerManager?.commandManager) {
-				// 使用新的轻量级 TransformCommand 替代完整状态保存
-				// 检查对象是否有初始变换状态记录
-				if (activeObj._initialTransformState) {
-					// 创建并执行 TransformCommand，只记录变换属性的变化
-					const transformCmd = new TransformCommand({
-						canvas: this.canvas,
-						objectId: activeObj.id,
-						initialState: activeObj._initialTransformState,
-						finalState: TransformCommand.captureTransformState(activeObj),
-						objectType: activeObj.type,
-						name: `变换 ${activeObj.type || "对象"}`,
-						layerManager: this.layerManager,
-						layers: this.layers,
-						lastSelectLayerId: this.lastSelectLayerId,
-					});
-
-					// 执行并将命令添加到历史栈
-					this.layerManager.commandManager.execute(transformCmd, {
-						name: "对象修改",
-					});
-					// 清除临时状态记录
-					delete activeObj._initialTransformState;
-				}
-			} else {
-				this.canvasManager.changeCanvas();
-			}
-
-			if (this.thumbnailManager && e.target) {
-				if (e.target.id) {
-					this.updateLayerThumbnail(e.target.id, e.target);
-
-					// 如果该元素是分组图层的一部分，也更新分组图层的缩略图
-					if (e.target.parentId) {
-						this.updateLayerThumbnail(e.target.parentId);
-					}
-				}
-			}
+			updateLayers(e);
+			this.stateManager.recordState();
 		});
-
 		this.canvas.on("object:removed", (e) => {
-			if (this.thumbnailManager && e.target) {
-				if (e.target.id) {
-					// 如果该元素是分组图层的一部分，也更新分组图层的缩略图
-					if (e.target.parentId) {
-						// setTimeout(() => this.updateLayerThumbnail(e.target.parentId), 50);
-						this.thumbnailManager.generateLayerThumbnail(e.target.parentId);
-					}
-				}
-			}
+			updateLayers(e);
+			this.stateManager.recordState();
 		});
-
-		// // 鼠标抬起时，检查是否需要保存状态
-		// this.canvas.on("mouse:up", (e) => {
-		//   // 只在选择模式下处理对象变换的状态保存
-		//   if (this.toolManager.currentTool.value !== OperationType.SELECT) {
-		//     // 绘画、擦除等模式通过各自的命令管理状态，不需要在这里保存
-		//     return;
-		//   }
-
-		//   const activeObj = this.canvas.getActiveObject();
-		//   if (
-		//     activeObj &&
-		//     activeObj._stateRecord &&
-		//     activeObj._stateRecord.isModifying
-		//   ) {
-		//     const original = activeObj._stateRecord.originalState;
-
-		//     // 检查是否是真正的变换操作（移动、缩放、旋转）
-		//     const hasTransformChanged =
-		//       original.left !== activeObj.left ||
-		//       original.top !== activeObj.top ||
-		//       original.scaleX !== activeObj.scaleX ||
-		//       original.scaleY !== activeObj.scaleY ||
-		//       original.angle !== activeObj.angle;
-
-		//     // 只有在对象发生变换且不是命令执行过程中时才保存状态
-		//     if (hasTransformChanged && this.layerManager) {
-		//       // 立即保存状态，而不是延迟执行
-		//       this.layerManager.saveCanvasState();
-		//       delete activeObj._stateRecord;
-		//     } else {
-		//       // 清理状态记录，即使没有保存状态
-		//       delete activeObj._stateRecord;
-		//     }
-		//   }
-		// });
 	}
-
 	setupDoubleClickEvents() {
 		// 双击处理
 		this.canvas.on("mouse:dblclick", (opt) => {
@@ -878,15 +797,11 @@ export class CanvasEventManager {
 
 	updateSelectedLayer(opt) {
 		const selected = opt.selected[0];
-		if (selected) {
+		if (selected && opt.selected.length === 1) {
 			this.layerManager.setActiveID(selected?.info?.id, false)
 		}
 	}
 
-	// clearSelectedElements() {
-	//   this.activeElementId.value = null;
-	// }
-
 	// 更新图层缩略图
 	updateLayerThumbnail(layerId) {
 		if (!this.thumbnailManager || !layerId || !this.layers) return;
@@ -937,31 +852,6 @@ export class CanvasEventManager {
 		this.stopInertiaAnimation();
 	}
 
-	/**
-	 * 捕获对象开始变换时的初始状态
-	 * @private
-	 * @param {Object} e 事件对象
-	 */
-	_captureInitialTransformState(e) {
-		const obj = e.target;
-
-		// 只在首次触发变换事件时记录初始状态
-		if (obj && !obj._initialTransformState && obj.id) {
-			// 捕获对象的初始变换状态
-			obj._initialTransformState = TransformCommand.captureTransformState(obj);
-
-			// 添加调试日志(可选)
-			// console.log(`捕获对象 ${obj.id} (${obj.type}) 的初始变换状态`);
-		}
-		const arrs = [];
-		if (e.target._objects) {
-			e.target._objects.forEach((v) => arrs.push(v));
-		} else {
-			arrs.push(e.target);
-		}
-		this.canvasManager.beforeChangeCanvas(arrs);
-	}
-
 	/**
 	 * 精确检测设备类型，区分 PC、Mac、平板和移动设备
 	 * @private
diff --git a/src/components/Canvas/DepthCanvas/manager/events/KeyEventManager.ts b/src/components/Canvas/DepthCanvas/manager/events/KeyEventManager.ts
new file mode 100644
index 0000000..e863bab
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/events/KeyEventManager.ts
@@ -0,0 +1,35 @@
+export class KeyEventManager {
+	stateManager: any
+	constructor(options) {
+		this.stateManager = options.stateManager;
+		this.registerEvents()
+	}
+
+	/** 处理键盘事件 */
+	handleKeyDown(event: any) {
+		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-z", handler: () => this.stateManager.undoState() },
+			{ key: "ctrl-shift-z", handler: () => this.stateManager.redoState() },
+		]
+		list.forEach((v: any) => {
+			if (reg.test(v.key)) v.handler(event)
+		})
+	}
+	/** 注册事件 */
+	registerEvents() {
+		document.addEventListener('keydown', this.handleKeyDown.bind(this))
+	}
+	/** 删除事件 */
+	removeEvents() {
+		document.removeEventListener('keydown', this.handleKeyDown.bind(this))
+	}
+	dispose() {
+		this.removeEvents()
+	}
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/events/KeyboardManager.js b/src/components/Canvas/DepthCanvas/manager/events/KeyboardManager.js
deleted file mode 100644
index 3e711f3..0000000
--- a/src/components/Canvas/DepthCanvas/manager/events/KeyboardManager.js
+++ /dev/null
@@ -1,762 +0,0 @@
-/**
- * 键盘管理器
- * 负责处理编辑器中的键盘事件和快捷键
- * 支持PC、Mac和iPad三端适配
- */
-export class KeyboardManager {
-	/**
-	 * 创建键盘管理器
-	 * @param {Object} options 配置选项
-	 * @param {Object} options.toolManager 工具管理器实例
-	 * @param {Object} options.commandManager 命令管理器实例
-	 * @param {Object} options.layerManager 图层管理器实例
-	 * @param {Object} options.canvasManager 画布管理器实例
-	 * @param {Function} options.pasteText 粘贴文本回调函数
-	 * @param {Function} options.pasteImage 粘贴图片回调函数
-	 * @param {Ref<Boolean>} options.isRedGreenMode 是否为红绿模式
-	 * @param {HTMLElement} options.container 容器元素，用于添加事件监听
-	 */
-	constructor(options = {}) {
-		this.toolManager = options.toolManager;
-		this.commandManager = options.commandManager;
-		this.layerManager = options.layerManager;
-		this.canvasManager = options.canvasManager;
-		this.container = options.container || document;
-		this.pasteText = options.pasteText || (() => { });
-		this.pasteImage = options.pasteImage || (() => { });
-		this.isRedGreenMode = options.isRedGreenMode;
-
-		// 检测平台类型
-		this.platform = this.detectPlatform();
-		this.isTouchDevice = this.detectTouchDevice();
-
-		// 快捷键的平台特定键名
-		this.modifierKeys = {
-			ctrl: this.platform === "mac" ? "meta" : "ctrl",
-			cmdOrCtrl: this.platform === "mac" ? "meta" : "ctrl",
-			alt: "alt",
-			shift: "shift",
-			option: "alt", // Mac 特有，等同于 alt
-			cmd: "meta", // Mac 特有，等同于 Command
-		};
-
-		// 快捷键显示的平台特定符号
-		this.keySymbols = {
-			ctrl: this.platform === "mac" ? "⌃" : "Ctrl",
-			meta: this.platform === "mac" ? "⌘" : "Win",
-			alt: this.platform === "mac" ? "⌥" : "Alt",
-			shift: this.platform === "mac" ? "⇧" : "Shift",
-			escape: "Esc",
-			space: "空格",
-		};
-
-		// 快捷键映射表 - 可通过配置进行扩展
-		this.shortcuts = this.initShortcuts();
-
-		// 触摸相关状态
-		this.touchState = {
-			pinchStartDistance: 0,
-			pinchStartBrushSize: 0,
-			touchStartX: 0,
-			touchStartY: 0,
-			isTwoFingerTouch: false,
-		};
-
-		// 临时工具状态
-		this.tempToolState = {
-			active: false,
-			originalTool: null,
-		};
-
-		// 事件绑定
-		this._handleKeyDown = this.handleKeyDown.bind(this);
-		this._handleKeyUp = this.handleKeyUp.bind(this);
-		this._handlePaste = this.handlePaste.bind(this);
-		this._handleTouchStart = this.handleTouchStart.bind(this);
-		this._handleTouchMove = this.handleTouchMove.bind(this);
-		this._handleTouchEnd = this.handleTouchEnd.bind(this);
-
-		// 已注册的自定义事件处理程序
-		this.customHandlers = {};
-	}
-
-	/**
-	 * 检测当前平台
-	 * @returns {'mac'|'windows'|'ios'|'android'|'other'} 平台类型
-	 */
-	detectPlatform() {
-		const userAgent = navigator.userAgent.toLowerCase();
-
-		if (userAgent.indexOf("mac") !== -1) return "mac";
-		if (userAgent.indexOf("win") !== -1) return "windows";
-		if (/(iphone|ipad|ipod)/.test(userAgent)) return "ios";
-		if (userAgent.indexOf("android") !== -1) return "android";
-
-		return "other";
-	}
-
-	/**
-	 * 检测是否为触摸设备
-	 * @returns {boolean} 是否为触摸设备
-	 */
-	detectTouchDevice() {
-		return (
-			"ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
-		);
-	}
-
-	/**
-	 * 初始化快捷键配置
-	 * @returns {Object} 快捷键配置
-	 */
-	initShortcuts() {
-		const cmdOrCtrl = this.modifierKeys.cmdOrCtrl;
-
-		// 基本快捷键映射，将在构建时根据平台类型自动调整
-		return {
-			// 撤销/重做
-			[`${cmdOrCtrl}+z`]: { action: "undo", description: "撤销" },
-			[`${cmdOrCtrl}+shift+z`]: { action: "redo", description: "重做" },
-			[`${cmdOrCtrl}+y`]: { action: "redo", description: "重做" },
-
-			// 复制/粘贴
-			[`${cmdOrCtrl}+c`]: { action: "copy", description: "复制" },
-			[`${cmdOrCtrl}+v`]: { action: "paste", description: "粘贴", noStop: true },
-			[`${cmdOrCtrl}+x`]: { action: "cut", description: "剪切" },
-
-			// 删除
-			delete: { action: "delete", description: "删除" },
-			backspace: { action: "delete", description: "删除" },
-			up: { action: "up", description: "上" },
-			down: { action: "down", description: "下" },
-			left: { action: "left", description: "左" },
-			right: { action: "right", description: "右" },
-
-			// 选择
-			[`${cmdOrCtrl}+a`]: { action: "selectAll", description: "全选" },
-			escape: { action: "clearSelection", description: "取消选择" },
-
-			// 保存
-			[`${cmdOrCtrl}+s`]: { action: "save", description: "保存" },
-
-			// 工具切换 (这些会由工具管理器处理)
-			v: { action: "selectTool", param: "select", description: "选择工具" },
-			b: { action: "selectTool", param: "draw", description: "画笔工具" },
-			e: { action: "selectTool", param: "eraser", description: "橡皮擦" },
-			i: { action: "selectTool", param: "eyedropper", description: "吸色工具" },
-			h: { action: "selectTool", param: "pan", description: "移动画布" },
-			l: { action: "selectTool", param: "lasso", description: "套索工具" },
-			m: {
-				action: "selectTool",
-				param: "area_custom",
-				description: "自由选区工具",
-			},
-			w: { action: "selectTool", param: "wave", description: "波浪工具" },
-			j: { action: "selectTool", param: "liquify", description: "液化工具" },
-
-			// 数值调整
-			"shift+[": {
-				action: "decreaseTextureScale",
-				description: "减小材质图片大小",
-			},
-			"shift+]": {
-				action: "increaseTextureScale",
-				description: "增大材质图片大小",
-			},
-			"[": { action: "decreaseBrushSize", param: 1, description: "减小画笔" },
-			"]": { action: "increaseBrushSize", param: 1, description: "增大画笔" },
-
-			",": {
-				action: "decreaseBrushOpacity",
-				param: 0.01,
-				description: "减小透明度",
-			},
-			".": {
-				action: "increaseBrushOpacity",
-				param: 0.01,
-				description: "增大透明度",
-			},
-
-			// 空格 - 临时切换到手型工具
-			space: {
-				action: "toggleTempTool",
-				param: "pan",
-				description: "临时切换到手形工具",
-			},
-
-			// 图层操作
-			[`${cmdOrCtrl}+shift+n`]: { action: "newLayer", description: "新建图层" },
-			[`${cmdOrCtrl}+g`]: { action: "groupLayers", description: "组合图层" },
-			[`${cmdOrCtrl}+o`]: {
-				action: "addImageToNewLayer",
-				description: "上传图片到新图层",
-			},
-			[`${cmdOrCtrl}+shift+g`]: {
-				action: "ungroupLayers",
-				description: "取消组合",
-			},
-			[`${cmdOrCtrl}+j`]: { action: "mergeLayers", description: "合并图层" },
-
-			// iPad特有的快捷键(当无法使用键盘时)
-			...(this.platform === "ios" && {
-				two_finger_tap: {
-					action: "contextMenu",
-					description: "显示上下文菜单",
-				},
-				three_finger_swipe_left: { action: "undo", description: "撤销" },
-				three_finger_swipe_right: { action: "redo", description: "重做" },
-			}),
-		};
-	}
-
-	/**
-	 * 处理粘贴事件
-	 * @param {ClipboardEvent} event 粘贴事件
-	 */
-	handlePaste(event) {
-		event.preventDefault(); // 阻止默认粘贴行为
-		if (this.isRedGreenMode.value) return;
-		const text = event.clipboardData?.getData("text/plain") || "";
-		if (/^aida_copy_canvas_layer/.test(text)) return;
-		const items = event.clipboardData?.items || [];
-		// console.log(this);
-		for (const item of items) {
-			if (item.type.indexOf("text/plain") !== -1) {
-				item.getAsString((text) => {
-					this.pasteText(text);
-				});
-			} else if (item.type.indexOf("image") !== -1) {
-				const blob = item.getAsFile();
-				this.pasteImage(blob);
-			}
-		}
-	}
-
-	/**
-	 * 初始化并开始监听键盘事件
-	 */
-	init() {
-		// 添加键盘事件监听
-		this.container.addEventListener("keydown", this._handleKeyDown);
-		this.container.addEventListener("keyup", this._handleKeyUp);
-		this.container.addEventListener("paste", this._handlePaste);
-
-		// 如果是触摸设备，添加触摸事件监听
-		if (this.isTouchDevice) {
-			this.container.addEventListener("touchstart", this._handleTouchStart);
-			this.container.addEventListener("touchmove", this._handleTouchMove);
-			this.container.addEventListener("touchend", this._handleTouchEnd);
-			this.container.addEventListener("touchcancel", this._handleTouchEnd);
-		}
-
-		// console.log(`键盘管理器已初始化，平台: ${this.platform}, 触摸设备: ${this.isTouchDevice}`);
-	}
-
-	/**
-	 * hide模式下，关闭快捷键
-	 */
-	removeEvents() {
-		// 移除键盘事件监听
-		this.container.removeEventListener("keydown", this._handleKeyDown);
-		this.container.removeEventListener("keyup", this._handleKeyUp);
-		this.container.removeEventListener("paste", this._handlePaste);
-
-		// 如果是触摸设备，移除触摸事件监听
-		if (this.isTouchDevice) {
-			this.container.removeEventListener("touchstart", this._handleTouchStart);
-			this.container.removeEventListener("touchmove", this._handleTouchMove);
-			this.container.removeEventListener("touchend", this._handleTouchEnd);
-			this.container.removeEventListener("touchcancel", this._handleTouchEnd);
-		}
-	}
-
-
-
-	/**
-	 * 处理键盘按下事件
-	 * @param {KeyboardEvent} event 键盘事件
-	 */
-	handleKeyDown(event) {
-		// 如果当前焦点在输入框内，不处理大部分快捷键
-		if (this.isInputActive() && !["Escape", "Tab"].includes(event.key)) {
-			return;
-		}
-
-		// 构建快捷键标识符
-		const shortcutKey = this.buildShortcutKey(event);
-
-		// 查找并执行快捷键动作
-		const shortcut = this.shortcuts[shortcutKey];
-		if (shortcut) {
-			// 阻止默认行为，例如浏览器的保存对话框等
-			if (shortcutKey.includes(`${this.modifierKeys.cmdOrCtrl}+`) && !shortcut.noStop) {
-				event.preventDefault();
-			}
-
-			this.executeAction(shortcut.action, shortcut.param, event);
-			return;
-		}
-
-		// 工具快捷键处理
-		if (this.toolManager && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			this.toolManager.handleKeyboardShortcut(event);
-		}
-	}
-
-	/**
-	 * 处理键盘释放事件
-	 * @param {KeyboardEvent} event 键盘事件
-	 */
-	handleKeyUp(event) {
-		// 当空格键释放时，如果是临时工具，切回原始工具
-		if (event.key === " " && this.tempToolState.active) {
-			this.restoreTempTool();
-		}
-
-		// 调用自定义处理程序
-		const key = event.key.toLowerCase();
-		if (this.customHandlers[key] && typeof this.customHandlers[key].onKeyUp === "function") {
-			this.customHandlers[key].onKeyUp(event);
-		}
-	}
-
-	/**
-	 * 处理触摸开始事件
-	 * @param {TouchEvent} event 触摸事件
-	 */
-	handleTouchStart(event) {
-		const touches = event.touches;
-
-		// 存储初始状态以便后续计算
-		if (touches.length === 2) {
-			// 双指触摸 - 可用于缩放或调整画笔大小
-			this.touchState.isTwoFingerTouch = true;
-			this.touchState.pinchStartDistance = this.getDistanceBetweenTouches(touches[0], touches[1]);
-
-			// 如果有画笔管理器，记录起始画笔大小
-			if (this.toolManager && this.toolManager.brushManager) {
-				this.touchState.pinchStartBrushSize = this.toolManager.brushManager.brushSize.value;
-			}
-		} else if (touches.length === 3) {
-			// 三指触摸 - 可用于撤销/重做
-			this.touchState.touchStartX = touches[0].clientX;
-		}
-	}
-
-	/**
-	 * 处理触摸移动事件
-	 * @param {TouchEvent} event 触摸事件
-	 */
-	handleTouchMove(event) {
-		const touches = event.touches;
-
-		// 阻止默认行为（例如滚动）
-		if (touches.length >= 2) {
-			event.preventDefault();
-		}
-
-		// 双指缩放处理 - 调整画笔大小
-		if (touches.length === 2 && this.touchState.isTwoFingerTouch) {
-			const currentDistance = this.getDistanceBetweenTouches(touches[0], touches[1]);
-			const scale = currentDistance / this.touchState.pinchStartDistance;
-
-			// 调整画笔大小
-			if (this.toolManager && this.toolManager.brushManager && scale !== 1) {
-				const newSize = this.touchState.pinchStartBrushSize * scale;
-				this.toolManager.brushManager.setBrushSize(newSize);
-			}
-		}
-		// 三指滑动处理 - 撤销/重做
-		else if (touches.length === 3) {
-			const deltaX = touches[0].clientX - this.touchState.touchStartX;
-
-			// 滑动超过50px认为是有效的手势
-			if (Math.abs(deltaX) > 50) {
-				if (deltaX < 0) {
-					// 向左滑动 - 撤销
-					this.executeAction("undo");
-				} else {
-					// 向右滑动 - 重做
-					this.executeAction("redo");
-				}
-
-				// 更新起始位置，防止连续触发
-				this.touchState.touchStartX = touches[0].clientX;
-			}
-		}
-	}
-
-	/**
-	 * 处理触摸结束事件
-	 * @param {TouchEvent} event 触摸事件
-	 */
-	handleTouchEnd(event) {
-		// 检测双指轻拍 (两个手指几乎同时按下，又几乎同时抬起)
-		if (this.touchState.isTwoFingerTouch && event.touches.length === 0) {
-			if (new Date().getTime() - this.touchState.touchStartTime < 300) {
-				// 双指轻拍 - 可以触发上下文菜单
-				this.executeAction("contextMenu");
-			}
-		}
-
-		// 重置触摸状态
-		this.touchState.isTwoFingerTouch = false;
-	}
-
-	/**
-	 * 计算两个触摸点之间的距离
-	 * @param {Touch} touch1 第一个触摸点
-	 * @param {Touch} touch2 第二个触摸点
-	 * @returns {number} 两点间距离
-	 */
-	getDistanceBetweenTouches(touch1, touch2) {
-		const dx = touch1.clientX - touch2.clientX;
-		const dy = touch1.clientY - touch2.clientY;
-		return Math.sqrt(dx * dx + dy * dy);
-	}
-
-	/**
-	 * 执行快捷键对应的动作
-	 * @param {string} action 动作名称
-	 * @param {*} param 动作参数
-	 * @param {Event} event 原始事件
-	 */
-	executeAction(action, param, event) {
-		switch (action) {
-			case "undo":
-				if (this.commandManager) {
-					this.commandManager.undo();
-				}
-				break;
-
-			case "redo":
-				if (this.commandManager) {
-					this.commandManager.redo();
-				}
-				break;
-
-			case "copy":
-				// 复制逻辑
-				// console.log("复制当前选中图层");
-				if (this.isRedGreenMode.value) return;
-				this.layerManager.copyLayer(this.layerManager.activeLayerId.value);
-				break;
-
-			case "paste":
-				// 粘贴逻辑
-				// console.log("粘贴");
-				if (this.isRedGreenMode.value) return;
-				this.layerManager.pasteLayer();
-				break;
-
-			case "cut":
-				// 剪切逻辑
-				// console.log("剪切");
-				if (this.isRedGreenMode.value) return;
-				this.layerManager.cutLayer(this.layerManager.activeLayerId.value);
-				break;
-
-			case "delete":
-				// 删除逻辑
-				// console.log("删除");
-				if (this.isRedGreenMode.value) return;
-				this.layerManager.removeLayer(this.layerManager.activeLayerId.value);
-				break;
-
-			case "selectAll":
-				// 全选逻辑
-				// console.log("全选");
-				if (this.isRedGreenMode.value) return;
-				// 这里需要实现全选逻辑 TODO:  是否在选择模式下才可以全选？
-				if (this.layerManager) {
-					this.layerManager.selectAll();
-				}
-				break;
-
-			case "clearSelection":
-				// 清除选择逻辑
-				// console.log("清除选择");
-				// 这里需要实现清除选择逻辑
-				if (this.layerManager) {
-					this.layerManager.clearSelection();
-				}
-				break;
-
-			case "save":
-				// 保存逻辑
-				// console.log("保存");
-				break;
-
-			case "selectTool":
-				// 选择工具
-				if (this.toolManager && param) {
-					this.toolManager.setToolWithCommand(param);
-				}
-				break;
-
-			case "up":
-			case "down":
-			case "left":
-			case "right":
-				// 方向键逻辑
-				this.canvasManager.moveActiveObject(action);
-				break;
-
-			case "increaseBrushSize":
-				// 增大画笔尺寸
-				if (this.toolManager && this.toolManager.brushManager) {
-					const amount = param || 5;
-					this.toolManager.brushManager.increaseBrushSize(amount);
-				}
-				break;
-
-			case "decreaseBrushSize":
-				// 减小画笔尺寸
-				if (this.toolManager && this.toolManager.brushManager) {
-					const amount = param || 5;
-					this.toolManager.brushManager.decreaseBrushSize(amount);
-				}
-				break;
-
-			case "increaseBrushOpacity":
-				// 增大画笔透明度
-				if (this.toolManager && this.toolManager.brushManager) {
-					const amount = param || 0.01;
-					this.toolManager.brushManager.increaseBrushOpacity(amount);
-				}
-				break;
-
-			case "decreaseTextureScale":
-				// 减小画笔材质图片大小
-				if (this.toolManager && this.toolManager.brushManager) {
-					const amount = param || 5;
-					this.toolManager.brushManager.decreaseBrushSize(amount);
-				}
-				break;
-
-			case "increaseTextureScale":
-				// 增大画笔材质图片大小
-				if (this.toolManager && this.toolManager.brushManager) {
-					const amount = param || 0.01;
-					this.toolManager.brushManager.increaseTextureScale(amount);
-				}
-				break;
-
-			case "decreaseBrushOpacity":
-				// 减小画笔透明度
-				if (this.toolManager && this.toolManager.brushManager) {
-					const amount = param || 0.01;
-					this.toolManager.brushManager.decreaseBrushOpacity(amount);
-				}
-				break;
-
-			case "toggleTempTool":
-				// 临时切换工具
-				if (param && this.toolManager) {
-					this.setTempTool(param);
-				}
-				break;
-
-			case "newLayer":
-				// 创建新图层
-				if (this.layerManager) {
-					this.layerManager.createNewLayer();
-				}
-				break;
-
-			case "addImageToNewLayer":
-				this.toolManager?.openFile?.();
-				break;
-
-			case "groupLayers":
-				// 组合图层
-				if (this.layerManager) {
-					this.layerManager.groupSelectedLayers();
-				}
-				break;
-
-			case "ungroupLayers":
-				// 解组图层
-				if (this.layerManager) {
-					this.layerManager.ungroupSelectedLayer();
-				}
-				break;
-
-			case "mergeLayers":
-				// 合并图层
-				if (this.layerManager) {
-					this.layerManager.mergeSelectedLayers();
-				}
-				break;
-
-			case "contextMenu":
-				// 上下文菜单（通常由右击或触控设备上的特定手势触发）
-				// console.log("显示上下文菜单");
-				// 这里需要实现显示上下文菜单的逻辑
-				break;
-
-			default:
-				// 调用自定义注册的动作处理
-				if (this.customHandlers[action]) {
-					this.customHandlers[action].execute(param, event);
-				}
-		}
-	}
-
-	/**
-	 * 设置临时工具
-	 * @param {string} toolId 临时工具ID
-	 */
-	setTempTool(toolId) {
-		if (!this.toolManager || this.tempToolState.active) return;
-
-		// 保存当前工具
-		this.tempToolState.originalTool = this.toolManager.getCurrentTool();
-		this.tempToolState.active = true;
-
-		// 切换到临时工具
-		this.toolManager.setTool(toolId);
-	}
-
-	/**
-	 * 恢复临时工具切换前的工具
-	 */
-	restoreTempTool() {
-		if (!this.toolManager || !this.tempToolState.active) return;
-
-		// 恢复到原始工具
-		if (this.tempToolState.originalTool) {
-			this.toolManager.setTool(this.tempToolState.originalTool);
-		}
-
-		// 重置状态
-		this.tempToolState.active = false;
-		this.tempToolState.originalTool = null;
-	}
-
-	/**
-	 * 构建快捷键标识符
-	 * @param {KeyboardEvent} event 键盘事件
-	 * @returns {string} 快捷键标识符
-	 */
-	buildShortcutKey(event) {
-		let shortcutKey = "";
-
-		// 统一处理Mac和PC的修饰键
-		if ((this.platform === "mac" && event.metaKey) || (this.platform !== "mac" && event.ctrlKey)) {
-			shortcutKey += `${this.modifierKeys.cmdOrCtrl}+`;
-		} else if (event.ctrlKey) {
-			shortcutKey += "ctrl+";
-		}
-
-		if (event.shiftKey) shortcutKey += "shift+";
-		if (event.altKey) shortcutKey += "alt+";
-
-		const key = event.key.toLowerCase();
-		// 特殊键处理
-		switch (key) {
-			case " ":
-				shortcutKey += "space";
-				break;
-			case "arrowup":
-				shortcutKey += "up";
-				break;
-			case "arrowdown":
-				shortcutKey += "down";
-				break;
-			case "arrowleft":
-				shortcutKey += "left";
-				break;
-			case "arrowright":
-				shortcutKey += "right";
-				break;
-			default:
-				shortcutKey += key;
-		}
-
-		return shortcutKey;
-	}
-
-	/**
-	 * 检查当前是否有输入框处于活动状态
-	 * @returns {boolean} 是否有输入框处于活动状态
-	 */
-	isInputActive() {
-		const activeElement = document.activeElement;
-		const tagName = activeElement.tagName.toLowerCase();
-		return (
-			tagName === "input" ||
-			tagName === "textarea" ||
-			activeElement.getAttribute("contenteditable") === "true"
-		);
-	}
-
-	/**
-	 * 获取所有可用的快捷键
-	 * @returns {Array} 快捷键列表
-	 */
-	getShortcuts() {
-		return Object.entries(this.shortcuts).map(([key, value]) => ({
-			key,
-			displayKey: this.formatShortcutForDisplay(key),
-			...value,
-		}));
-	}
-
-	/**
-	 * 格式化快捷键以便显示
-	 * @param {string} shortcut 快捷键标识符
-	 * @returns {string} 格式化后的快捷键显示
-	 */
-	formatShortcutForDisplay(shortcut) {
-		// 将快捷键格式化为适合当前平台显示的形式
-		return shortcut
-			.split("+")
-			.map((key) => {
-				// 将键名转换为显示符号
-				return this.keySymbols[key.toLowerCase()] || key.toUpperCase();
-			})
-			.join("+");
-	}
-
-	/**
-	 * 注册自定义快捷键处理程序
-	 * @param {string} action 动作名称
-	 * @param {Object} handler 处理程序对象
-	 * @param {Function} handler.execute 执行函数
-	 * @param {Function} handler.onKeyUp 键释放处理函数（可选）
-	 * @param {string} description 描述
-	 */
-	registerCustomHandler(action, handler, description = "") {
-		if (!action || typeof handler.execute !== "function") {
-			console.error("无效的自定义处理程序");
-			return;
-		}
-
-		this.customHandlers[action] = handler;
-
-		// 如果提供了快捷键，添加到快捷键映射
-		if (handler.shortcut) {
-			this.shortcuts[handler.shortcut] = {
-				action,
-				description: description || handler.description || action,
-			};
-		}
-	}
-
-	/**
-	 * 清理资源
-	 */
-	dispose() {
-		// 移除事件监听
-		this.removeEvents();
-		// 清除引用
-		this.toolManager = null;
-		this.commandManager = null;
-		this.layerManager = null;
-		this.container = null;
-		this.customHandlers = {};
-		this.tempToolState = { active: false, originalTool: null };
-		this.touchState = {};
-	}
-}

From d11504756389553463ce0576d16a95ff6cc16728 Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Thu, 12 Mar 2026 15:51:18 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E6=B7=B1=E5=BA=A6=E7=94=BB=E5=B8=83=20?=
 =?UTF-8?q?=E7=9F=A9=E5=BD=A2=E5=B7=A5=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/depth-header-tools.vue         |  11 +-
 .../components/layer-panel/layer-item.vue     |   1 -
 .../Canvas/DepthCanvas/depth-canvas.vue       |  36 +-
 src/components/Canvas/DepthCanvas/index.vue   |   2 +-
 .../DepthCanvas/manager/CanvasManager.ts      |  13 +-
 .../DepthCanvas/manager/LayerManager.ts       |  10 +-
 .../DepthCanvas/manager/RectToolManager.ts    |  56 +++
 .../manager/events/CanvasEventManager.js      | 446 ++++++++++--------
 .../Canvas/DepthCanvas/tools/exportMethod.js  |  16 +
 9 files changed, 378 insertions(+), 213 deletions(-)
 create mode 100644 src/components/Canvas/DepthCanvas/manager/RectToolManager.ts

diff --git a/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue b/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
index 2ba172a..d153721 100644
--- a/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
+++ b/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue
@@ -15,10 +15,13 @@
 			<span class="icon"><svg-icon name="export" size="12" /></span>
 			<span class="text">Export</span>
 		</button>
-		<button class="export" @click="emit('import')">
-			<span class="text">import</span>
+		<button class="export" @click="emit('export-local')">
+			<span class="text">保存本地</span>
 		</button>
-		<button class="workbench">
+		<button class="export" @click="emit('import-local')">
+			<span class="text">本地导入</span>
+		</button>
+		<button class="workbench" @click="emit('export-close')">
 			<span class="icon"><svg-icon name="dc-workbench" size="20" /></span>
 			<span class="text">Workbench</span>
 		</button>
@@ -32,7 +35,7 @@
 		zoom: { default: 1, type: Number },
 		step: { default: 0.1, type: Number }
 	})
-	const emit = defineEmits(['export', 'import'])
+	const emit = defineEmits(['export', 'export-local', 'import-local', 'export-close'])
 	const importLocalImage = inject('importLocalImage') as () => void
 	const stateManager = inject('stateManager') as any
 	const toolManager = inject('toolManager') as any
diff --git a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue
index a3d62c6..7f45ef1 100644
--- a/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue
+++ b/src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue
@@ -61,7 +61,6 @@
 	}
 	const onClickLayer = () => {
 		layerManager.setActiveID(props.layer.info.id)
-		toolManager.setTool(OperationType.SELECT)
 	}
 </script>
 
diff --git a/src/components/Canvas/DepthCanvas/depth-canvas.vue b/src/components/Canvas/DepthCanvas/depth-canvas.vue
index 41fae1f..c4a086f 100644
--- a/src/components/Canvas/DepthCanvas/depth-canvas.vue
+++ b/src/components/Canvas/DepthCanvas/depth-canvas.vue
@@ -6,7 +6,12 @@
 		<template v-if="isReady">
 			<layer-panel />
 			<details-panel />
-			<depth-header-tools @export="exportCanvas" @import="importCanvas" />
+			<depth-header-tools
+				@export="exportCanvas"
+				@export-local="exportCanvasToLocalStorage"
+				@import-local="importCanvasFromLocalStorage"
+				@export-close="exportCanvasAndClose"
+			/>
 			<brush-control-panel :currentTool="toolManager.currentTool.value" />
 			<zoom
 				:zoom="canvasManager.currentZoom.value / 100"
@@ -22,6 +27,7 @@
 	import { fabric } from 'fabric-with-all'
 	import { computed, ref, markRaw, onMounted, nextTick, provide, onBeforeUnmount } from 'vue'
 	import { OperationType } from './tools/layerHelper'
+	import { exportCanvasToImage } from './tools/exportMethod'
 	// 组件
 	import layerPanel from './components/layer-panel/index.vue'
 	import detailsPanel from './components/details-panel/index.vue'
@@ -36,11 +42,7 @@
 	import { ToolManager } from './manager/ToolManager'
 	import { KeyEventManager } from './manager/events/KeyEventManager'
 
-	// 准备就绪
-	const isReady = ref(false)
-	const canvasContainerRef = ref(null)
-	const canvasRef = ref(null)
-
+	const emit = defineEmits(['close'])
 	const props = defineProps({
 		config: {
 			type: Object,
@@ -48,6 +50,11 @@
 		}
 	})
 
+	// 准备就绪
+	const isReady = ref(false)
+	const canvasContainerRef = ref(null)
+	const canvasRef = ref(null)
+
 	// 状态管理器
 	const stateManager = new StateManager({})
 	provide('stateManager', stateManager)
@@ -136,10 +143,21 @@
 	provide('importLocalImage', importLocalImage)
 
 	const exportCanvas = () => {
+		// 导出图片
+		exportCanvasToImage(canvasManager.canvas).then((url) => {
+			const a = document.createElement('a')
+			a.href = url
+			a.download = 'canvas.png'
+			a.click()
+		})
+	}
+	// 导出到本地存储
+	const exportCanvasToLocalStorage = () => {
 		const json = canvasManager.getCanvasJSON()
 		localStorage.setItem('canvasJSON', json)
 	}
-	const importCanvas = () => {
+	// 从本地存储导入
+	const importCanvasFromLocalStorage = () => {
 		const json = localStorage.getItem('canvasJSON')
 		if (!json) return
 		canvasManager.loadJSON(json, (success) => {
@@ -151,6 +169,10 @@
 			stateManager.clearState(true)
 		})
 	}
+	// 导出画布并关闭
+	const exportCanvasAndClose = () => {
+		emit('close')
+	}
 </script>
 <style lang="less">
 	@import '@vue-flow/core/dist/style.css';
diff --git a/src/components/Canvas/DepthCanvas/index.vue b/src/components/Canvas/DepthCanvas/index.vue
index 649ffdf..862dca5 100644
--- a/src/components/Canvas/DepthCanvas/index.vue
+++ b/src/components/Canvas/DepthCanvas/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<fullscreen-dialog v-model="dialogVisible" hide-destroy>
 		<div class="canvas-box">
-			<depth-canvas :config="config" />
+			<depth-canvas :config="config" @close="close" />
 		</div>
 	</fullscreen-dialog>
 </template>
diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
index f23f79b..a059f55 100644
--- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
@@ -70,7 +70,6 @@ export class CanvasManager {
 		this.setupCanvasEvents()
 		this.setupBrushEvents()
 
-		this.stateManager.toolManager.setTool(OperationType.SELECT)
 		// 创建矩形
 		const rect = this.layerManager.createRectLayer({
 			left: 400,
@@ -86,6 +85,7 @@ export class CanvasManager {
 		this.layerManager.updateLayers()
 		this.layerManager.setActiveID(text.info.id)
 		this.stateManager.recordState()
+		// this.stateManager.toolManager.setTool(OperationType.RECTANGLE)
 	}
 	/** 画布添加对象 */
 	add(obj: any, isUpdate = true) {
@@ -95,6 +95,14 @@ export class CanvasManager {
 			this.renderAll()
 		}
 	}
+	/** 画布移除对象 */
+	remove(obj: any, isUpdate = true) {
+		this.canvas.remove(obj)
+		if (isUpdate) {
+			this.layerManager.updateLayers()
+			this.renderAll()
+		}
+	}
 
 	/** 设置画布事件 */
 	setupCanvasEvents() {
@@ -112,6 +120,7 @@ export class CanvasManager {
 	/** 设置激活对象 */
 	setActiveObjectByID(id: string) {
 		const obj = this.getObjectById(id)
+		console.log(obj)
 		if (obj) this.canvas.setActiveObject(obj)
 		this.renderAll()
 	}
@@ -122,7 +131,7 @@ export class CanvasManager {
 		return this.canvas.getObjects() || []
 	}
 	getObjectById(id: string) {
-		return this.getObjects().find((item: any) => item.info.id === id)
+		return this.getObjects().find((item: any) => item?.info?.id === id)
 	}
 	renderAll() {
 		this.canvas.renderAll()
diff --git a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
index 07f2fe1..f427156 100644
--- a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts
@@ -2,6 +2,7 @@ import { ref } from 'vue'
 import { fabric } from 'fabric-with-all'
 import { createId } from '../../tools/tools'
 import { exportObjectsToImage } from '../tools/exportMethod'
+import { OperationType } from '../tools/layerHelper'
 
 export class LayerManager {
 	stateManager: any
@@ -18,6 +19,7 @@ export class LayerManager {
 		this.activeID.value = id
 		if (isActive) {
 			this.canvasManager.setActiveObjectByID(id)
+			this.stateManager.toolManager.setTool(OperationType.SELECT)
 		}
 	}
 	getLayerByID(id) {
@@ -114,7 +116,7 @@ export class LayerManager {
 		return textLayer
 	}
 	/** 创建矩形图层 */
-	createRectLayer(options?: any) {
+	createRectLayer(options?: any, isActive = false) {
 		const rectLayer = new fabric.Rect({
 			width: 100,
 			height: 100,
@@ -128,10 +130,11 @@ export class LayerManager {
 		})
 		this.setLayerPosition(rectLayer, options)
 		this.canvasManager.add(rectLayer)
+		if (isActive) this.setActiveID(rectLayer.info.id)
 		return rectLayer
 	}
 	/** 创建圆形图层 */
-	createCircleLayer(options?: any) {
+	createCircleLayer(options?: any, isActive = false) {
 		const circleLayer = new fabric.Circle({
 			radius: 50,
 			fill: '#000',
@@ -144,6 +147,7 @@ export class LayerManager {
 		})
 		this.setLayerPosition(circleLayer, options)
 		this.canvasManager.add(circleLayer)
+		if (isActive) this.setActiveID(circleLayer.info.id)
 		return circleLayer
 	}
 	/** 创建图片图层 */
@@ -215,5 +219,5 @@ export class LayerManager {
 			})
 		})
 	}
-	dispose() {}
+	dispose() { }
 }
\ No newline at end of file
diff --git a/src/components/Canvas/DepthCanvas/manager/RectToolManager.ts b/src/components/Canvas/DepthCanvas/manager/RectToolManager.ts
new file mode 100644
index 0000000..6e744c9
--- /dev/null
+++ b/src/components/Canvas/DepthCanvas/manager/RectToolManager.ts
@@ -0,0 +1,56 @@
+import { fabric } from 'fabric-with-all'
+/** 矩形工具管理器 */
+export class RectToolManager {
+	// 管理器	
+	canvasManager: any
+	stateManager: any
+	layerManager: any
+
+	isDragging: boolean = false
+	startX: number = 0
+	startY: number = 0
+	demoObject: any
+	constructor(options) {
+		this.canvasManager = options.canvasManager
+		this.stateManager = options.stateManager
+		this.layerManager = options.layerManager
+	}
+	mouseDownEvent(e) {
+		this.isDragging = true
+		this.startX = e.absolutePointer.x
+		this.startY = e.absolutePointer.y
+		const rect = new fabric.Rect({
+			left: this.startX,
+			top: this.startY,
+			width: 0,
+			height: 0,
+			fill: '#000',
+			evented: false,
+		})
+		this.demoObject = rect
+		this.canvasManager.canvas.add(rect)
+		this.canvasManager.canvas.renderAll()
+	}
+	mouseMoveEvent(e) {
+		if (!this.isDragging) return;
+		const width = e.absolutePointer.x - this.startX
+		const height = e.absolutePointer.y - this.startY
+		this.demoObject.set({ width, height })
+		this.canvasManager.canvas.renderAll()
+	}
+	mouseUpEvent(e) {
+		if (!this.isDragging) return;
+		this.isDragging = false;
+		var width = e.absolutePointer.x - this.startX
+		var height = e.absolutePointer.y - this.startY
+		if(width === 0) width = 50
+		if(height === 0) height = 50
+		this.demoObject.set({ width, height })
+		const object = this.demoObject.toJSON("evented")
+		this.layerManager.createRectLayer(object, true)
+		this.canvasManager.canvas.remove(this.demoObject)
+		this.canvasManager.canvas.renderAll()
+
+	}
+	dispose() { }
+}
diff --git a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
index 8571fb7..0f328b4 100644
--- a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
+++ b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
@@ -1,5 +1,6 @@
 import { isBoolean } from "lodash-es";
 import { OperationType, OperationTypes } from "../../tools/layerHelper";
+import { RectToolManager } from "../RectToolManager"
 
 export class CanvasEventManager {
 	constructor(canvas, options = {}) {
@@ -22,6 +23,15 @@ export class CanvasEventManager {
 		this.longPressTimer = null;
 		this.longPressThreshold = 500;
 
+
+		const managers = {
+			canvasManager: this.canvasManager,
+			stateManager: this.stateManager,
+			toolManager: this.toolManager,
+			layerManager: this.layerManager,
+		}
+		this.rectToolManager = new RectToolManager(managers)
+
 		// 初始化所有事件
 		this.initEvents();
 	}
@@ -188,51 +198,65 @@ export class CanvasEventManager {
 			// 	console.log("==========选择模式鼠标右击画布对象")
 
 			//   } else 
-			if (
-				opt.e.altKey ||
-				opt.e.which === 2 ||
-				this.toolManager.currentTool.value === OperationType.PAN
-			) {
+			const currentTool = this.toolManager.currentTool.value;
+			if (currentTool === OperationType.DRAW) {
+				// 绘画模式
+			} else if (currentTool === OperationType.ERASER) {
+				// 橡皮擦模式
+			} else if (currentTool === OperationType.SELECTBOX) {
+				// 选择框模式
+			} else if (currentTool === OperationType.RECTANGLE) {
+				// 矩形模式
+				this.rectToolManager.mouseDownEvent(opt);
+			} else if (opt.e.altKey || opt.e.which === 2 || currentTool === OperationType.PAN) {
 				this.canvas.isDragging = true;
 				this.canvas.lastPosX = opt.e.clientX;
 				this.canvas.lastPosY = opt.e.clientY;
-				this.canvas.defaultCursor = "grabbing";
+				// this.canvas.defaultCursor = "grabbing";
 
 				// 记录拖动开始时间和位置，用于计算速度
 				this.dragStartTime = Date.now();
 				this.lastMousePositions = []; // 重置位置历史
 
-				if (this.canvas.isDragging) {
-					this.canvas.selection = false;
-					this.canvas.renderAll();
-				}
+				this.canvas.selection = false;
+				this.canvas.renderAll();
 			}
 		});
 
 		// 鼠标移动事件
 		this.canvas.on("mouse:move", (opt) => {
-			if (!this.canvas.isDragging) return;
+			const currentTool = this.toolManager.currentTool.value;
+			if (currentTool === OperationType.DRAW) {
+				// 绘画模式
+			} else if (currentTool === OperationType.ERASER) {
+				// 橡皮擦模式
+			} else if (currentTool === OperationType.SELECTBOX) {
+				// 选择框模式
+			} else if (currentTool === OperationType.RECTANGLE) {
+				// 矩形模式
+				this.rectToolManager.mouseMoveEvent(opt);
+			} else if (this.canvas.isDragging) {
+				const vpt = this.canvas.viewportTransform;
+				vpt[4] += opt.e.clientX - this.canvas.lastPosX;
+				vpt[5] += opt.e.clientY - this.canvas.lastPosY;
 
-			const vpt = this.canvas.viewportTransform;
-			vpt[4] += opt.e.clientX - this.canvas.lastPosX;
-			vpt[5] += opt.e.clientY - this.canvas.lastPosY;
+				// 记录鼠标位置和时间，用于计算惯性
+				const now = Date.now();
+				this.lastMousePositions.push({
+					x: opt.e.clientX,
+					y: opt.e.clientY,
+					time: now,
+				});
 
-			// 记录鼠标位置和时间，用于计算惯性
-			const now = Date.now();
-			this.lastMousePositions.push({
-				x: opt.e.clientX,
-				y: opt.e.clientY,
-				time: now,
-			});
-
-			// 保持历史记录在限定数量内
-			if (this.lastMousePositions.length > this.positionHistoryLimit) {
-				this.lastMousePositions.shift();
+				// 保持历史记录在限定数量内
+				if (this.lastMousePositions.length > this.positionHistoryLimit) {
+					this.lastMousePositions.shift();
+				}
+				this.canvas.setViewportTransform(vpt);
+				this.canvas.renderAll();
+				this.canvas.lastPosX = opt.e.clientX;
+				this.canvas.lastPosY = opt.e.clientY;
 			}
-			this.canvas.setViewportTransform(vpt);
-			this.canvas.renderAll();
-			this.canvas.lastPosX = opt.e.clientX;
-			this.canvas.lastPosY = opt.e.clientY;
 		});
 
 		// 鼠标抬起事件
@@ -284,171 +308,197 @@ export class CanvasEventManager {
 		// 使用标准的mouse事件，Fabric.js会自动处理触摸转换
 		this.canvas.on("mouse:down", (opt) => {
 			// 只在PAN模式下处理触摸事件
-			if (this.toolManager.currentTool.value !== OperationType.PAN) {
-				return;
-			}
+			const currentTool = this.toolManager.currentTool.value;
+			if (currentTool === OperationType.DRAW) {
+				// 绘画模式
+			} else if (currentTool === OperationType.ERASER) {
+				// 橡皮擦模式
+			} else if (currentTool === OperationType.SELECTBOX) {
+				// 选择框模式
+			} else if (currentTool === OperationType.RECTANGLE) {
+				// 矩形模式
+				this.rectToolManager.mouseDownEvent(opt);
+			} else if (currentTool === OperationType.PAN) {
 
-			// 平滑停止任何正在进行的惯性动画
-			this.stopInertiaAnimation(true);
+				// 平滑停止任何正在进行的惯性动画
+				this.stopInertiaAnimation(true);
 
-			// 检查是否是触摸事件
-			const isTouch = opt.e.type && opt.e.type.includes("touch");
-			const touches =
-				opt.e.touches || (opt.e.originalEvent && opt.e.originalEvent.touches);
+				// 检查是否是触摸事件
+				const isTouch = opt.e.type && opt.e.type.includes("touch");
+				const touches =
+					opt.e.touches || (opt.e.originalEvent && opt.e.originalEvent.touches);
 
-			if (isTouch && touches && touches.length === 2) {
-				// 双指触摸 - 用于缩放
-				this.touchState.isZooming = true;
-				this.touchState.initialDistance = this.getTouchDistance(
-					touches[0],
-					touches[1]
-				);
-				this.touchState.initialZoom = this.canvas.getZoom();
+				if (isTouch && touches && touches.length === 2) {
+					// 双指触摸 - 用于缩放
+					this.touchState.isZooming = true;
+					this.touchState.initialDistance = this.getTouchDistance(
+						touches[0],
+						touches[1]
+					);
+					this.touchState.initialZoom = this.canvas.getZoom();
 
-				// 计算缩放中心点
-				const centerX = (touches[0].clientX + touches[1].clientX) / 2;
-				const centerY = (touches[0].clientY + touches[1].clientY) / 2;
-				this.touchState.zoomCenter = { x: centerX, y: centerY };
+					// 计算缩放中心点
+					const centerX = (touches[0].clientX + touches[1].clientX) / 2;
+					const centerY = (touches[0].clientY + touches[1].clientY) / 2;
+					this.touchState.zoomCenter = { x: centerX, y: centerY };
 
-				opt.e.preventDefault();
-			} else if (isTouch && touches && touches.length === 1) {
-				// 单指触摸 - 用于拖拽
-				this.canvas.isDragging = true;
-				this.canvas.lastPosX = touches[0].clientX;
-				this.canvas.lastPosY = touches[0].clientY;
+					opt.e.preventDefault();
+				} else if (isTouch && touches && touches.length === 1) {
+					// 单指触摸 - 用于拖拽
+					this.canvas.isDragging = true;
+					this.canvas.lastPosX = touches[0].clientX;
+					this.canvas.lastPosY = touches[0].clientY;
 
-				this.dragStartTime = Date.now();
-				this.lastMousePositions = [];
+					this.dragStartTime = Date.now();
+					this.lastMousePositions = [];
 
-				this.canvas.selection = false;
-				opt.e.preventDefault();
-			} else if (!isTouch) {
-				// 鼠标事件 - 用于拖拽
-				this.canvas.isDragging = true;
-				this.canvas.lastPosX = opt.e.clientX;
-				this.canvas.lastPosY = opt.e.clientY;
+					this.canvas.selection = false;
+					opt.e.preventDefault();
+				} else if (!isTouch) {
+					// 鼠标事件 - 用于拖拽
+					this.canvas.isDragging = true;
+					this.canvas.lastPosX = opt.e.clientX;
+					this.canvas.lastPosY = opt.e.clientY;
 
-				this.dragStartTime = Date.now();
-				this.lastMousePositions = [];
+					this.dragStartTime = Date.now();
+					this.lastMousePositions = [];
 
-				this.canvas.selection = false;
-				opt.e.preventDefault();
+					this.canvas.selection = false;
+					opt.e.preventDefault();
+				}
 			}
 		});
 
 		// 触摸移动事件 - 优化性能
 		this.canvas.on("mouse:move", (opt) => {
-			// 只在PAN模式下处理
-			if (this.toolManager.currentTool.value !== OperationType.PAN) {
-				return;
-			}
 
-			// 检查是否是触摸事件
-			const isTouch = opt.e.type && opt.e.type.includes("touch");
-			const touches =
-				opt.e.touches || (opt.e.originalEvent && opt.e.originalEvent.touches);
+			const currentTool = this.toolManager.currentTool.value;
+			if (currentTool === OperationType.DRAW) {
+				// 绘画模式
+			} else if (currentTool === OperationType.ERASER) {
+				// 橡皮擦模式
+			} else if (currentTool === OperationType.SELECTBOX) {
+				// 选择框模式
+			} else if (currentTool === OperationType.RECTANGLE) {
+				// 矩形模式
+				this.rectToolManager.mouseMoveEvent(opt);
+			} else if (currentTool === OperationType.PAN) {
 
-			if (
-				isTouch &&
-				touches &&
-				touches.length === 2 &&
-				this.touchState.isZooming
-			) {
-				// 双指缩放处理 - 修复抖动问题
-				const currentDistance = this.getTouchDistance(touches[0], touches[1]);
+				// 检查是否是触摸事件
+				const isTouch = opt.e.type && opt.e.type.includes("touch");
+				const touches =
+					opt.e.touches || (opt.e.originalEvent && opt.e.originalEvent.touches);
 
-				// 防止除零和异常值
-				if (this.touchState.initialDistance === 0 || currentDistance === 0) {
+				if (
+					isTouch &&
+					touches &&
+					touches.length === 2 &&
+					this.touchState.isZooming
+				) {
+					// 双指缩放处理 - 修复抖动问题
+					const currentDistance = this.getTouchDistance(touches[0], touches[1]);
+
+					// 防止除零和异常值
+					if (this.touchState.initialDistance === 0 || currentDistance === 0) {
+						return;
+					}
+
+					const scale = currentDistance / this.touchState.initialDistance;
+
+					// 防止抖动：忽略微小的变化
+					if (Math.abs(scale - 1) < 0.01) {
+						return;
+					}
+
+					const newZoom = this.touchState.initialZoom * scale;
+
+					// 限制缩放范围
+					const clampedZoom = Math.max(0.1, Math.min(5, newZoom));
+
+					// 使用缩放中心点进行缩放
+					const point = new fabric.Point(
+						this.touchState.zoomCenter.x,
+						this.touchState.zoomCenter.y
+					);
+
+					this.canvas.zoomToPoint(point, clampedZoom);
+					opt.e.preventDefault();
 					return;
 				}
 
-				const scale = currentDistance / this.touchState.initialDistance;
+				if (!this.canvas.isDragging) return;
 
-				// 防止抖动：忽略微小的变化
-				if (Math.abs(scale - 1) < 0.01) {
+				let currentX, currentY;
+
+				if (isTouch && touches && touches.length === 1) {
+					// 单指触摸移动
+					currentX = touches[0].clientX;
+					currentY = touches[0].clientY;
+				} else if (!isTouch) {
+					// 鼠标移动
+					currentX = opt.e.clientX;
+					currentY = opt.e.clientY;
+				} else {
+					return; // 忽略其他情况
+				}
+
+				// 优化：减少频繁的DOM操作
+				const deltaX = currentX - this.canvas.lastPosX;
+				const deltaY = currentY - this.canvas.lastPosY;
+
+				// 只有移动距离足够大时才更新
+				if (Math.abs(deltaX) < 1 && Math.abs(deltaY) < 1) {
 					return;
 				}
 
-				const newZoom = this.touchState.initialZoom * scale;
+				const vpt = this.canvas.viewportTransform;
+				vpt[4] += deltaX;
+				vpt[5] += deltaY;
 
-				// 限制缩放范围
-				const clampedZoom = Math.max(0.1, Math.min(5, newZoom));
+				// 优化：减少历史记录频率
+				const now = Date.now();
+				if (now - this.touchState.lastTouchTime > 16) {
+					// 约60fps
+					this.lastMousePositions.push({
+						x: currentX,
+						y: currentY,
+						time: now,
+					});
 
-				// 使用缩放中心点进行缩放
-				const point = new fabric.Point(
-					this.touchState.zoomCenter.x,
-					this.touchState.zoomCenter.y
-				);
+					if (this.lastMousePositions.length > this.positionHistoryLimit) {
+						this.lastMousePositions.shift();
+					}
 
-				this.canvas.zoomToPoint(point, clampedZoom);
+					this.touchState.lastTouchTime = now;
+				}
+				this.canvas.setViewportTransform(vpt);
+				this.canvas.requestRenderAll(); // 使用requestRenderAll代替renderAll
+				this.canvas.lastPosX = currentX;
+				this.canvas.lastPosY = currentY;
 				opt.e.preventDefault();
-				return;
 			}
-
-			if (!this.canvas.isDragging) return;
-
-			let currentX, currentY;
-
-			if (isTouch && touches && touches.length === 1) {
-				// 单指触摸移动
-				currentX = touches[0].clientX;
-				currentY = touches[0].clientY;
-			} else if (!isTouch) {
-				// 鼠标移动
-				currentX = opt.e.clientX;
-				currentY = opt.e.clientY;
-			} else {
-				return; // 忽略其他情况
-			}
-
-			// 优化：减少频繁的DOM操作
-			const deltaX = currentX - this.canvas.lastPosX;
-			const deltaY = currentY - this.canvas.lastPosY;
-
-			// 只有移动距离足够大时才更新
-			if (Math.abs(deltaX) < 1 && Math.abs(deltaY) < 1) {
-				return;
-			}
-
-			const vpt = this.canvas.viewportTransform;
-			vpt[4] += deltaX;
-			vpt[5] += deltaY;
-
-			// 优化：减少历史记录频率
-			const now = Date.now();
-			if (now - this.touchState.lastTouchTime > 16) {
-				// 约60fps
-				this.lastMousePositions.push({
-					x: currentX,
-					y: currentY,
-					time: now,
-				});
-
-				if (this.lastMousePositions.length > this.positionHistoryLimit) {
-					this.lastMousePositions.shift();
-				}
-
-				this.touchState.lastTouchTime = now;
-			}
-			this.canvas.setViewportTransform(vpt);
-			this.canvas.requestRenderAll(); // 使用requestRenderAll代替renderAll
-			this.canvas.lastPosX = currentX;
-			this.canvas.lastPosY = currentY;
-			opt.e.preventDefault();
 		});
 
 		// 触摸结束事件
 		this.canvas.on("mouse:up", (opt) => {
-			// 只在PAN模式下处理
-			if (this.toolManager.currentTool.value !== OperationType.PAN) {
-				return;
+			const currentTool = this.toolManager.currentTool.value;
+			if (currentTool === OperationType.DRAW) {
+				// 绘画模式
+			} else if (currentTool === OperationType.ERASER) {
+				// 橡皮擦模式
+			} else if (currentTool === OperationType.SELECTBOX) {
+				// 选择框模式
+			} else if (currentTool === OperationType.RECTANGLE) {
+				// 矩形模式
+				this.rectToolManager.mouseUpEvent(opt);
+			} else if (currentTool === OperationType.PAN) {
+
+				// 重置触摸状态
+				this.touchState.isZooming = false;
+				this.touchState.initialDistance = 0;
+
+				this.handleDragEnd(opt, true);
 			}
-
-			// 重置触摸状态
-			this.touchState.isZooming = false;
-			this.touchState.initialDistance = 0;
-
-			this.handleDragEnd(opt, true);
 		});
 
 		// 添加原生触摸事件监听器作为备用方案
@@ -602,24 +652,28 @@ export class CanvasEventManager {
 	 * 处理拖动结束（鼠标抬起或触摸结束）
 	 */
 	handleDragEnd(opt, isTouch = false) {
-		if (this.canvas.isDragging) {
-			// 使用动画管理器处理惯性效果
+		const currentTool = this.toolManager.currentTool.value;
+		if (currentTool === OperationType.DRAW) {
+			// 绘画模式
+		} else if (currentTool === OperationType.ERASER) {
+			// 橡皮擦模式
+		} else if (currentTool === OperationType.SELECTBOX) {
+			// 选择框模式
+		} else if (currentTool === OperationType.RECTANGLE) {
+			// 矩形模式
+			this.rectToolManager.mouseUpEvent(opt);
+		} else if (this.canvas.isDragging) {
 			// if (this.lastMousePositions.length > 1 && opt && opt.e) {
 			// 	this.animationManager.applyInertiaEffect(
 			// 		this.lastMousePositions,
 			// 		isTouch
 			// 	);
 			// }
+			this.canvas.isDragging = false;
+			const vpt = this.canvas.viewportTransform;
+			this.canvas.setViewportTransform(vpt);
+			this.canvas.renderAll();
 		}
-
-		this.canvas.isDragging = false;
-
-		if (this.toolManager) {
-			// this.toolManager.restoreSelectionState(); // 恢复选择状态
-		}
-		const vpt = this.canvas.viewportTransform;
-		this.canvas.setViewportTransform(vpt);
-		this.canvas.renderAll();
 	}
 
 	setupSelectionEvents() {
@@ -827,30 +881,6 @@ export class CanvasEventManager {
 		}
 	}
 
-	dispose() {
-		// 移除所有事件监听
-		this.canvas.off();
-
-		// 清理 Mac 专用的原生事件监听器
-		if (this.deviceInfo.isMac && this.canvas.upperCanvasEl) {
-			const upperCanvas = this.canvas.upperCanvasEl;
-
-			// 移除手势事件监听器
-			upperCanvas.removeEventListener("gesturestart", null);
-			upperCanvas.removeEventListener("gesturechange", null);
-			upperCanvas.removeEventListener("gestureend", null);
-			upperCanvas.removeEventListener("wheel", null);
-		}
-
-		// 清除计时器
-		if (this.longPressTimer) {
-			clearTimeout(this.longPressTimer);
-			this.longPressTimer = null;
-		}
-
-		// 停止所有动画
-		this.stopInertiaAnimation();
-	}
 
 	/**
 	 * 精确检测设备类型，区分 PC、Mac、平板和移动设备
@@ -1032,4 +1062,30 @@ export class CanvasEventManager {
 			{ passive: true }
 		);
 	}
+
+	dispose() {
+		this.rectToolManager?.dispose()
+		// 移除所有事件监听
+		this.canvas.off();
+
+		// 清理 Mac 专用的原生事件监听器
+		if (this.deviceInfo.isMac && this.canvas.upperCanvasEl) {
+			const upperCanvas = this.canvas.upperCanvasEl;
+
+			// 移除手势事件监听器
+			upperCanvas.removeEventListener("gesturestart", null);
+			upperCanvas.removeEventListener("gesturechange", null);
+			upperCanvas.removeEventListener("gestureend", null);
+			upperCanvas.removeEventListener("wheel", null);
+		}
+
+		// 清除计时器
+		if (this.longPressTimer) {
+			clearTimeout(this.longPressTimer);
+			this.longPressTimer = null;
+		}
+
+		// 停止所有动画
+		this.stopInertiaAnimation();
+	}
 }
diff --git a/src/components/Canvas/DepthCanvas/tools/exportMethod.js b/src/components/Canvas/DepthCanvas/tools/exportMethod.js
index 2c92451..836b922 100644
--- a/src/components/Canvas/DepthCanvas/tools/exportMethod.js
+++ b/src/components/Canvas/DepthCanvas/tools/exportMethod.js
@@ -1,5 +1,21 @@
 import { createStaticCanvas } from './canvasFactory'
 import { getObjectsBoundingBox, cloneObjects } from './canvasMethod'
+/**  导出画布为图片 */
+export async function exportCanvasToImage(canvas) {
+	const clonedObjects = await cloneObjects(canvas.getObjects())
+	const staticCanvas = createStaticCanvas(document.createElement('canvas'))
+	const width = canvas.clipPath.width
+	const height = canvas.clipPath.height
+	staticCanvas.setWidth(width)
+	staticCanvas.setHeight(height)
+	clonedObjects.forEach(obj => staticCanvas.add(obj))
+	// 导出图片
+	const dataURL = staticCanvas.toDataURL({
+		type: 'image/png',
+		quality: 1,
+	})
+	return dataURL
+}
 /**  导出指定对象 */
 export async function exportObjectsToImage(objects = [], isDetails = false) {
 	const clonedObjects = await cloneObjects(objects)

From c2e26f03283537962185954368624f70df2b0c80 Mon Sep 17 00:00:00 2001
From: lzp <zpli@aidlab.hk>
Date: Thu, 12 Mar 2026 16:22:40 +0800
Subject: [PATCH 6/6] 1

---
 .../Canvas/DepthCanvas/manager/CanvasManager.ts           | 6 +++---
 .../Canvas/DepthCanvas/manager/RectToolManager.ts         | 8 ++++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
index a059f55..b34edcc 100644
--- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
@@ -33,21 +33,21 @@ export class CanvasManager {
 	setCanvasViewSize(options) {
 		this.canvasViewWidth = options.canvasViewWidth || 1920
 		this.canvasViewHeight = options.canvasViewHeight || 1080
+		this.canvas.setWidth(this.canvasViewWidth)
+		this.canvas.setHeight(this.canvasViewHeight)
 	}
 	initCanvas(options: CanvasInitOptions) {
 		this.layerManager = this.stateManager.layerManager
-		this.setCanvasViewSize(options)
 		this.canvasWidth = options.canvasWidth || 750
 		this.canvasHeight = options.canvasHeight || 600
 		this.canvas = createCanvas(options.canvasRef.value, {
-			width: this.canvasViewWidth,
-			height: this.canvasViewHeight,
 			preserveObjectStacking: true,
 			enableRetinaScaling: true,
 			stopContextMenu: true,
 			fireRightClick: true,
 			backgroundColor: '#fff',
 		})
+		this.setCanvasViewSize(options)
 		this.canvas.clipPath = new fabric.Rect({
 			left: 0,
 			top: 0,
diff --git a/src/components/Canvas/DepthCanvas/manager/RectToolManager.ts b/src/components/Canvas/DepthCanvas/manager/RectToolManager.ts
index 6e744c9..d7baeed 100644
--- a/src/components/Canvas/DepthCanvas/manager/RectToolManager.ts
+++ b/src/components/Canvas/DepthCanvas/manager/RectToolManager.ts
@@ -47,6 +47,14 @@ export class RectToolManager {
 		if(height === 0) height = 50
 		this.demoObject.set({ width, height })
 		const object = this.demoObject.toJSON("evented")
+		if(object.width < 0) {
+			object.left += object.width
+			object.width = -object.width
+		}
+		if(object.height < 0) {
+			object.top += object.height
+			object.height = -object.height
+		}
 		this.layerManager.createRectLayer(object, true)
 		this.canvasManager.canvas.remove(this.demoObject)
 		this.canvasManager.canvas.renderAll()