311 lines
7.8 KiB
TypeScript
311 lines
7.8 KiB
TypeScript
import { fabric } from 'fabric-with-all'
|
||
import { createId } from '../../tools/tools'
|
||
|
||
/** 智能框选工具管理器 */
|
||
export class AISelectboxToolManager {
|
||
// 管理器
|
||
canvasManager: any
|
||
stateManager: any
|
||
layerManager: any
|
||
|
||
isDragging: boolean = false
|
||
startX: number = 0
|
||
startY: number = 0
|
||
demoObject: any
|
||
constructor(options) {
|
||
this.canvasManager = options.canvasManager
|
||
this.stateManager = options.stateManager
|
||
this.layerManager = options.layerManager
|
||
|
||
}
|
||
mouseDownEvent(e) {
|
||
this.isDragging = true
|
||
this.startX = e.absolutePointer.x
|
||
this.startY = e.absolutePointer.y
|
||
const rect = new fabric.Rect({
|
||
left: this.startX,
|
||
top: this.startY,
|
||
width: 0,
|
||
height: 0,
|
||
fill: 'transparent',
|
||
stroke: '#000',
|
||
strokeWidth: 1,
|
||
evented: false,
|
||
})
|
||
this.demoObject = rect
|
||
this.canvasManager.canvas.add(rect)
|
||
this.canvasManager.canvas.renderAll()
|
||
}
|
||
mouseMoveEvent(e) {
|
||
if (!this.isDragging) return;
|
||
var width = e.absolutePointer.x - this.startX
|
||
var height = e.absolutePointer.y - this.startY
|
||
var left = this.startX
|
||
var top = this.startY
|
||
if (width < 0) {
|
||
left += width
|
||
width = -width
|
||
}
|
||
if (height < 0) {
|
||
top += height
|
||
height = -height
|
||
}
|
||
this.demoObject.set({ width, height, left, top })
|
||
this.canvasManager.canvas.renderAll()
|
||
}
|
||
mouseUpEvent(e) {
|
||
if (!this.isDragging) return;
|
||
this.isDragging = false;
|
||
const object = this.demoObject.toJSON("evented")
|
||
if (object.width === 0) object.width = 100
|
||
if (object.height === 0) object.height = 100
|
||
// console.log(object)
|
||
this.canvasManager.canvas.remove(this.demoObject)
|
||
this.canvasManager.canvas.renderAll()
|
||
|
||
this.createSelectbox()
|
||
}
|
||
|
||
|
||
|
||
|
||
loadImageToObject(url) {
|
||
return new Promise((resolve, reject) => {
|
||
fabric.Image.fromURL(url, (img) => {
|
||
resolve(img);
|
||
}, { crossOrigin: "anonymous" });// 防止污染
|
||
});
|
||
}
|
||
rgba = { r: 0, g: 255, b: 0, a: 200 };
|
||
selectionStyle = {
|
||
stroke: "rgba(255, 77, 71, 1)",
|
||
strokeWidth: 1.5,
|
||
strokeDashArray: [4, 4],
|
||
fill: "rgba(255, 186, 186, 0.5)",
|
||
strokeUniform: true, // 保持描边宽度不随缩放改变
|
||
// strokeLineCap: "round",// 折线端点样式
|
||
// strokeLineJoin: "bevel", // 折线连接样式
|
||
// selectable: false,
|
||
// evented: false,
|
||
excludeFromExport: true,
|
||
hoverCursor: "default",
|
||
moveCursor: "default",
|
||
};
|
||
async createSelectbox() {
|
||
const url = "http://118.31.39.42:3000/falls/1a48ed3a-1faa-4fcd-bf07-765dba1702c5.png"
|
||
const image = await this.loadImageToObject(url)
|
||
const canvas = getObjectAlphaToCanvas(image, null, 0, this.rgba);
|
||
const fobject = this.canvasManager.canvas.clipPath
|
||
// const top = fobject.top - fobject.height * scaleY / 2;
|
||
// const left = fobject.left - fobject.width * scaleX / 2;
|
||
const scaleY = fobject.scaleY
|
||
const scaleX = fobject.scaleX
|
||
const top = fobject.top
|
||
const left = fobject.left
|
||
const arr = traceImageContour(canvas);
|
||
let minX = fobject.width;
|
||
let minY = fobject.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,
|
||
...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()
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
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;
|
||
} |