11

src/components/Canvas/DepthCanvas/components/depth-header-tools.vue

@@ -31,7 +31,7 @@
 <script setup lang="ts">
 	import { ref, inject, computed } from 'vue'
 	import { exportCanvasToImage } from '../tools/exportMethod'
-	import { OperationType } from '../tools/layerHelper'
+	import { OperationType, BlendMode } from '../tools/layerHelper'
 	const props = defineProps({
 		zoom: { default: 1, type: Number },
 		step: { default: 0.1, type: Number }
@@ -87,7 +87,9 @@
 	}
 	const onImageClick = async () => {
 		const layer = await importLocalImage(false)
-		objectManager.setFillRepeat(layer?.info?.id)
+		const id = layer?.info?.id
+		objectManager.setBlendMode(id, BlendMode.MULTIPLY)
+		objectManager.setFillRepeat(id)
 	}
 	const onWorkbench = async () => {
 		exportCanvasToImage(canvasManager.canvas).then((url) => {

src/components/Canvas/DepthCanvas/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<fullscreen-dialog v-model="dialogVisible" @close="onClose" hide-destroy>
 		<div class="canvas-box">
-			<depth-canvas :config="config" @workbench="onWorkbench" @close="onClose" />
+			<depth-canvas :config="config" @workbench="onWorkbench" />
 		</div>
 	</fullscreen-dialog>
 </template>

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,