W
@@ -53,7 +53,7 @@
@@ -158,6 +158,9 @@
const getActiveObject = (e) => {
console.log("==========切换激活对象", e);
activeObjects.value = e.selected.map((v) => v);
+ activeObjects.value.forEach((v) => {
+ v.layer = props.layerManager.getLayerById(v.layerId);
+ });
if (activeObjects.value.length === 0) {
close();
} else {
@@ -166,46 +169,11 @@
};
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 transformObject = (activeObj, initialState, finalState) => {
const transformCmd = new TransformCommand({
canvas: props.canvas,
objectId: activeObj.id,
- initialState: initialState,
+ initialState,
finalState,
objectType: activeObj.type,
name: `变换 ${activeObj.type || "对象"}`,
@@ -217,13 +185,72 @@
name: "对象修改",
});
};
- const clickflipHorizontal = (obj) => {
- console.log("水平翻转");
- flipObject(obj, "h");
+
+ /**
+ * 根据左上角坐标计算旋转后的新坐标
+ * @param {number} W - 宽度
+ * @param {number} H - 高度
+ * @param {number} currentX - 当前左上角x坐标
+ * @param {number} currentY - 当前左上角y坐标
+ * @param {number} currentAngleDeg - 当前角度(度)
+ * @param {number} newAngleDeg - 新角度(度)
+ * @returns {Object} 旋转后的左上角坐标 {x, y}
+ */
+ function calculateRotatedTopLeftDeg(
+ W,
+ H,
+ currentX,
+ currentY,
+ currentAngleDeg,
+ newAngleDeg
+ ) {
+ const currentAngle = (currentAngleDeg * Math.PI) / 180;
+ const newAngle = (newAngleDeg * Math.PI) / 180;
+ // 1. 用当前角度计算中心点位置
+ const cosCurrent = Math.cos(currentAngle);
+ const sinCurrent = Math.sin(currentAngle);
+ const Cx = currentX + (W / 2) * cosCurrent - (H / 2) * sinCurrent;
+ const Cy = currentY + (W / 2) * sinCurrent + (H / 2) * cosCurrent;
+
+ // 2. 用新角度计算旋转后的左上角位置
+ const cosNew = Math.cos(newAngle);
+ const sinNew = Math.sin(newAngle);
+ const newX = Cx + (-W / 2) * cosNew - (-H / 2) * sinNew;
+ const newY = Cy + (-W / 2) * sinNew + (-H / 2) * cosNew;
+
+ return { x: newX, y: newY };
+ }
+ // 改变角度
+ const changeAngle = (e, obj) => {
+ const initialState = TransformCommand.captureTransformState(obj);
+ const finalState = { ...initialState };
+ const angle = e.target.value;
+ const { x, y } = calculateRotatedTopLeftDeg(
+ obj.width,
+ obj.height,
+ obj.left,
+ obj.top,
+ obj.angle,
+ angle
+ );
+ finalState.left = x;
+ finalState.top = y;
+ finalState.angle = angle;
+ transformObject(obj, initialState, finalState);
};
+ // 水平翻转
+ const clickflipHorizontal = (obj) => {
+ const initialState = TransformCommand.captureTransformState(obj);
+ const finalState = { ...initialState };
+ finalState.flipX = !finalState.flipX;
+ transformObject(obj, initialState, finalState);
+ };
+ // 垂直翻转
const clickflipVertical = (obj) => {
- console.log("垂直翻转");
- flipObject(obj, "v");
+ const initialState = TransformCommand.captureTransformState(obj);
+ const finalState = { ...initialState };
+ finalState.flipY = !finalState.flipY;
+ transformObject(obj, initialState, finalState);
};
const updateActiveObjects = (arrs, keys) => {
diff --git a/src/views/HomeView/history.vue b/src/views/HomeView/history.vue
index 4b30f338..38a4b3f5 100644
--- a/src/views/HomeView/history.vue
+++ b/src/views/HomeView/history.vue
@@ -771,7 +771,7 @@ export default defineComponent({
padding: 0 1rem;
.operate_item {
- font-size: 1.4rem;
+ // font-size: 1.4rem;
font-family: Roboto;
font-weight: 400;
color: #007ee5;