点选

src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue

@@ -63,6 +63,10 @@
 							$t("Canvas.CreateAndCopy")
 						}}</span>
 					</div>
+					<div class="action-btn" @click="onReset">
+						<svg-icon name="CCut" size="26" />
+						<span class="btn-text">清空当前点位</span>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -226,12 +230,16 @@
 
 	// 创建
 	function onCreate() {
-		
+		props.partManager.createPart();
 	}
 	// 复制并创建
 	function onCopyCreate() {
 		
 	}
+	// 清空当前点位
+	function onReset() {
+		props.partManager.clearPart();
+	}
 
 </script>
 
@@ -410,7 +418,7 @@
 
 	.tool-actions {
 		display: grid;
-		grid-template-columns: repeat(2, 1fr);
+		grid-template-columns: repeat(3, 1fr);
 		gap: 5px;
 		padding: 0 30px;
 	}

src/component/Canvas/CanvasEditor/index.vue

@@ -144,6 +144,7 @@ const props = defineProps({
   },
 });
 
+const loading = ref(false); 
 // 引用和状态
 const canvasRef = ref(null);
 const canvasContainerRef = shallowRef(null);
@@ -277,6 +278,7 @@ onMounted(async () => {
   canvasManager.canvas.activeLayerId = activeLayerId;
   canvasManager.activeLayerId = activeLayerId;
   canvasManager.canvas.activeElementId = activeElementId;
+  canvasManager.canvas.loading = loading;
 
   // 创建命令管理器
   commandManager = new CommandManager({
@@ -1392,6 +1394,7 @@ defineExpose({
     />
 	<!-- 上传图片遮罩 -->
 	<div v-show="isDragOver" class="dragover-tip"></div>
+	<div class="loading" v-show="loading"><a-spin :delay="0.5" /></div>
   </div>
 </template>
 
@@ -1466,6 +1469,9 @@ defineExpose({
   top: 0;
   bottom: 0;
 }
+.app-container >.loading{
+	position: absolute;
+}
 
 .background-grid {
   --offsetX: 50%;

src/component/Canvas/CanvasEditor/managers/PartManager.js

@@ -1,5 +1,5 @@
 import { fabric } from "fabric-with-all";
-import { generateId } from "../utils/helper";
+import { traceImageContour, imageToCanvas } from "../utils/helper";
 import { OperationType } from "../utils/layerHelper";
 import { CreateSelectionCommand } from "../commands/SelectionCommands";
 import { ClearSelectionCommand } from "../commands/LassoCutoutCommand";
@@ -34,15 +34,6 @@ export class PartManager {
 
 		// 状态
 		this.isActive = false;
-		this.partObject = null; // 当前选区对象
-		this.partId = "part_selector";
-		this.defaultCursor = "default";
-
-		// 绘制状态
-		this.drawingObject = null;
-		this.startPoint = null;
-		this.partPath = null; // 存储选区路径数据
-
 
 		// 不再直接绑定事件处理函数
 		this._mouseDownHandler = null;
@@ -58,10 +49,15 @@ export class PartManager {
 			OperationType.PART_ERASER,
 		];
 
-		this.pointList = []; // 存储点选坐标
 
 		// 当前工具
 		this.activeTool = this.toolManager.activeTool;
+
+		this.partGroup = null; // 当前选区对象
+		this.partId = "part_selector";
+		this.partCanvas = null;// 选区画布
+		// 点选工具相关
+		this.pointList = []; // 存储点选坐标
 	}
 
 	/**
@@ -82,15 +78,13 @@ export class PartManager {
 		else if (wasActive && !this.isActive) {
 			this.cleanupEvents();
 			this.clearPartObject();
+			this.clearPointData();
 		}
 	}
 
-	/**
-	 * 初始化选区相关事件
-	 */
+	/** 初始化选区相关事件 */
 	initEvents() {
 		if (!this.canvas || this._mouseDownHandler) return; // 避免重复初始化
-		this.defaultCursor = this.canvas.defaultCursor;
 
 		// 保存实例引用，用于事件处理函数中
 		const self = this;
@@ -187,9 +181,7 @@ export class PartManager {
 		document.addEventListener("keydown", this._keyDownHandler);
 	}
 
-	/**
-	 * 清理事件监听
-	 */
+	/** 清理事件监听 */
 	cleanupEvents() {
 		if (!this.canvas) return;
 
@@ -212,20 +204,19 @@ 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;
 	}
-	// 点选工具模式下移动事件处理
+	/** 点选工具模式下移动事件处理 */
 	_pointMoveHandler(options) { }
-	// 点选工具模式下抬起事件处理
+	/** 点选工具模式下抬起事件处理 */
 	async _pointUpHandler(options) {
 		const button = options.button;
 		const isLeft = button === 1;// 左键1（添加）  右键3（删除）
-		this.canvas.upperCanvasEl.style.cursor = this.defaultCursor;
 		const fixedObject = this.canvasManager.getFixedLayerObject();
 		if (!fixedObject) return console.warn("未找到固定图层");
 		const { x, y } = options.absolutePointer;
@@ -256,10 +247,11 @@ export class PartManager {
 			label: label,
 		})
 		const image1 = await this.loadImageToObject(url);
-		const group = this.partObject;
-		this.removeAllChildren();
+		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,
@@ -279,47 +271,57 @@ export class PartManager {
 		}
 		this.canvas.renderAll();
 	}
-
-
-	// 框选工具模式下点击事件处理
-	_rectangleDownHandler(options) {
+	/** 清空点选数据 */
+	clearPointData() {
+		this.pointList = [];
+		this.partCanvas = null;
 	}
-	// 框选工具模式下移动事件处理
+
+
+	/** 框选工具模式下点击事件处理 */
+	_rectangleDownHandler(options) {
+		console.log(options.absolutePointer);
+	}
+	/** 框选工具模式下移动事件处理 */
 	_rectangleMoveHandler(options) {
 
 	}
-	// 框选工具模式下抬起事件处理
+	/** 框选工具模式下抬起事件处理 */
 	_rectangleUpHandler(options) {
+		console.log(options.absolutePointer);
 	}
 
 
-	// 绘制工具模式下点击事件处理
+	/** 绘制工具模式下点击事件处理 */
 	_brushDownHandler(options) {
 	}
-	// 绘制工具模式下移动事件处理
+	/** 绘制工具模式下移动事件处理 */
 	_brushMoveHandler(options) {
 
 	}
-	// 绘制工具模式下抬起事件处理
+	/** 绘制工具模式下抬起事件处理 */
 	_brushUpHandler(options) {
 	}
 
 
-	// 擦除工具模式下抬起事件处理
+	/** 擦除工具模式下抬起事件处理 */
 	_eraseUpHandler(options) {
 	}
-	// 擦除工具模式下点击事件处理
+	/** 擦除工具模式下点击事件处理 */
 	_eraseDownHandler(options) {
 	}
-	// 擦除工具模式下移动事件处理
+	/** 擦除工具模式下移动事件处理 */
 	_eraseMoveHandler(options) {
 
 	}
 
 
 
-	// 获取分隔后图片
+	/** 获取分隔后图片 */
 	async getSegAnythingImage(obj) {
+		setTimeout(() => {
+			this.canvas.loading.value = true;
+		});
 		return new Promise((resolve, reject) => {
 			// const user_id = store.state.UserHabit.userDetail.userId;
 			const user_id = 24299;
@@ -329,6 +331,7 @@ export class PartManager {
 			}
 			Https.axiosPost(Https.httpUrls.segAnything, data)
 				.then(response => {
+					this.canvas.loading.value = false;
 					if (response) {
 						resolve(response);
 					} else {
@@ -336,12 +339,13 @@ export class PartManager {
 					}
 				})
 				.catch(error => {
+					this.canvas.loading.value = false;
 					console.error(error);
 				});
 		});
 	}
 
-	// 删除指定ID的对象
+	/** 删除指定ID的对象 */
 	removeObjectsById(id) {
 		const objects = this.canvas.getObjects().filter(obj => obj.id === id);
 		this.canvas.remove(...objects);
@@ -354,10 +358,11 @@ export class PartManager {
 		});
 	}
 
-	removeAllChildren() {
-		this.partObject?._objects?.forEach(child => {
-			group.remove(child);
-		});
+	/** 重置点位对象组 */
+	resetPartObject(render = false) {
+		this.clearPartObject();
+		this.createPartObject();
+		if (render) this.canvas.renderAll();
 	}
 	createPartObject() {
 		const fixedObject = this.canvasManager.getFixedLayerObject();
@@ -378,11 +383,53 @@ export class PartManager {
 			evented: false,
 		})
 		this.canvas.add(group);
-		this.partObject = group;
+		this.partGroup = group;
 	}
+	/** 清空点位对象组 */
 	clearPartObject() {
 		this.removeObjectsById(this.partId);
-		this.partObject = null;
+		this.partGroup = null;
+	}
+
+	/** 创建当前选区 */
+	createPart() {
+		if (!this.partCanvas) return console.warn("没有点位画布");
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) return console.warn("未找到固定图层");
+		const scaleY = fixedObject.scaleY
+		const scaleX = fixedObject.scaleX
+		const top = fixedObject.top - fixedObject.height * scaleY / 2;
+		const left = fixedObject.left - fixedObject.width * scaleX / 2;
+		const arr = traceImageContour(this.partCanvas);
+		let minX = fixedObject.width;
+		let minY = fixedObject.height;
+		const str = arr.map((v) => {
+			if (v.x < minX) minX = v.x;
+			if (v.y < minY) minY = v.y;
+			return `${v.x} ${v.y}`
+		}).join(" L ");
+		const path = new fabric.Path(`M ${str} z`);
+		path.set({
+			left: left + minX * scaleX,
+			top: top + minY * scaleY,
+			scaleX: scaleX,
+			scaleY: scaleY,
+			fill: "rgba(127, 255, 127, 0.3)",
+			stroke: "#2AA81B",
+			strokeWidth: 2,
+			strokeDashArray: [8, 4],
+			strokeLineCap: "round",// 折线端点样式
+			strokeLineJoin: "bevel", // 折线连接样式
+			strokeUniform: true, // 保持描边宽度不随缩放改变
+		});
+		// this.partGroup.add(path);
+		this.canvas.add(path);
+		this.canvas.renderAll();
+	}
+	/** 清空点位 */
+	clearPart() {
+		this.pointList = [];
+		this.resetPartObject(true);
 	}
 
 	/**
@@ -391,6 +438,8 @@ export class PartManager {
 	dispose() {
 		this.cleanupEvents();
 		this.clearPartObject();
+		this.clearPointData();
+
 		this.canvas = null;
 		this.commandManager = null;
 		this.layerManager = null;

src/component/Canvas/CanvasEditor/managers/ToolManager.js

@@ -429,6 +429,9 @@ export class ToolManager {
     if (this.canvasManager && this.canvasManager.selectionManager) {
       this.canvasManager.selectionManager.setCurrentTool(toolId);
     }
+    if (this.canvasManager && this.canvasManager.partManager) {
+      this.canvasManager.partManager.setCurrentTool(toolId);
+    }
 
     // 通知观察者
     this.notifyObservers(toolId);

src/component/Canvas/CanvasEditor/utils/helper.js

@@ -995,13 +995,13 @@ export function getTransformScaleAngle(Transform) {
 }
 
 /**
- * 图片转换为canvas
+ * base64转换为canvas
  * @param {String} base64 - 图片base64编码
  * @param {Number} scale - 缩放比例
  * @param {Boolean} sr - 缩放反转，默认false
  * @returns {Promise<HTMLCanvasElement>} canvas元素
 */
-export async function base64ToCanvas(base64, scale = 1, sr = false) {
+export function base64ToCanvas(base64, scale = 1, sr = false) {
 	return new Promise((resolve, reject) => {
 		const image = new Image();
 		image.src = base64;
@@ -1014,7 +1014,7 @@ export async function base64ToCanvas(base64, scale = 1, sr = false) {
 			const height = sr ? image.height / scale : image.height * scale;
 			canvas.width = width;
 			canvas.height = height;
-			const ctx = canvas.getContext('2d');
+			const ctx = canvas.getContext('2d', { willReadFrequently: true });
 			ctx.clearRect(0, 0, width, height);
 			ctx.drawImage(image, 0, 0, width, height);
 			resolve(canvas);
@@ -1022,6 +1022,25 @@ export async function base64ToCanvas(base64, scale = 1, sr = false) {
 		image.onerror = reject;
 	});
 }
+/**
+ * image转换为canvas
+ * @param {HTMLImageElement} image - 图片元素
+ * @param {Number} scale - 缩放比例
+ * @param {Boolean} sr - 缩放反转，默认false
+ * @returns {Promise<HTMLCanvasElement>} canvas元素
+*/
+export async function imageToCanvas(image, scale = 1, sr = false) {
+	await image.decode();
+	const canvas = document.createElement('canvas');
+	const width = (sr ? image.width / scale : image.width * scale);
+	const height = sr ? image.height / scale : image.height * scale;
+	canvas.width = width;
+	canvas.height = height;
+	const ctx = canvas.getContext('2d', { willReadFrequently: true });
+	ctx.clearRect(0, 0, width, height);
+	ctx.drawImage(image, 0, 0, width, height);
+	return resolve(canvas);
+}
 
 /**
  * 图片边界跟踪算法(透明底)
@@ -1029,7 +1048,7 @@ export async function base64ToCanvas(base64, scale = 1, sr = false) {
  * @returns {Array} 边界点数组 [{x, y}, ...]
 */
 export	function traceImageContour(canvas) {
-	const ctx = canvas.getContext("2d");
+	const ctx = canvas.getContext("2d", { willReadFrequently: true });
 	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 	const data = imageData.data;
 	const width = canvas.width;
@@ -1124,7 +1143,7 @@ export function imageAddGapToCanvas(image, gapX, gapY) {
 	const tcanvas = document.createElement('canvas');
 	tcanvas.width = image.width + gapX;
 	tcanvas.height = image.height + gapY;
-	const ctx = tcanvas.getContext('2d');
+	const ctx = tcanvas.getContext('2d', { willReadFrequently: true });
 	ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
 	ctx.drawImage(image, 0, 0);
 	return tcanvas;

src/component/Canvas/test.vue

@@ -1,11 +1,9 @@
 <template>
-	<!-- <div class="test" ref="testRef">
+	<div class="test" ref="testRef">
 		<div class="canvas-container">
 			<canvas id="canvas"></canvas>
 		</div>
-	</div> -->
-	<overall-canvas-demo />
-	<div style="width: 100px; height: 100px;position: relative;"><CanvasEditor /></div>
+	</div>
 </template>
 
 <script lang="ts" setup>