平铺元素ui更改

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

@@ -1005,3 +1005,92 @@ export async function base64ToCanvas(base64, scale = 1, sr = false) {
 		image.onerror = reject;
 	});
 }
+
+/**
+ * 图片边界跟踪算法(透明底)
+ * @param {HTMLCanvasElement} canvas - canvas元素
+ * @returns {Array} 边界点数组 [{x, y}, ...]
+*/
+export	function traceImageContour(canvas) {
+	const ctx = canvas.getContext("2d");
+	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+	const data = imageData.data;
+	const width = canvas.width;
+	const height = canvas.height;
+
+	// 查找起始点（第一个不透明像素）
+	let startX = -1;
+	let startY = -1;
+
+	outer: for (let y = 0; y < height; y++) {
+		for (let x = 0; x < width; x++) {
+			const index = (y * width + x) * 4;
+			if (data[index + 3] > 0) {
+				startX = x;
+				startY = y;
+				break outer;
+			}
+		}
+	}
+
+	if (startX === -1) return []; // 没有不透明像素
+
+	// Moore-Neighbor边界跟踪算法
+	const contour = [];
+	const visited = new Set();
+	const directions = [
+		[-1, 0],
+		[-1, -1],
+		[0, -1],
+		[1, -1],
+		[1, 0],
+		[1, 1],
+		[0, 1],
+		[-1, 1],
+	];
+
+	let currentX = startX;
+	let currentY = startY;
+	let backtrackDir = 4; // 起始方向：右
+
+	do {
+		const pointKey = `${currentX},${currentY}`;
+		if (!visited.has(pointKey)) {
+			contour.push({ x: currentX, y: currentY });
+			visited.add(pointKey);
+		}
+
+		// 从右方向开始顺时针查找
+		let found = false;
+		for (let i = 0; i < 8; i++) {
+			const dir = (backtrackDir + i) % 8;
+			const dx = directions[dir][0];
+			const dy = directions[dir][1];
+			const checkX = currentX + dx;
+			const checkY = currentY + dy;
+
+			if (
+				checkX >= 0 &&
+				checkX < width &&
+				checkY >= 0 &&
+				checkY < height
+			) {
+				const index = (checkY * width + checkX) * 4;
+				if (data[index + 3] > 0) {
+					currentX = checkX;
+					currentY = checkY;
+					backtrackDir = (dir + 5) % 8; // 下一个开始查找的方向
+					found = true;
+					break;
+				}
+			}
+		}
+
+		if (!found) break;
+	} while (
+		!(currentX === startX && currentY === startY) &&
+		visited.size < width * height
+	);
+
+	return contour;
+}

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

@@ -44,6 +44,7 @@ export const SpecialType = {
  */
 export const OperationType = {
   // 编辑器模式
+  DISABLED: "disabled", // 禁用
   DRAW: "draw", // 绘画模式
   ERASER: "eraser", // 橡皮擦模式
   SELECT: "select", // 选择模式
@@ -76,6 +77,12 @@ export const OperationType = {
   RED_BRUSH: "red_brush", // 红色笔刷
   GREEN_BRUSH: "green_brush", // 绿色笔刷
 
+  // 部件选取工具
+  PART: "part", // 部件选取工具模式 - 点选模式
+  PART_RECTANGLE: "part_rectangle", // 部件选取工具模式 - 矩形模式
+  PART_BRUSH: "part_brush", // 部件选取工具模式 - 笔刷模式
+  PART_ERASER: "part_eraser", // 部件选取工具模式 - 橡皮擦模式
+  
   // SHAPE: "shape", // 形状模式
   // 可以根据需要添加更多工具
 };