diff --git a/src/component/Canvas/CanvasEditor/commands/PartCommands.js b/src/component/Canvas/CanvasEditor/commands/PartCommands.js
index b9831a04..c8e1178c 100644
--- a/src/component/Canvas/CanvasEditor/commands/PartCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/PartCommands.js
@@ -24,3 +24,33 @@ export class PartDrawCommand extends Command {
return true;
}
}
+/**
+ * 部件点选绘制命令
+ */
+export class PartPointDrawCommand extends Command {
+ constructor(options) {
+ super({
+ name: "部件点选绘制命令",
+ saveState: false,
+ });
+
+ this.canvas = options.canvas;
+ this.partManager = options.partManager;
+ this.partCanvas = options.partCanvas;
+ this.pointList = options.pointList;
+ this.oldPartCanvas = this.partManager.partCanvas;
+ this.oldPointList = [...this.partManager.pointList];
+ }
+ async execute() {
+ const list = [...this.pointList];
+ const canvas = this.partCanvas;
+ const res = await this.partManager.pointDrawPartCanvas(list, canvas);
+ return res;
+ }
+ async undo() {
+ const list = [...this.oldPointList];
+ const canvas = this.oldPartCanvas;
+ const res = await this.partManager.pointDrawPartCanvas(list, canvas);
+ return res;
+ }
+}
diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
index 638f5237..a52d393b 100644
--- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
+++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
@@ -22,7 +22,7 @@
v-for="v in activeObjects"
:key="v.id"
>
- {{ v.layer?.name }}
+
@@ -283,10 +286,10 @@
activeObjects.value.forEach((v) => {
v.layer = props.layerManager.getLayerById(v.layerId);
});
- if (activeObjects.value.length === 0) {
- close();
- } else {
+ if (activeObjects.value.length === 1) {
show();
+ } else {
+ close();
}
};
//取消当前选中
diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue
index 1aa301d9..30ab3427 100644
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -1045,11 +1045,7 @@ defineExpose({
width = 0,// 导出的图片宽度
height = 0, // 导出的图片高度
} = {}) => {
- console.log('导出图片',{isContainFixed,
-isContainFixedOther,
-isPrintTrimsNoRepeat,
-isPrintTrimsRepeat,
-isContainNormalLayer})
+ canvasManager?.canvas?.discardActiveObject();
var base64 = await canvasManager.exportImage({
isContainBg,
isContainFixed,
diff --git a/src/component/Canvas/CanvasEditor/managers/PartManager.js b/src/component/Canvas/CanvasEditor/managers/PartManager.js
index 8e24630a..66569b5b 100644
--- a/src/component/Canvas/CanvasEditor/managers/PartManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/PartManager.js
@@ -6,7 +6,7 @@ import addIcon from "@/assets/images/canvas/add.png";
import removeIcon from "@/assets/images/canvas/remove.png";
import { getObjectAlphaToCanvas } from "../utils/objectHelper";
import { Https } from "@/tool/https";
-import { PartDrawCommand } from "../commands/PartCommands";
+import { PartDrawCommand, PartPointDrawCommand } from "../commands/PartCommands";
/**
@@ -108,7 +108,6 @@ export class PartManager {
}
// 如果从选区工具切换到非选区工具，清理事件和选区
else if (wasActive && !this.isActive) {
- this.selectionManager.clearSelection();
this.cleanupEvents();
this.clearPartObject();
this.clearPointData();
@@ -242,12 +241,7 @@ export class PartManager {
}
/** 点选工具模式下点击事件处理 */
- _pointDownkHandler(options) {
- // const button = options.button;
- // const isLeft = button === 1;// 左键1（添加） 右键3（删除）
- // const icon = `url("${isLeft ? addIcon : removeIcon}") 16 16, default`
- // this.canvas.upperCanvasEl.style.cursor = icon;
- }
+ _pointDownkHandler(options) { }
/** 点选工具模式下移动事件处理 */
_pointMoveHandler(options) { }
/** 点选工具模式下抬起事件处理 */
@@ -260,7 +254,8 @@ export class PartManager {
const label = isLeft ? 1 : 0;
const points = [];
const labels = [];
- this.pointList.forEach((item) => {
+ const pointList = [...this.pointList];
+ pointList.forEach((item) => {
points.push([item.x, item.y]);
labels.push(item.label);
});
@@ -271,34 +266,57 @@ export class PartManager {
points,
labels,
});
- this.pointList.push({
+ pointList.push({
x: x,
y: y,
label: label,
})
const image1 = await this.loadImageToObject(url);
- this.resetPartObject();
- const group = this.partGroup;
const canvas = getObjectAlphaToCanvas(image1, null, 0, this.rgba);
+ this.partPointDrawCommand(pointList, canvas);
+ }
+ partPointDrawCommand(list, canvas) {
+ const cmd = new PartPointDrawCommand({
+ canvas: this.canvas,
+ partManager: this,
+ partCanvas: canvas,
+ pointList: [...list],
+ })
+ if (this.commandManager?.execute) {
+ this.commandManager.execute(cmd);
+ } else {
+ cmd.execute();
+ }
+ }
+ async pointDrawPartCanvas(list, canvas) {
+ this.selectionManager.clearSelection();
+ const fixedObject = this.canvasManager.getFixedLayerObject();
+ if (!fixedObject) {
+ console.warn("未找到固定图层")
+ return false;
+ }
+ this.resetPartObject();
+ this.pointList = [...list];
this.partCanvas = canvas;
const image2 = new fabric.Image(canvas);
image2.set({
originX: fixedObject.originX,
originY: fixedObject.originY,
});
- group.add(image2);
- for (let i = 0; i < this.pointList.length; i++) {
- const item = this.pointList[i];
+ this.partGroup.add(image2);
+ for (let i = 0; i < list.length; i++) {
+ const item = list[i];
const icon = await this.loadImageToObject(item.label === 1 ? addIcon : removeIcon);
icon.set({
- left: item.x - group.width / 2,
- top: item.y - group.height / 2,
+ left: item.x - this.partGroup.width / 2,
+ top: item.y - this.partGroup.height / 2,
originX: fixedObject.originX,
originY: fixedObject.originY,
})
- group.add(icon);
+ this.partGroup.add(icon);
}
this.canvas.renderAll();
+ return true;
}
/** 清空点选数据 */
clearPointData() {
@@ -309,7 +327,7 @@ export class PartManager {
/** 框选工具模式下点击事件处理 */
_rectangleDownHandler(options) {
- this.clearPointData();
+ this.pointList = [];
const fixedObject = this.canvasManager.getFixedLayerObject();
if (!fixedObject) return console.warn("未找到固定图层");
const { x, y } = this.handleMousePosition(options, fixedObject);
@@ -357,7 +375,7 @@ export class PartManager {
});
const image = await this.loadImageToObject(url);
const canvas = getObjectAlphaToCanvas(image, null, 0, this.rgba);
- this.drawPartCanvas(canvas);
+ this.partDrawCommand(canvas);
}
/** 获取分隔后图片 */
async getSegAnythingImage(obj) {
@@ -433,17 +451,7 @@ export class PartManager {
tcanvas.add(fabricImage)
tcanvas.renderAll();
const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba);
- const cmd = new PartDrawCommand({
- canvas: this.canvas,
- partManager: this,
- partCanvas: canvas,
- })
- if (this.commandManager?.execute) {
- this.commandManager.execute(cmd);
- } else {
- cmd.execute();
- }
-
+ this.partDrawCommand(canvas);
}
@@ -481,16 +489,7 @@ export class PartManager {
});
tcanvas.renderAll();
const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba);
- const cmd = new PartDrawCommand({
- canvas: this.canvas,
- partManager: this,
- partCanvas: canvas,
- })
- if (this.commandManager?.execute) {
- this.commandManager.execute(cmd);
- } else {
- cmd.execute();
- }
+ this.partDrawCommand(canvas);
}
/** 擦除工具模式下点击事件处理 */
_eraseDownHandler(options) {
@@ -501,9 +500,22 @@ export class PartManager {
/** 擦除工具模式下抬起事件处理 */
_eraseUpHandler(options) {
+ }
+ partDrawCommand(canvas) {
+ const cmd = new PartDrawCommand({
+ canvas: this.canvas,
+ partManager: this,
+ partCanvas: canvas,
+ })
+ if (this.commandManager?.execute) {
+ this.commandManager.execute(cmd);
+ } else {
+ cmd.execute();
+ }
}
/** 绘制部件画布 */
drawPartCanvas(canvas) {
+ this.selectionManager.clearSelection();
this.partCanvas = canvas;
const image = new fabric.Image(canvas);
image.set({
@@ -611,8 +623,8 @@ export class PartManager {
scaleY: scaleY,
...this.selectionStyle,
});
- this.selectionManager.setSelectionObject(path);
this.clearPart();
+ this.selectionManager.setSelectionObject(path);
const cmd = new LassoCutoutCommand({
canvas: this.canvas,
layerManager: this.layerManager,
@@ -623,9 +635,12 @@ export class PartManager {
}
/** 清空点位 */
clearPart() {
- this.pointList = [];
- this.partCanvas = null;
- this.resetPartObject(true);
+ if (this.activeTool.value === OperationType.PART) {
+ this.partPointDrawCommand([], null);
+ } else {
+ this.pointList = [];
+ this.partDrawCommand(null);
+ }
}
/**