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-18 17:25:19 +08:00
parent 0f99ea809d
commit 2df168aec7
9 changed files with 159 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -121,21 +121,12 @@ export class CanvasManager {
this.setupBrushEvents()
/** 测试-开始 */
// this.stateManager.setIsRecord(false)
// // 创建矩形
// const rect = await this.layerManager.createRectLayer({
// left: 400,
// top: 100,
// })
// //创建圆形
// const circle = await this.layerManager.createCircleLayer({
// left: 200,
// top: 200,
// })
// // 文字
// const text = await this.layerManager.createTextLayer('Hello World');
// this.layerManager.setActiveID(text.info.id)
// this.stateManager.setIsRecord(true)
this.stateManager.setIsRecord(false)
const rect = await this.layerManager.createRectLayer({ left: 200 })
await this.layerManager.createStarLayer({ left: 400 })
await this.layerManager.createArrowLayer({ left: 600 })
this.layerManager.setActiveID(rect.info.id)
this.stateManager.setIsRecord(true)
/** 测试-结束 */
this.resetZoom(false, true)// 画布居中
@@ -289,6 +280,39 @@ export class CanvasManager {
callback?.(true)
})
}
/** 导出画布为处理图片的JSON */
getCanvasDisUrlJSON() {
const canvas = this.canvas.toJSON()
const images = [];
var i = 0;
const create = (url) => {
const logo = `xxxxxxxx_${i++}_xxxxxxxx`;
images.push({ index: logo, url })
return logo
}
canvas.objects.forEach((object: any) => {
if (object.thumbnail) {
object.thumbnail = create(object.thumbnail)
}
if (object.src) {
object.src = create(object.src)
}
if (object.fill?.source) {
object.fill.source = create(object.fill.source)
}
if (object.info?.fill?.source) {
object.info.fill.source = create(object.info.fill.source)
}
})
return { canvas: JSON.stringify(canvas), images }
}
/** 处理JSON为正常画布 */
processCanvasDisUrlJSON(obj: { canvas: string, images: Object[] }) {
var json = obj.canvas;
const images = obj.images || []
images.forEach((v: any) => json = json.replace(new RegExp(v.index), v.url))
return JSON.parse(json)
}
dispose() {
this.animationManager?.dispose()
this.eventManager?.dispose()

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

@@ -173,6 +173,7 @@ export class LayerManager {
width: 100,
height: 100,
fill: '#000',
strokeWidth: 0,
...(options || {}),
info: {
id: createId("rect"),
@@ -212,6 +213,7 @@ export class LayerManager {
const ellipseObject = new fabric.Ellipse({
radius: 50,
fill: '#000',
strokeWidth: 0,
...(options || {}),
info: {
id: createId("ellipse"),
@@ -230,6 +232,7 @@ export class LayerManager {
width: 100,
height: 100,
fill: '#000',
strokeWidth: 0,
...(options || {}),
info: {
id: createId("triangle"),
@@ -249,6 +252,7 @@ export class LayerManager {
delete options.points
const starObject = new fabric.Polygon(getStarArr(width, height), {
fill: '#000',
strokeWidth: 0,
...(options || {}),
info: {
id: createId("star"),

13
src/components/Canvas/DepthCanvas/manager/ObjectManager.ts
View File

@@ -207,18 +207,15 @@ export class ObjectManager {
}
}
/** 修改透明度
/** 修改属性
* @param id 目标对象ID
* @param options 透明度参数
* @param options.opacity 透明度
* @param options 参数
* @param isRecord 是否记录
*/
async updateOpacity(id: string, options: any, isRecord: boolean) {
const object = this.getFillRepeatObject(id)
async updateProperty(id: string, options: any, isRecord: boolean) {
const object = this.canvasManager.getObjectById(id)
if (!object) return null
const opacity = options.opacity
object.set("opacity", opacity);
object.set(options);
this.canvasManager.renderAll()
if (isRecord) {
this.stateManager.recordState()

67
src/components/Canvas/DepthCanvas/manager/ShapeToolManager copy.ts
View File

@@ -1,67 +0,0 @@
import { OperationType, OperationTypes } from "../tools/layerHelper";
import { fabric } from 'fabric-with-all'
/** 矩形工具管理器 */
export class RectToolManager {
// 管理器
canvasManager: any
stateManager: any
layerManager: any
isDragging: boolean = false
startX: number = 0
startY: number = 0
demoObject: any
tools = [
OperationType.RECTANGLE
]
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: '#000',
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
this.layerManager.createRectLayer(object, true)
this.canvasManager.canvas.remove(this.demoObject)
this.canvasManager.canvas.renderAll()
}
dispose() { }
}

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

@@ -120,6 +120,7 @@ export class ShapeToolManager {
width: 0,
height: 0,
fill: '#000',
strokeWidth: 0,
})
return rect
}
@@ -159,6 +160,7 @@ export class ShapeToolManager {
left: this.startX,
top: this.startY,
fill: '#000',
strokeWidth: 0,
})
return circle
}
@@ -180,6 +182,7 @@ export class ShapeToolManager {
width: 0,
height: 0,
fill: '#000',
strokeWidth: 0,
})
return triangle
}
@@ -203,6 +206,7 @@ export class ShapeToolManager {
fill: '#000',
strokeLineJoin: 'round', // 圆角连接
strokeLineCap: 'round', // 圆角端点
strokeWidth: 0,
});
return star