深度画布智能选区
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { fabric } from 'fabric-with-all'
|
||||
import { createId } from '../../tools/tools'
|
||||
import { OperationType } from '../tools/layerHelper'
|
||||
import { getObjectAlphaToCanvas, traceImageContour } from '../tools/canvasMethod'
|
||||
|
||||
/** 智能框选工具管理器 */
|
||||
export class AISelectboxToolManager {
|
||||
@@ -7,6 +8,7 @@ export class AISelectboxToolManager {
|
||||
canvasManager: any
|
||||
stateManager: any
|
||||
layerManager: any
|
||||
toolManager: any
|
||||
|
||||
isDragging: boolean = false
|
||||
startX: number = 0
|
||||
@@ -16,7 +18,7 @@ export class AISelectboxToolManager {
|
||||
this.canvasManager = options.canvasManager
|
||||
this.stateManager = options.stateManager
|
||||
this.layerManager = options.layerManager
|
||||
|
||||
this.toolManager = options.toolManager
|
||||
}
|
||||
mouseDownEvent(e) {
|
||||
this.isDragging = true
|
||||
@@ -81,15 +83,11 @@ export class AISelectboxToolManager {
|
||||
stroke: "rgba(255, 77, 71, 1)",
|
||||
strokeWidth: 1.5,
|
||||
strokeDashArray: [4, 4],
|
||||
fill: "rgba(255, 186, 186, 0.5)",
|
||||
fill: "transparent",
|
||||
strokeUniform: true, // 保持描边宽度不随缩放改变
|
||||
// strokeLineCap: "round",// 折线端点样式
|
||||
// strokeLineJoin: "bevel", // 折线连接样式
|
||||
// selectable: false,
|
||||
// evented: false,
|
||||
excludeFromExport: true,
|
||||
hoverCursor: "default",
|
||||
moveCursor: "default",
|
||||
selectable: false,
|
||||
evented: false,
|
||||
absolutePositioned: true,
|
||||
};
|
||||
async createSelectbox() {
|
||||
const url = "http://118.31.39.42:3000/falls/1a48ed3a-1faa-4fcd-bf07-765dba1702c5.png"
|
||||
@@ -112,200 +110,31 @@ export class AISelectboxToolManager {
|
||||
}).join(" L ");
|
||||
const path = new fabric.Path(`M ${str} z`);
|
||||
path.set({
|
||||
left: left + minX * scaleX,
|
||||
top: top + minY * scaleY,
|
||||
left: left + minX,
|
||||
top: top + minY,
|
||||
scaleX: scaleX,
|
||||
scaleY: scaleY,
|
||||
...this.selectionStyle,
|
||||
});
|
||||
const rect1 = new fabric.Rect({
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
fill: '#f00',
|
||||
info: {
|
||||
id: createId("rect"),
|
||||
name: '矩形图层',
|
||||
}
|
||||
})
|
||||
const rect2 = new fabric.Rect({
|
||||
left: 200,
|
||||
top: 200,
|
||||
width: 100,
|
||||
height: 100,
|
||||
fill: '#ff0',
|
||||
info: {
|
||||
id: createId("rect"),
|
||||
name: '矩形图层',
|
||||
}
|
||||
})
|
||||
this.layerManager.createGroupLayer({
|
||||
child: [rect1, rect2],
|
||||
})
|
||||
// this.canvasManager.canvas.add(path)
|
||||
// this.canvasManager.canvas.renderAll()
|
||||
|
||||
const group = await this.layerManager.createGroupLayer({
|
||||
clipPath: path,
|
||||
}, false, false)
|
||||
const rect = await this.layerManager.createRectLayer({
|
||||
width: path.width,
|
||||
height: path.height,
|
||||
left: left + minX,
|
||||
top: top + minY,
|
||||
fill: "rgba(255, 186, 186, 0.5)",
|
||||
info: { parentId: group.info.id },
|
||||
}, false, true)
|
||||
await this.canvasManager.updateSubLayerClipPath()
|
||||
await this.layerManager.updateLayerThumbnailsById(rect.info.id, "", false)
|
||||
await this.layerManager.updateLayerThumbnailsById(group.info.id, rect.thumbnail)
|
||||
this.stateManager.recordState()
|
||||
this.toolManager.setTool(OperationType.SELECT)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
dispose() { }
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取对象黑白通道画布
|
||||
* @param {fabric.Object} object - 要处理的 fabric 对象
|
||||
* @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 }, isMerge = false) {
|
||||
const image = object.getElement();
|
||||
if (image.nodeName !== "IMG" && image.nodeName !== "CANVAS") {
|
||||
console.warn("对象不是图片");
|
||||
return null;
|
||||
}
|
||||
const { width, height } = image;
|
||||
if (!width || !height) {
|
||||
console.warn("对象没有元素");
|
||||
return null;
|
||||
}
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(image, 0, 0, width, height);
|
||||
const data = ctx.getImageData(0, 0, width, height);
|
||||
for (let i = 0; i < data.data.length; i += 4) {
|
||||
const r = data.data[i + 0];
|
||||
const g = data.data[i + 1];
|
||||
const b = data.data[i + 2];
|
||||
const a = data.data[i + 3];
|
||||
const revR = revData?.data[i + 0] || 0;
|
||||
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) {
|
||||
isHave = false;
|
||||
} else {
|
||||
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;
|
||||
data.data[i + 2] = 0;
|
||||
data.data[i + 3] = 0;
|
||||
}
|
||||
}
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
ctx.putImageData(data, 0, 0);
|
||||
return canvas;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 图片边界跟踪算法(透明底)
|
||||
* @param {HTMLCanvasElement} canvas - canvas元素
|
||||
* @param {Number} scale - 缩放比例
|
||||
* @returns {Array} 边界点数组 [{x, y}, ...]
|
||||
*/
|
||||
export function traceImageContour(canvas) {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user