11

src/components/Canvas/DepthCanvas/manager/CanvasManager.ts

@@ -60,17 +60,12 @@ export class CanvasManager {
 		this.layerManager = this.stateManager.layerManager
 		this.canvasWidth = options.canvasWidth || 750
 		this.canvasHeight = options.canvasHeight || 600
-		this.canvas = createCanvas(options.canvasRef.value, {
-			preserveObjectStacking: true,
-			enableRetinaScaling: true,
-			backgroundColor: '#fff',
-		})
+		var image = null;
 		if (options.url) {
-			await new Promise((resolve, reject) => {
+			await new Promise((resolve) => {
 				fabric.Image.fromURL(options.url, async (img) => {
 					this.canvasWidth = img.width
 					this.canvasHeight = img.height
-					this.setCanvasViewSize(options)
 					img.set({
 						left: 0,
 						top: 0,
@@ -81,14 +76,22 @@ export class CanvasManager {
 							name: "图片图层",
 						}
 					})
-					this.canvas.add(img)
-					await this.layerManager.updateLayerThumbnailsById(img.info.id)
+					image = img
 					resolve(img)
 				}, { crossOrigin: 'anonymous' })
 			})
-		} else {
-			this.setCanvasViewSize(options)
 		}
+		this.canvas = createCanvas(options.canvasRef.value, {
+			preserveObjectStacking: true,
+			enableRetinaScaling: true,
+			backgroundColor: '#fff',
+		})
+		if (image) {
+			this.canvas.add(image)
+			await this.layerManager.updateLayerThumbnailsById(image.info.id)
+		}
+		this.setCanvasViewSize(options)
+
 		this.canvas.clipPath = new fabric.Rect({
 			left: 0,
 			top: 0,

src/components/Canvas/DepthCanvas/manager/ObjectManager.ts

@@ -78,6 +78,14 @@ export class ObjectManager {
 		this.layerManager = options.layerManager
 	}
 	onMounted() { }
+	/** 设置混合模式 */
+	setBlendMode(id: string, blendMode: string) {
+		const object = this.canvasManager.getObjectById(id)
+		if (!object) return console.warn('设置混合模式失败，对象不存在ID:', id)
+		object.set("globalCompositeOperation", blendMode)
+		this.canvasManager.renderAll()
+	}
+
 	/** 设置平铺状态 */
 	setFillRepeat(id: string) {
 		const object = this.canvasManager.getObjectById(id)
@@ -118,6 +126,7 @@ export class ObjectManager {
 			scaleY: object.scaleY,
 			flipX: object.flipX,
 			flipY: object.flipY,
+			globalCompositeOperation: object.globalCompositeOperation,
 			originX: "left",
 			originY: "top",
 			info,