画布增加图层翻转

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>
 

src/component/Canvas/CanvasEditor/fabric-canvas-events.md

@@ -0,0 +1,31 @@
+### 鼠标事件
+
+- `mouse:down`：鼠标按下时触发
+- `mouse:up`：鼠标释放时触发
+- `mouse:move`：鼠标移动时触发
+- `mouse:over`：鼠标移入画布时触发
+- `mouse:out`：鼠标移出画布时触发
+
+### 对象交互事件
+
+- `object:selected`：对象被选中时触发
+- `object:modified`：对象属性（如位置、大小）修改后触发
+- `object:rotating`：对象旋转过程中触发
+- `object:scaling`：对象缩放过程中触发
+- `object:skewing`：对象倾斜过程中触发
+
+### 画布操作事件
+
+- `before:render`：画布即将重绘前触发
+- `after:render`：画布重绘完成后触发
+- `selection:created`：选中对象集合创建时触发
+- `selection:updated`：选中对象集合更新时触发
+- `selection:cleared`：选中对象集合清除时触发
+
+### 其他事件
+
+- `object:added`：对象添加到画布时触发
+- `object:removed`：对象从画布移除时触发
+- `object:rotated`：对象旋转完成时触发
+- `object:scaled`：对象缩放完成时触发
+- `object:skewed`：对象倾斜完成时触发

src/component/Canvas/CanvasEditor/fabric-canvas-events.text

@@ -1,23 +0,0 @@
-1. 初始化事件
-object:added：当新对象被添加到画布上时触发。
-object:removed：当对象从画布上移除时触发。
-selection:created：当选择对象时触发。
-selection:updated：当选择的对象被更新时触发。
-selection:cleared：当所有对象都被取消选择时触发。
-
-2. 鼠标事件
-mouse:down：鼠标按下时触发。
-mouse:move：鼠标移动时触发。
-mouse:up：鼠标释放时触发。
-mouse:over：鼠标移到画布上时触发。
-mouse:out：鼠标移出画布时触发。
-mouse:wheel：鼠标滚轮滚动时触发。
-
-3. 触摸事件（在触摸屏设备上）
-touch:start：触摸开始时触发。
-touch:move：触摸移动时触发。
-touch:end：触摸结束时触发。
-
-4. 键盘事件
-key:down：键盘按键按下时触发。
-key:up：键盘按键释放时触发。

src/component/Canvas/CanvasEditor/index.vue

@@ -1185,7 +1185,7 @@ defineExpose({
         />
 
         <!-- 选择工具菜单组件 -->
-        <!-- <SelectMenuPanel
+        <SelectMenuPanel
           v-if="canvasManagerLoaded && !enabledRedGreenMode"
           :canvas="canvasManager && canvasManager.canvas"
           :commandManager="commandManager"
@@ -1193,7 +1193,7 @@ defineExpose({
           :layerManager="layerManager"
           :toolManager="toolManager"
           :activeTool="activeTool"
-        /> -->
+        />
 
         <div class="zoom-info">
           {{ t("Canvas.Scale") }}: {{ currentZoom }}%