aidlab/FiDA_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

略略略

Browse Source
This commit is contained in:
lzp
2026-03-27 16:07:13 +08:00
parent 2aa5ac8044
commit 0be1c9743c
10 changed files with 129 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/api/depth-canvas.ts
View File

@@ -39,3 +39,16 @@ export const deleteDepthCanvas = (id: string) => {
loading: true,
})
}
/**
* 获取分隔后图片
* @param data 分隔参数数据
* @returns 分隔后图片数据
*/
export const getSegAnythingImage = (data: object) => {
return request({
url: `/api/python/segAnything`,
method: 'post',
data,
})
}

15
src/api/user.ts
View File

@@ -133,3 +133,18 @@ export const getAvatarLimit = () => {
})
}
/**
* 获取用户风格图片列表
* @param params 获取用户风格图片列表的参数
* @param params.pageNum 页码
* @param params.pageSize 每页数量
* @returns 用户风格图片列表
*/
export const GetUserStyleImages = (params) => {
return request({
url: '/api/user/style/images',
method: 'get',
params,
loading: true,
})
}

1
src/components/Canvas/DepthCanvas/depth-canvas.vue
View File

@@ -105,6 +105,7 @@
const json = canvasManager.processCanvasDisUrlJSON(canvasData)
await canvasManager.loadJSON(json)
}
layerManager.setActiveFirstLayer()
globalStore.setLoading(false)
stateManager.onMounted()

77
src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts
View File

@@ -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()

1
src/components/Canvas/DepthCanvas/manager/CanvasManager.ts
View File

@@ -92,6 +92,7 @@ export class CanvasManager {
id: createId("image"),
name: "图片图层",
lock: true,
isOriginal: true,
}
})
image = img

4
src/components/Canvas/DepthCanvas/manager/LayerManager.ts
View File

@@ -31,6 +31,10 @@ export class LayerManager {
this.stateManager.toolManager.setTool(OperationType.SELECT)
}
}
setActiveFirstLayer() {
this.setActiveID(this.layers.value[0]?.info?.id || "")
}
getActiveLayer() {
return this.getLayerById(this.activeID.value)
}

4
src/components/Canvas/DepthCanvas/manager/StateManager.ts
View File

@@ -1,5 +1,5 @@
import { ref, computed } from "vue";
import { ElMessageBox } from 'element-plus'
import { OperationType } from '../tools/layerHelper'
import i18n from '@/lang'
const t = i18n.global.t
@@ -95,6 +95,7 @@ export class StateManager {
this.running.value = true
this.historyIndex.value = index
this.canvasManager.loadJSON(state.canvas, false).then(() => {
this.toolManager.setTool(OperationType.SELECT)
this.event.emit('canvas:undo', state)
this.running.value = false
})
@@ -108,6 +109,7 @@ export class StateManager {
this.running.value = true
this.historyIndex.value = index
this.canvasManager.loadJSON(state.canvas, false).then(() => {
this.toolManager.setTool(OperationType.SELECT)
this.event.emit('canvas:redo', state)
this.running.value = false
})

4
src/views/home/test.vue
View File

@@ -11,12 +11,12 @@
import { useRoute } from 'vue-router'
const route = useRoute()
const url =
'https://www.minio-api.aida.com.hk/fida-test/furniture/sketches/1a48ed3a-1faa-4fcd-bf07-765dba1702c5.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260320%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260320T020948Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=7dc192bac887bce7b02c99d7037c08d9d684310f00add9b0e63b74b36ee63d37'
'https://minio-api.aida.com.hk/fida-public-bucket/furniture/sketches/e3082a38-55d2-4313-ad53-55aad715cf67.png'
const openCanvas = () => {
myEvent.emit('openFlowCanvas', { url })
}
const openDepthCanvas = () => {
myEvent.emit('openDepthCanvas', { url, canvasId: '69c34539ce996b52f07e625f' })
myEvent.emit('openDepthCanvas', { url, canvasId: '' })
}
onMounted(() => {
if (route.query.depth) {

1
src/views/nuic/index.vue
View File

@@ -62,6 +62,7 @@
}
})
} else {
data.vibe = JSON.parse(data.vibe)
onSubmit(data)
}
}

41
src/views/nuic/nuic-2.vue
View File

@@ -3,9 +3,9 @@
<p class="title" v-html="$t('Nuic.nuic2Title')"></p>
<div class="list">
<div v-for="v in list" :key="v.id" @click="v.active = !v.active">
<img :src="v.url" draggable="false" />
<img :src="v.imageUrl" draggable="false" />
<div class="active" v-show="v.active">
<span>{{ v.title }}</span>
<span>{{ v.styleName }}</span>
</div>
</div>
</div>
@@ -22,28 +22,35 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { GetUserStyleImages } from '@/api/user'
const router = useRouter()
const emit = defineEmits(['next'])
const list = ref([
{ id: 1, url: '/image/nuic/style-1.png', title: '凳子', active: false },
{ id: 2, url: '/image/nuic/style-2.png', title: '沙发', active: false },
{ id: 3, url: '/image/nuic/style-3.png', title: '凳子', active: false },
{ id: 4, url: '/image/nuic/style-4.png', title: '桌子', active: false },
{ id: 5, url: '/image/nuic/style-5.png', title: '桌子', active: false },
{ id: 6, url: '/image/nuic/style-6.png', title: '桌子', active: false },
{ id: 7, url: '/image/nuic/style-7.png', title: '沙发', active: false },
{ id: 8, url: '/image/nuic/style-8.png', title: '桌子', active: false }
])
const list = ref([])
const pageSize = ref(8)
const pageNum = ref(1)
const totalPages = ref(1)
const onNext = () => {
const data = {
vibe: list.value
.filter((v) => v.active)
.map((v) => v.id)
.join(',')
vibe: JSON.stringify(list.value.filter((v) => v.active).map((v) => v.id))
}
emit('next', data)
}
const onLoadMore = () => {}
const onLoadMore = () => {
GetUserStyleImages({
pageNum: pageNum.value,
pageSize: pageSize.value
}).then((res) => {
if (!res) return
list.value = res.images.map((v) => ({
...v,
active: false
}))
totalPages.value = res.totalPages
pageNum.value++
if (pageNum.value > totalPages.value) pageNum.value = 1
})
}
onLoadMore()
</script>
<style lang="less" scoped>