aida_front/src/component/Canvas/OverallCanvas/index.vue

<template>
	<div class="overall-canvas" ref="el"><canvas ref="canvasRef"></canvas></div>
</template>

<script setup>
	import { fabric } from "fabric-with-all";
	import { ref, watch, onMounted } from "vue";
	const KEYS = {
		FILL_X: "location[0]",
		FILL_Y: "location[1]",
		FILL_ANGLE: "angle",
		FILL_SCALEX: "scale[0]",
		FILL_SCALEY: "scale[1]",
		FILL_GAPX: "object.gapX",
		FILL_GAPY: "object.gapY",
		O_TOP: "object.top",
		O_LEFT: "object.left",
		O_SCALE_X: "object.scaleX",
		O_SCALE_Y: "object.scaleY",
		O_OPACITY: "object.opacity",
		O_ANGLE: "object.angle",
		O_FLIPX: "object.flipX",
		O_FLIPY: "object.flipY",
		O_BLENDMODE: "object.blendMode",
	};
	const ACTIONS = {
		ADD: "add",
		SELECT: "select",
		UPDATE: "update",
		DELETE: "delete",
		SORT: "sort",
	};
	const emit = defineEmits(["change-canvas", "init-canvas"]);
	const props = defineProps({
		list: { type: Array, default: () => [] },
		width: { type: Number, required: true },
		height: { type: Number, required: true },
	});
	const el = ref(null);
	const canvasRef = ref(null);
	const observer = ref(null);
	var canvas = null;
	onMounted(async () => {
		initCanvas();
		await setCanvasData();
		let throttleTimeout = null;
		let lastRunTime = 0;
		let trailingTimeout = null;
		observer.value = new ResizeObserver((entries) => {
			const now = Date.now();
			const throttleDelay = 100;
			if (!throttleTimeout) {
				updateCanvasSize();
				lastRunTime = now;
				throttleTimeout = setTimeout(() => {
					throttleTimeout = null;
				}, throttleDelay);
			} else {
				clearTimeout(trailingTimeout);
				trailingTimeout = setTimeout(() => {
					updateCanvasSize();
					lastRunTime = Date.now();
				}, throttleDelay);
			}
		});
		observer.value.observe(el.value);
		emit("init-canvas", props.list);
	});
	onBeforeUnmount(() => {
		observer.value.disconnect();
		unbindEvent();
	});
	const initCanvas = () => {
		canvas = new fabric.Canvas(canvasRef.value, {
			selection: false,
			preserveObjectStacking: true,
		});
		canvas.setWidth(el.value.offsetWidth);
		canvas.setHeight(el.value.offsetHeight);
		bindEvent();
	};
	const updateCanvasSize = async () => {
		canvas.setWidth(el.value.offsetWidth);
		canvas.setHeight(el.value.offsetHeight);
		await setCanvasData();
	};
	// 绑定事件
	const bindEvent = () => {
		canvas.on("object:modified", onObjectModified);
		canvas.on("selection:created", onObjectSelected);
		canvas.on("selection:updated", onObjectSelected);
	};
	// 解绑事件
	const unbindEvent = () => {
		canvas.off("object:modified", onObjectModified);
		canvas.off("selection:created", onObjectSelected);
		canvas.off("selection:updated", onObjectSelected);
	};
	// 处理对象修改事件
	const onObjectModified = (e) => {
		console.log(e);
		const object = e.target;
		const action = e.action;
		const list = [];
		const token = object.token;
		if (action === "drag" || action === "rotate") {
			list.push({
				token,
				action: ACTIONS.UPDATE,
				key: KEYS.O_TOP,
				value: (props.height / canvas.height) * object.top,
			});
			list.push({
				token,
				action: ACTIONS.UPDATE,
				key: KEYS.O_LEFT,
				value: (props.width / canvas.width) * object.left,
			});
			if (action === "rotate") {
				list.push({
					token,
					action: ACTIONS.UPDATE,
					key: KEYS.O_ANGLE,
					value: object.angle,
				});
			}
		} else if (action === "scale") {
			list.push({
				token,
				action: ACTIONS.UPDATE,
				key: KEYS.O_SCALE_X,
				value: object.scaleX,
			});
			list.push({
				token,
				action: ACTIONS.UPDATE,
				key: KEYS.O_SCALE_Y,
				value: object.scaleY,
			});
		}
		emit("change-canvas", list);
	};
	// 对象选中
	const onObjectSelected = (e) => {
		const token = e.selected[0].token;
		const list = [{ token, action: ACTIONS.SELECT }];
		emit("change-canvas", list);
	};
	// 删除对象
	const onDeleteItem = (object) => {
		const list = [{ token: object.token, action: ACTIONS.DELETE }];
		emit("change-canvas", list);
		canvas.remove(object);
		canvas.renderAll();
	};
	const urlToCanvas = (url) => {
		return new Promise((resolve, reject) => {
			fabric.Image.fromURL(
				url,
				(object) => {
					const imgElement = object.getElement();
					// 创建透明 Canvas
					const tcanvas = document.createElement("canvas");
					tcanvas.width = imgElement.width;
					tcanvas.height = imgElement.height;
					const ctx = tcanvas.getContext("2d");
					ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
					ctx.drawImage(imgElement, 0, 0);
					resolve(tcanvas);
				},
				{ crossOrigin: "anonymous" }
			);
		});
	};
	const setCanvasData = async () => {
		canvas.clear();
		for (let i = 0; i < props.list.length; i++) {
			let item = props.list[i];
			await addObject(item);
		}
		canvas.renderAll();
	};
	const addObject = async (item) => {
		const cwidth = canvas.width;
		const cheight = canvas.height;
		let pattern = await setFill(item);
		let rect = new fabric.Rect({
			token: item.token,
			width: cwidth,
			height: cheight,
			fill: pattern,
			...item.object,
			top: item.object.top / (props.height / canvas.height),
			left: item.object.left / (props.width / canvas.width),
			onDelete: (v) => onDeleteItem(v),
		});
		console.log("==========", props)
		canvas.add(rect);
	};
	const setFill = async (item) => {
		if (!item) return null;
		const cwidth = canvas.width;
		const cheight = canvas.height;
		let image = await urlToCanvas(item.path);
		let offsetX = item.location[0];
		let offsetY = item.location[1];
		let scaleX = ((cwidth / image.width) * item.scale[0]) / 5;
		let scaleY = ((cheight / image.height) * item.scale[1]) / 5;
		let scale = cwidth > cheight ? scaleX : scaleY;
		let angle = item.angle;
		let gapX = item.object.gapX;
		let gapY = item.object.gapY;
		let patternTransform = fabric.util.composeMatrix({
			scaleX: scale,
			scaleY: scale,
			angle: angle,
		});
		// 创建透明 Canvas
		let tcanvas = document.createElement("canvas");
		tcanvas.width = image.width + gapX;
		tcanvas.height = image.height + gapY;
		let ctx = tcanvas.getContext("2d");
		ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
		ctx.drawImage(image, 0, 0);
		let pattern = new fabric.Pattern({
			source: tcanvas,
			repeat: "repeat",
			patternTransform,
			offsetX, // 水平偏移
			offsetY, // 垂直偏移
		});
		return pattern;
	};
	const updataList = async (list) => {
		console.log(list);
		const objects = canvas.getObjects();
		for (let i = 0; i < list.length; i++) {
			let item = list[i];
			let object = objects.find((o) => o.token === item.token);
			if (item.action === ACTIONS.UPDATE) {
				if (!object) continue;
				let value = item.value;
				switch (item.key) {
					case KEYS.O_TOP:
						object.set("top", value / (props.height / canvas.height));
						break;
					case KEYS.O_LEFT:
						object.set("left", value / (props.width / canvas.width));
						break;
					case KEYS.O_OPACITY:
						object.set("opacity", value);
						break;
					case KEYS.O_SCALE_X:
						object.set("scaleX", value);
						break;
					case KEYS.O_SCALE_Y:
						object.set("scaleY", value);
						break;
					case KEYS.O_ANGLE:
						object.set("angle", value);
						break;
					case KEYS.O_FLIPX:
						object.set("flipX", value);
						break;
					case KEYS.O_FLIPY:
						object.set("flipY", value);
						break;
					case KEYS.O_BLENDMODE:
						object.set("blendMode", value);
						break;
					case KEYS.FILL_X:
					case KEYS.FILL_Y:
					case KEYS.FILL_ANGLE:
					case KEYS.FILL_SCALEX:
					case KEYS.FILL_SCALEY:
					case KEYS.FILL_GAPX:
					case KEYS.FILL_GAPY:
						let pattern = await setFill(
							props.list.find((v) => v.token === item.token)
						);
						object.set("fill", pattern);
						break;
				}
			} else if (item.action === ACTIONS.SELECT) {
				if (object) canvas.setActiveObject(object);
			} else if (item.action === ACTIONS.SORT) {
				let tokens = item.tokens;
				canvas.clear();
				for (let j = 0; j < tokens.length; j++) {
					let object = objects.find((o) => o.token === tokens[j]);
					if (object) canvas.add(object);
				}
				canvas.renderAll();
			} else if (item.action === ACTIONS.DELETE) {
				if (object) canvas.remove(object);
			} else if (item.action === ACTIONS.ADD) {
				await addObject(item.data);
			}
		}
		canvas.renderAll();
	};
	defineExpose({
		updataList,
	});
</script>

<style lang='less' scoped>
	.overall-canvas {
		width: 100%;
		height: 100%;
	}
</style>