FiDA_Front/src/components/Canvas/DepthCanvas/depth-canvas.vue

<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>