fix

src/component/Canvas/CanvasEditor/index.vue

@@ -475,6 +475,7 @@ onMounted(async () => {
 		await canvasManager?.createOtherLayers(props.otherData);
 		await layerManager?.layerSort?.rearrangeObjects();
 	}
+    emit("canvas-load-json-success");
 
   }
 

src/component/Canvas/CanvasEditor/managers/CanvasManager.js

@@ -31,6 +31,7 @@ import {
   fillToCssStyle,
   calculateRotatedTopLeftDeg,
   calculateCenterPoint,
+  calculateTopLeftPoint,
   createPatternTransform,
   getTransformScaleAngle,
   base64ToCanvas,
@@ -1140,9 +1141,9 @@ export class CanvasManager {
 				scaleY: 0,//对象的缩放比例
 				opacity: v.opacity,
 				angle: v.angle,
-				flipX: v.flipX,//是否水平翻转
-				flipY: v.flipY,//是否垂直翻转
-				blendMode: v.globalCompositeOperation,// 混合模式
+				flipX: v.flipX,
+				flipY: v.flipY,
+				blendMode: v.globalCompositeOperation,
 				gapX: 0,// 平铺模式下的间距
 				gapY: 0,// 平铺模式下的间距
 			}
@@ -1151,18 +1152,24 @@ export class CanvasManager {
 		let top = (v.top - (flTop - flHeight * flScaleY / 2));
 		let width = (v.width * v.scaleX);
 		let height = (v.height * v.scaleY);
-		let {x:cx, y:cy} = calculateCenterPoint(width, height, left, top, v.angle);
-		let oX = (cx-width/2) / flScaleX;
-		let oY = (cy-height/2) / flScaleY;
+		if(v.originX === "center" && v.originY === "center") {
+			let {x:cx, y:cy} = calculateTopLeftPoint(width, height, left, top, v.angle);
+			left = cx;
+			top = cy;
+		}
+		let oX = left / flScaleX;
+		let oY = top / flScaleY;
 		let oScaleX = (v.width * v.scaleX) / (flWidth * flScaleX);
 		let oScaleY = (v.height * v.scaleY) / (flHeight * flScaleY);
-		// obj.object.width = width;
-		// obj.object.height = height;
 		obj.object.top = oY;
 		obj.object.left = oX;
 		obj.object.scaleX = oScaleX;
 		obj.object.scaleY = oScaleY;
 		if(obj.ifSingle){
+			// 单个的是从中心计算的
+		 	let {x:cx, y:cy} = calculateCenterPoint(width, height, left, top, v.angle);
+			let oX = (cx-width/2) / flScaleX;
+		 	let oY = (cy-height/2) / flScaleY;
 			obj.location = [oX, oY];
 			obj.scale = [oScaleX, oScaleY];
 		}else{
@@ -1647,6 +1654,9 @@ export class CanvasManager {
 	  let gapX = 0
 	  let gapY = 0
 	  let fillSource = image
+	  let flipX = false;
+	  let flipY = false;
+	  let blendMode = BlendMode.MULTIPLY;
 	  if(item.object){
 	    top += item.object.top * fixedLayerObj.scaleY
 	    left += item.object.left * fixedLayerObj.scaleX
@@ -1654,6 +1664,9 @@ export class CanvasManager {
 	    scaleY *= item.object.scaleY
 		opacity = item.object.opacity
 		angle = item.object.angle
+		flipX = item.object.flipX
+		flipY = item.object.flipY
+		blendMode = item.object.blendMode || BlendMode.MULTIPLY;
 		gapX = item.object.gapX
 		gapY = item.object.gapY
 		fillSource = imageAddGapToCanvas(image, gapX, gapY);
@@ -1668,7 +1681,11 @@ export class CanvasManager {
       	left: left,
 		scaleX: scaleX,
       	scaleY: scaleY,
-		globalCompositeOperation: BlendMode.MULTIPLY,
+		opacity: opacity,
+		angle: angle,
+		flipX: flipX,
+		flipY: flipY,
+		globalCompositeOperation: blendMode,
       	fill: new fabric.Pattern({
           source: fillSource,
           repeat: "repeat",
@@ -1692,7 +1709,7 @@ export class CanvasManager {
 	    type: LayerType.BITMAP,
 	    visible: true,
 	    locked: true,
-	    opacity: 1,
+	    opacity: opacity,
 		isPrintTrims: true,
 		blendMode: BlendMode.MULTIPLY,
 	    fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],

src/component/Canvas/CanvasEditor/utils/helper.js

@@ -933,6 +933,23 @@ export function calculateCenterPoint(W, H, currentX, currentY, currentAngleDeg)
 	const Cy = currentY + (W / 2) * sinCurrent + (H / 2) * cosCurrent;
 	return { x: Cx, y: Cy };
 }
+/**
+ * 根据中心点坐标计算左上角坐标
+ * @param {number} W - 宽度
+ * @param {number} H - 高度
+ * @param {number} centerX - 中心点x坐标
+ * @param {number} centerY - 中心点y坐标
+ * @param {number} currentAngleDeg - 当前角度(度)
+ * @returns {Object} 左上角坐标 {x, y}
+*/
+export function calculateTopLeftPoint(W, H, centerX, centerY, currentAngleDeg) {
+	const currentAngle = (currentAngleDeg * Math.PI) / 180;
+	const cosCurrent = Math.cos(currentAngle);
+	const sinCurrent = Math.sin(currentAngle);
+	const Cx = centerX + (W / 2) * cosCurrent - (H / 2) * sinCurrent;
+	const Cy = centerY + (W / 2) * sinCurrent + (H / 2) * cosCurrent;
+	return { x: Cx, y: Cy };
+}
 
 
 

src/component/Canvas/OverallCanvas/index.vue

@@ -194,6 +194,7 @@
 			left: item.object.left / (props.width / canvas.width),
 			onDelete: (v) => onDeleteItem(v),
 		});
+		console.log("==========", props)
 		canvas.add(rect);
 	};
 	const setFill = async (item) => {