深度画布框架

2026-03-06 15:50:05 +08:00
parent a3938662c9
commit d0d8c0ab9b
47 changed files with 3827 additions and 88 deletions
--- a/src/components/Canvas/DepthCanvas/depth-canvas.vue
+++ b/src/components/Canvas/DepthCanvas/depth-canvas.vue
@@ -0,0 +1,141 @@
+<template>
+	<div class="depth-canvas">
+		<div class="canvas-container" ref="canvasContainerRef">
+			<canvas ref="canvasRef"></canvas>
+		</div>
+		<layer-panel />
+		<details-panel />
+		<header-tools />
+		<zoom :zoom="1" :step="0.1" is-home />
+	</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 layerPanel from './components/layer-panel/index.vue'
+	import detailsPanel from './components/details-panel/index.vue'
+	import headerTools from './components/header-tools.vue'
+	import zoom from '../components/zoom.vue'
+
+	// 管理器
+	import { StateManager } from './manager/StateManager'
+	import { EventManager } from './manager/EventManager'
+	import { FlowManager } from './manager/FlowManager'
+	import { NodeManager } from './manager/NodeManager'
+	import { ToolManager, TOOLS } from './manager/ToolManager'
+
+	const canvasContainerRef = ref(null)
+	const canvasRef = ref(null)
+
+	const props = defineProps({
+		config: {
+			type: Object,
+			default: () => ({})
+		}
+	})
+
+	// 状态管理器
+	const stateManager = new StateManager({})
+	provide('stateManager', stateManager)
+
+	// 事件管理器
+	const eventManager = new EventManager({ stateManager })
+	stateManager.setManager({ eventManager })
+	provide('eventManager', eventManager)
+
+	// 流程管理器
+	const flowManager = new FlowManager({ stateManager })
+	stateManager.setManager({ flowManager })
+	provide('flowManager', flowManager)
+
+	// 节点管理器
+	const nodeManager = new NodeManager({ stateManager })
+	stateManager.setManager({ nodeManager })
+	provide('nodeManager', nodeManager)
+
+	// 工具管理器
+	const toolManager = new ToolManager({ stateManager })
+	stateManager.setManager({ toolManager })
+	provide('toolManager', toolManager)
+	const initCanvas = () => {
+		console.log('OverallCanvas: initCanvas')
+		const canvasViewWidth = canvasContainerRef.value.clientWidth
+		const canvasViewHeight = canvasContainerRef.value.clientHeight
+		const canvasWidth = 750
+		const canvasHeight = 600
+		const canvas = new fabric.Canvas(canvasRef.value, {
+			selection: true,
+			width: canvasViewWidth,
+			height: canvasViewHeight,
+			imageSmoothingEnabled: true, // 启用图像平滑 - 抗锯齿
+			imageSmoothingQuality: 'high', // 设置高质量图像平滑
+			preserveObjectStacking: true,
+			enableRetinaScaling: true,
+			stopContextMenu: true,
+			fireRightClick: true,
+			backgroundColor: '#fff'
+		})
+		canvas.clipPath = new fabric.Rect({
+			left: 0,
+			top: 0,
+			width: canvasWidth,
+			height: canvasHeight
+		})
+		// 画布居中
+		const canvasX = canvasViewWidth / 2 - canvasWidth / 2
+		const canvasY = canvasViewHeight / 2 - canvasHeight / 2
+		canvas.viewportTransform = [1, 0, 0, 1, canvasX, canvasY]
+		// 创建矩形
+		const rect = new fabric.Rect({
+			left: 20,
+			top: 20,
+			width: 100,
+			height: 100,
+			fill: '#f00'
+		})
+		canvas.add(rect)
+		//创建圆形
+		const circle = new fabric.Circle({
+			left: 200,
+			top: 200,
+			radius: 50,
+			fill: '#0f0'
+		})
+		canvas.add(circle)
+	}
+	onMounted(() => {
+		initCanvas()
+	})
+	onBeforeMount(() => {
+		// eventManager.removeEvents() // 移除事件
+	})
+</script>
+<style lang="less">
+	@import '@vue-flow/core/dist/style.css';
+	@import '@vue-flow/core/dist/theme-default.css';
+</style>
+<style lang="less" scoped>
+	.depth-canvas {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		user-select: none;
+		> .canvas-container {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			> canvas {
+				width: 100%;
+				height: 100%;
+			}
+			&:deep(.canvas-container) {
+				filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
+			}
+		}
+	}
+</style>