aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

部件选取框选工具合并操作

Browse Source
This commit is contained in:
李志鹏
2026-02-05 10:26:40 +08:00
parent a905971dae
commit 72c4898101
3 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/component/Canvas/CanvasEditor/managers/PartManager.js
View File

@@ -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);
}
/** 获取分隔后图片 */

21
src/component/Canvas/CanvasEditor/utils/objectHelper.js
View File

@@ -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;

1
src/component/Canvas/canvasExample.vue
View File

@@ -333,6 +333,7 @@
]);
const canvasLoadJsonSuccess = () => {
console.log("画布加载JSON成功");
return;
canvasEditor.value?.updateOtherLayers({
color: { rgba: { r: 255, g: 0, b: 0, a: 1 } },
printObject: {