画布增加图层翻转

src/component/Canvas/CanvasEditor/components/SelectMenuPanel.vue

@@ -56,11 +56,11 @@
 									disabled
 								/>
 							</div>
-							<div class="btn" @click="clickflipHorizontal">
+							<div class="btn" @click="clickflipHorizontal(v)">
 								<i class="iconfont icon-flip-horizontal"></i>
 								<p class="tip">水平翻转</p>
 							</div>
-							<div class="btn" @click="clickflipVertical">
+							<div class="btn" @click="clickflipVertical(v)">
 								<i class="iconfont icon-flip-vertical"></i>
 								<p class="tip">垂直翻转</p>
 							</div>
@@ -73,10 +73,12 @@
 </template>
 
 <script setup>
+	import showViewVideo from "@/tool/mount";
 	import { ref, onMounted, watch, onUnmounted } from "vue";
 	import { useI18n } from "vue-i18n";
 	import { ToolCommand } from "../commands/ToolCommands";
 	import { OperationType } from "../utils/layerHelper";
+	import { TransformCommand } from "../commands/StateCommands";
 	const props = defineProps({
 		canvas: {
 			type: Object,
@@ -140,7 +142,7 @@
 	 * 显示面板
 	 */
 	function show() {
-		if(activeObjects.value.length === 0) return;
+		if (activeObjects.value.length === 0) return;
 		visible.value = true;
 		closePanel.value = true;
 	}
@@ -155,20 +157,95 @@
 	const activeObjects = ref([]);
 	const getActiveObject = (e) => {
 		console.log("==========切换激活对象", e);
-		activeObjects.value = e.selected.map((v) => v.toObject());
+		activeObjects.value = e.selected.map((v) => v);
 		if (activeObjects.value.length === 0) {
 			close();
 		} else {
 			show(false);
 		}
 	};
-	const clickflipHorizontal = () => {
-		console.log("水平翻转");
-	};
-	const clickflipVertical = () => {
-		console.log("垂直翻转");
+	const lastSelectLayerId = inject("lastSelectLayerId");
+	const layers = inject("layers");
+	const changeAngle = (activeObj) => {
+		// console.log("=====================", e.target.value);
+		// const finalState = TransformCommand.captureTransformState(activeObj);
+		// const { xPrime, yPrime } = compute(
+		// 	activeObj.left,
+		// 	activeObj.top,
+		// 	activeObj.width,
+		// 	activeObj.height,
+		// 	activeObj.angle
+		// );
+		// finalState.left = xPrime;
+		// finalState.top = yPrime;
+		// const transformCmd = new TransformCommand({
+		// 	canvas: props.canvas,
+		// 	objectId: activeObj.id,
+		// 	initialState: null,
+		// 	finalState,
+		// 	objectType: activeObj.type,
+		// 	name: `变换 ${activeObj.type || "对象"}`,
+		// 	layerManager: props.layerManager,
+		// 	layers: layers,
+		// 	lastSelectLayerId: lastSelectLayerId,
+		// });
+		// props.layerManager.commandManager.execute(transformCmd, {
+		// 	name: "对象修改",
+		// });
 	};
 
+	const flipObject = (activeObj, type) => {
+		const initialState = TransformCommand.captureTransformState(activeObj);
+		const finalState = { ...initialState };
+		if (type === "h") {
+			finalState.flipX = !finalState.flipX;
+		} else if (type === "v") {
+			finalState.flipY = !finalState.flipY;
+		}
+		const transformCmd = new TransformCommand({
+			canvas: props.canvas,
+			objectId: activeObj.id,
+			initialState: initialState,
+			finalState,
+			objectType: activeObj.type,
+			name: `变换 ${activeObj.type || "对象"}`,
+			layerManager: props.layerManager,
+			layers: layers,
+			lastSelectLayerId: lastSelectLayerId,
+		});
+		props.layerManager.commandManager.execute(transformCmd, {
+			name: "对象修改",
+		});
+	};
+	const clickflipHorizontal = (obj) => {
+		console.log("水平翻转");
+		flipObject(obj, "h");
+	};
+	const clickflipVertical = (obj) => {
+		console.log("垂直翻转");
+		flipObject(obj, "v");
+	};
+
+	const updateActiveObjects = (arrs, keys) => {
+		arrs.forEach((v) => {
+			activeObjects.value.forEach((item) => {
+				if (item.id === v.id) {
+					keys.forEach((key) => (item[key] = v[key]));
+				}
+			});
+			activeObjects.value = [...activeObjects.value];
+		});
+	};
+
+	const objectRotatingChange = (e) => {
+		const arrs = [];
+		if (e.target._objects) {
+			e.target._objects.forEach((v) => arrs.push(v));
+		} else {
+			arrs.push(e.target);
+		}
+		updateActiveObjects(arrs, ["angle"]);
+	};
 
 	/**
 	 * 设置画布事件监听
@@ -179,7 +256,7 @@
 		props.canvas.on("selection:created", getActiveObject);
 		props.canvas.on("selection:updated", getActiveObject);
 		// props.canvas.on("selection:cleared", () => console.log("selection:cleared"));
-		props.canvas.on("selection:cleared", close);
+		props.canvas.on("object:rotating", objectRotatingChange);
 	}
 
 	/**
@@ -192,6 +269,7 @@
 		props.canvas.off("selection:created", getActiveObject);
 		props.canvas.off("selection:updated", getActiveObject);
 		// props.canvas.off("selection:cleared");
+		props.canvas.off("object:rotating", objectRotatingChange);
 	}
 </script>