略略略
This commit is contained in:
@@ -1,6 +1,8 @@
|
||||
import { fabric } from 'fabric-with-all'
|
||||
import { OperationType } from '../tools/layerHelper'
|
||||
import { getObjectAlphaToCanvas, traceImageContour, cloneObjects } from '../tools/canvasMethod'
|
||||
import { getSegAnythingImage } from '@/api/depth-canvas'
|
||||
import { useGlobalStore, useUserInfoStore } from '@/stores'
|
||||
|
||||
/** 智能框选工具管理器 */
|
||||
export class AISelectboxToolManager {
|
||||
@@ -10,6 +12,7 @@ export class AISelectboxToolManager {
|
||||
layerManager: any
|
||||
toolManager: any
|
||||
|
||||
targetObject: any
|
||||
isDragging: boolean = false
|
||||
startX: number = 0
|
||||
startY: number = 0
|
||||
@@ -54,6 +57,19 @@ export class AISelectboxToolManager {
|
||||
this.clear();
|
||||
this.createDemoObject()
|
||||
this.tcanvas = null;
|
||||
this.targetObject = null;
|
||||
this.canvasManager.getObjects().forEach((obj) => {
|
||||
if (obj?.info?.isOriginal) {
|
||||
this.targetObject = obj.toObject();
|
||||
}
|
||||
})
|
||||
// const image = this.layerManager.getActiveLayer()
|
||||
// if (image && image.info.isAiSelect) {
|
||||
// this.targetObject = image;
|
||||
// } else {
|
||||
// this.targetObject = null;
|
||||
// }
|
||||
|
||||
}
|
||||
clear() {
|
||||
console.log("清除智能框选工具")
|
||||
@@ -121,6 +137,7 @@ export class AISelectboxToolManager {
|
||||
}
|
||||
// 处理绘制图像
|
||||
async handleDrawImage(object: fabric.Object) {
|
||||
if (!this.targetObject) return;
|
||||
const tcanvas = await this.createStaticCanvas(this.demoObject)
|
||||
tcanvas.add(object)
|
||||
tcanvas.renderAll();
|
||||
@@ -129,6 +146,7 @@ export class AISelectboxToolManager {
|
||||
}
|
||||
// 处理图像删除
|
||||
async handleRemoveImage(object: fabric.Object) {
|
||||
if (!this.targetObject) return;
|
||||
const tcanvas = await this.createStaticCanvas(this.demoObject)
|
||||
const rcanvas = await this.createStaticCanvas(object)
|
||||
const tempCanvas = rcanvas.toCanvasElement();
|
||||
@@ -147,6 +165,7 @@ export class AISelectboxToolManager {
|
||||
}
|
||||
|
||||
mouseDownEvent(e) {
|
||||
if (!this.targetObject) return;
|
||||
const tool = this.toolManager.currentTool.value
|
||||
const tools = [OperationType.AISELECT_ADD, OperationType.AISELECT_REMOVE]
|
||||
if (!tools.includes(tool)) return;
|
||||
@@ -157,6 +176,7 @@ export class AISelectboxToolManager {
|
||||
this.createIndicatorObject()
|
||||
}
|
||||
mouseMoveEvent(e) {
|
||||
if (!this.targetObject) return;
|
||||
if (!this.isDragging) return;
|
||||
var width = e.absolutePointer.x - this.startX
|
||||
var height = e.absolutePointer.y - this.startY
|
||||
@@ -173,7 +193,8 @@ export class AISelectboxToolManager {
|
||||
this.indicatorObject.set({ width, height, left, top })
|
||||
this.canvasManager.canvas.renderAll()
|
||||
}
|
||||
mouseUpEvent(e) {
|
||||
async mouseUpEvent(e) {
|
||||
if (!this.targetObject) return;
|
||||
if (!this.isDragging) return;
|
||||
this.isDragging = false;
|
||||
const object = this.indicatorObject.toJSON("evented")
|
||||
@@ -182,20 +203,32 @@ export class AISelectboxToolManager {
|
||||
this.clearIndicatorObject()
|
||||
this.canvasManager.canvas.renderAll()
|
||||
|
||||
const rect = new fabric.Rect({
|
||||
left: object.left,
|
||||
top: object.top,
|
||||
width: object.width,
|
||||
height: object.height,
|
||||
fill: '#f00',
|
||||
strokeWidth: 0,
|
||||
})
|
||||
useGlobalStore().setLoading(true)
|
||||
const x1 = Math.round(object.left)
|
||||
const y1 = Math.round(object.top)
|
||||
const x2 = Math.round(object.left + object.width)
|
||||
const y2 = Math.round(object.top + object.height)
|
||||
const data = {
|
||||
type: "box",
|
||||
box: [x1, y1, x2, y2],
|
||||
}
|
||||
const url = await this.getSegAnythingImage(data)
|
||||
const image = await this.loadImageToObject(url)
|
||||
// const rect = new fabric.Rect({
|
||||
// left: object.left,
|
||||
// top: object.top,
|
||||
// width: object.width,
|
||||
// height: object.height,
|
||||
// fill: '#f00',
|
||||
// strokeWidth: 0,
|
||||
// })
|
||||
const currentTool = this.toolManager.currentTool.value
|
||||
if (currentTool === OperationType.AISELECT_ADD) {
|
||||
this.handleDrawImage(rect)
|
||||
await this.handleDrawImage(image)
|
||||
} else if (currentTool === OperationType.AISELECT_REMOVE) {
|
||||
this.handleRemoveImage(rect)
|
||||
await this.handleRemoveImage(image)
|
||||
}
|
||||
useGlobalStore().setLoading(false)
|
||||
}
|
||||
|
||||
|
||||
@@ -218,6 +251,7 @@ export class AISelectboxToolManager {
|
||||
absolutePositioned: true,
|
||||
};
|
||||
async createSelectbox() {
|
||||
if (!this.targetObject) return;
|
||||
if (!this.demoObject) return
|
||||
const fobject = this.demoObject
|
||||
this.clearDemoObject()
|
||||
@@ -263,7 +297,26 @@ export class AISelectboxToolManager {
|
||||
this.toolManager.setTool(OperationType.SELECT)
|
||||
}
|
||||
|
||||
|
||||
/** 获取分隔后图片 */
|
||||
async getSegAnythingImage(obj) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!this.targetObject) return;
|
||||
const user_id = useUserInfoStore().state.userInfo.id;
|
||||
const image_path = this.targetObject.src;
|
||||
const data = {
|
||||
image_path,
|
||||
user_id,
|
||||
...obj,
|
||||
}
|
||||
getSegAnythingImage(data).then((res) => {
|
||||
console.log(res)
|
||||
resolve(res)
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
useGlobalStore().setLoading(false)
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this.clear()
|
||||
|
||||
Reference in New Issue
Block a user