diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js index b7583264..3ef78c99 100644 --- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js +++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js @@ -9,7 +9,6 @@ import { isGroupLayer, OperationType, OperationTypes, - findLayer, createLayer, LayerType, SpecialLayerId, @@ -20,7 +19,6 @@ import { AnimationManager } from "./animation/AnimationManager"; import { createCanvas } from "../utils/canvasFactory"; import { CanvasEventManager } from "./events/CanvasEventManager"; import CanvasConfig from "../config/canvasConfig"; -import { RedGreenModeManager } from "./RedGreenModeManager"; import { EraserStateManager } from "./EraserStateManager"; import { deepClone, diff --git a/src/component/Canvas/CanvasEditor/managers/PartManager.js b/src/component/Canvas/CanvasEditor/managers/PartManager.js index 8e4208b7..2cf19608 100644 --- a/src/component/Canvas/CanvasEditor/managers/PartManager.js +++ b/src/component/Canvas/CanvasEditor/managers/PartManager.js @@ -90,16 +90,17 @@ export class PartManager { if (toolId === OperationType.PART_ERASER) { this.setEraserTool(); - } else if (toolId === OperationType.PART || toolId === OperationType.PART_RECTANGLE) { - this.clearPointData(); - this.resetPartObject(); - } - if (toolId === OperationType.PART_ERASER || toolId === OperationType.PART_BRUSH) { - if (this.pointList.length > 0) { - this.clearPointData(); - this.resetPartObject(); - } - } + } + // else if (toolId === OperationType.PART || toolId === OperationType.PART_RECTANGLE) { + // this.clearPointData(); + // this.resetPartObject(); + // } + // if (toolId === OperationType.PART_ERASER || toolId === OperationType.PART_BRUSH) { + // if (this.pointList.length > 0) { + // this.clearPointData(); + // this.resetPartObject(); + // } + // } // 如果从非选区工具切换到选区工具,初始化事件 if (!wasActive && this.isActive) { @@ -380,7 +381,8 @@ export class PartManager { box: [...this.pointList], }); const image = await this.loadImageToObject(url); - const canvas = getObjectAlphaToCanvas(image, null, 0, this.rgba); + const data = this.partCanvas?.getContext("2d")?.getImageData(0, 0, this.partCanvas.width, this.partCanvas.height); + const canvas = getObjectAlphaToCanvas(image, data, 0, this.rgba, !!data); this.partDrawCommand(canvas); } /** 获取分隔后图片 */ diff --git a/src/component/Canvas/CanvasEditor/utils/objectHelper.js b/src/component/Canvas/CanvasEditor/utils/objectHelper.js index d52d02fc..7caa973d 100644 --- a/src/component/Canvas/CanvasEditor/utils/objectHelper.js +++ b/src/component/Canvas/CanvasEditor/utils/objectHelper.js @@ -65,9 +65,10 @@ export async function restoreFabricObject(serializedObject, canvas) { * @param {ImageData} revData - 相反的ImageData,白通道的相同位置是否为透明,revData为白色为透明,黑色为不透明 * @param {number} diff - 差值,默认 25 * @param {Object} rgba - 自定义 rgba 值,默认 { r: 255, g: 255, b: 255, a: 255 } + * @param {boolean} isMerge - 是否合并,true=合并revData,false=反转revData * @returns {HTMLCanvasElement|null} 包含黑白通道的画布,或 null 如果失败 */ -export function getObjectAlphaToCanvas(object, revData, diff = 30, rgba = { r: 255, g: 255, b: 255, a: 255 }) { +export function getObjectAlphaToCanvas(object, revData, diff = 30, rgba = { r: 255, g: 255, b: 255, a: 255 }, isMerge = false) { const image = object.getElement(); if (image.nodeName !== "IMG" && image.nodeName !== "CANVAS") { console.warn("对象不是图片"); @@ -93,18 +94,20 @@ export function getObjectAlphaToCanvas(object, revData, diff = 30, rgba = { r: 2 const revG = revData?.data[i + 1] || 0; const revB = revData?.data[i + 2] || 0; const revA = revData?.data[i + 3] || 0; + let isHave = false; if (r || g || b || a) { if (revR > diff || revG > diff || revB > diff || revA > diff) { - data.data[i + 0] = 0; - data.data[i + 1] = 0; - data.data[i + 2] = 0; - data.data[i + 3] = 0; + isHave = false; } else { - data.data[i + 0] = rgba.r; - data.data[i + 1] = rgba.g; - data.data[i + 2] = rgba.b; - data.data[i + 3] = rgba.a; + isHave = true; } + } + if (isMerge && (revR || revG || revB || revA)) isHave = true; + if (isHave) { + data.data[i + 0] = rgba.r; + data.data[i + 1] = rgba.g; + data.data[i + 2] = rgba.b; + data.data[i + 3] = rgba.a; } else { data.data[i + 0] = 0; data.data[i + 1] = 0; diff --git a/src/component/Canvas/canvasExample.vue b/src/component/Canvas/canvasExample.vue index 7a961666..513e2778 100644 --- a/src/component/Canvas/canvasExample.vue +++ b/src/component/Canvas/canvasExample.vue @@ -333,6 +333,7 @@ ]); const canvasLoadJsonSuccess = () => { console.log("画布加载JSON成功"); + return; canvasEditor.value?.updateOtherLayers({ color: { rgba: { r: 255, g: 0, b: 0, a: 1 } }, printObject: { diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue index b5450632..3f0e7ca4 100644 --- a/src/component/Detail/DesignDetail.vue +++ b/src/component/Detail/DesignDetail.vue @@ -550,7 +550,7 @@ export default defineComponent({ detailData.loadingShow = false }); } - const previwe = async ()=>{ + const previwe = async ()=>{ detailData.loadingShow = true if((detailData.currentDetailType == 'models' && !detailData.isEditPattern.value) || (detailData.currentDetailType == 'sketch' && !detailData.isEditPattern.value) || detailData.isEditPattern.value == 'editSketch'){ await getSubmitData('preview')