diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js index 30be134d..6aa63a6d 100644 --- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js +++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js @@ -1217,9 +1217,9 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer') obj.object.gapX = fill_.gapX; obj.object.gapY = fill_.gapY; } - if(obj.level2Type === "Pattern"){ + if(sourceData.type === "print"){ prints.push(obj); - }else if(obj.level2Type === "Embroidery"){ + }else if(sourceData.type === "trims"){ trims.push(obj); } }) @@ -1510,6 +1510,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer') const singleLayers = [];// 平铺图层 otherData_.printObject?.prints?.forEach((print, index) => {// 印花 print.name = t("Canvas.Print") + (index + 1); + print.type = "print"; if(print.ifSingle){ printTrimsLayers.unshift({...print}); }else{ @@ -1518,6 +1519,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer') }) otherData_.trims?.prints?.forEach((trims, index) => {// 元素 trims.name = t("Canvas.Elements") + (index + 1); + trims.type = "trims"; printTrimsLayers.unshift({...trims}); }) if(isUpdate ? updateSpecialGroup : true){ @@ -1648,7 +1650,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer') let flipX = false; let flipY = false; let blendMode = BlendMode.MULTIPLY; - if(item.level2Type === "Embroidery") blendMode = BlendMode.NORMAL;// 元素正常 + if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常 if(item.object){ opacity = item.object.opacity flipX = item.object.flipX diff --git a/src/component/Canvas/CanvasEditor/managers/PartManager.js b/src/component/Canvas/CanvasEditor/managers/PartManager.js index 35d1af71..b9a1c304 100644 --- a/src/component/Canvas/CanvasEditor/managers/PartManager.js +++ b/src/component/Canvas/CanvasEditor/managers/PartManager.js @@ -79,8 +79,9 @@ export class PartManager { this.cleanupEvents(); this.clearPartObject(); this.clearPointData(); - }else{ - // this.clearPointData(); + } else { + this.clearPointData(); + this.resetPartObject(); } console.log("切换工具", toolId); } @@ -222,11 +223,7 @@ export class PartManager { const isLeft = button === 1;// 左键1(添加) 右键3(删除) const fixedObject = this.canvasManager.getFixedLayerObject(); if (!fixedObject) return console.warn("未找到固定图层"); - const { x, y } = options.absolutePointer; - const width = fixedObject.width * fixedObject.scaleX; - const height = fixedObject.height * fixedObject.scaleY; - const X = (x - (fixedObject.left - width / 2)) / fixedObject.scaleX; - const Y = (y - (fixedObject.top - height / 2)) / fixedObject.scaleY; + const { x, y } = this.handleMousePosition(options, fixedObject); const label = isLeft ? 1 : 0; const points = []; const labels = []; @@ -234,19 +231,16 @@ export class PartManager { points.push([item.x, item.y]); labels.push(item.label); }); - points.push([X, Y]); + points.push([x, y]); labels.push(label); const url = await this.getSegAnythingImage({ - image_path: this.props.clothingMinIOPath, type: "point", points, labels, - // type: "box", - // box: [0,0,0,0], }); this.pointList.push({ - x: X, - y: Y, + x: x, + y: y, label: label, }) const image1 = await this.loadImageToObject(url); @@ -283,15 +277,39 @@ export class PartManager { /** 框选工具模式下点击事件处理 */ _rectangleDownHandler(options) { - console.log(options.absolutePointer); + this.clearPointData(); + const fixedObject = this.canvasManager.getFixedLayerObject(); + if (!fixedObject) return console.warn("未找到固定图层"); + const { x, y } = this.handleMousePosition(options, fixedObject); + this.pointList.push(x, y); } /** 框选工具模式下移动事件处理 */ - _rectangleMoveHandler(options) { - - } + _rectangleMoveHandler(options) { } /** 框选工具模式下抬起事件处理 */ - _rectangleUpHandler(options) { - console.log(options.absolutePointer); + async _rectangleUpHandler(options) { + const fixedObject = this.canvasManager.getFixedLayerObject(); + if (!fixedObject) return console.warn("未找到固定图层"); + const { x, y } = this.handleMousePosition(options, fixedObject); + this.pointList.push(x, y); + + if (this.pointList.length !== 4) return console.warn("框选工具选择区域必须是矩形"); + const url = await this.getSegAnythingImage({ + type: "box", + box: [...this.pointList], + }); + const image1 = await this.loadImageToObject(url); + this.resetPartObject(); + const group = this.partGroup; + const rgba = { r: 0, g: 255, b: 0, a: 200 } + const canvas = getObjectAlphaToCanvas(image1, null, 0, rgba); + this.partCanvas = canvas; + const image2 = new fabric.Image(canvas); + image2.set({ + originX: fixedObject.originX, + originY: fixedObject.originY, + }); + group.add(image2); + this.canvas.renderAll(); } @@ -318,7 +336,19 @@ export class PartManager { } - + /** 处理鼠标点位 */ + handleMousePosition(options, fixedObject) { + const pos = options.absolutePointer; + const { x, y } = options.absolutePointer; + const width = fixedObject.width * fixedObject.scaleX; + const height = fixedObject.height * fixedObject.scaleY; + const X = (x - (fixedObject.left - width / 2)) / fixedObject.scaleX; + const Y = (y - (fixedObject.top - height / 2)) / fixedObject.scaleY; + return { + x: Math.round(X), + y: Math.round(Y), + } + } /** 获取分隔后图片 */ async getSegAnythingImage(obj) { @@ -329,6 +359,7 @@ export class PartManager { // const user_id = store.state.UserHabit.userDetail.userId; const user_id = 24299; const data = { + image_path: this.props.clothingMinIOPath, user_id, ...obj, }