绘制形状

src/components/Canvas/DepthCanvas/manager/LayerManager.ts

@@ -3,6 +3,7 @@ import { fabric } from 'fabric-with-all'
 import { createId } from '../../tools/tools'
 import { exportObjectsToImage, exportObjectToThumbnail } from '../tools/exportMethod'
 import { OperationType } from '../tools/layerHelper'
+import { getArrowPath, cloneObjects, getStarArr } from '../tools/canvasMethod'
 
 export class LayerManager {
 	stateManager: any
@@ -53,6 +54,7 @@ export class LayerManager {
 			this.canvasManager.renderAll()
 		}
 	}
+	/** 删除指定图层 */
 	deleteLayerById(id, isActive = true) {
 		this.canvasManager.deleteObjectById(id)
 		if (id === this.activeID.value && isActive) {
@@ -60,6 +62,24 @@ export class LayerManager {
 		}
 		if (isActive) this.stateManager.recordState()
 	}
+	/** 复制指定图层 */
+	copyLayerById(id) {
+		const object = this.canvasManager.getObjectById(id)
+		if (!object) return console.warn('复制图层失败，对象不存在ID:', id)
+		cloneObjects([object]).then(objects => {
+			const newObject = objects[0]
+			const info = JSON.parse(JSON.stringify(newObject.info))
+			info.id = createId("image")
+			// info.name = info.name
+			newObject.set({
+				top: newObject.top + 15,
+				left: newObject.left + 15,
+				info: info,
+			})
+			this.canvasManager.add(newObject)
+			this.setActiveID(newObject.info.id)
+		})
+	}
 	// 拖拽排序
 	dragSort(id, newIndex) {
 		const index = Math.abs(this.layers.value.length - newIndex - 1)
@@ -90,7 +110,7 @@ export class LayerManager {
 		}
 	}
 	/** 创建空图层 */
-	createEmptyLayer(isRecord = true) {
+	createEmptyLayer(isRecord = true, isActive = false) {
 		const emptyObject = new fabric.Rect({
 			width: 0,
 			height: 0,
@@ -102,6 +122,7 @@ export class LayerManager {
 		})
 		this.setLayerPosition(emptyObject)
 		this.canvasManager.add(emptyObject, isRecord)
+		if (isActive) this.setActiveID(emptyObject.info.id, false)
 		return emptyObject
 	}
 	/** 创建文本图层 */
@@ -138,23 +159,109 @@ export class LayerManager {
 		if (isActive) this.setActiveID(rectObject.info.id)
 		return rectObject
 	}
-	/** 创建圆形图层 */
-	async createCircleLayer(options?: any, isActive = false) {
-		const circleObject = new fabric.Circle({
+	/** 创建直线图层 */
+	async createLineLayer(options?: any, isActive = false) {
+		const line = [options?.x1 || 0, options?.y1 || 0, options?.x2 || 100, options?.y2 || 0]
+		delete options.x1
+		delete options.y1
+		delete options.x2
+		delete options.y2
+		const lineObject = new fabric.Line(line, {
+			stroke: 'black',     // 线条颜色
+			strokeWidth: 2,       // 线条粗细
+			...(options || {}),
+			info: {
+				id: createId("line"),
+				name: '直线图层',
+				...(options?.info || {}),
+			}
+		})
+		this.setLayerPosition(lineObject, options)
+		await this.canvasManager.add(lineObject)
+		if (isActive) this.setActiveID(lineObject.info.id)
+		return lineObject
+	}
+	/** 创建椭圆图层 */
+	async createEllipseLayer(options?: any, isActive = false) {
+		const ellipseObject = new fabric.Ellipse({
 			radius: 50,
 			fill: '#000',
 			...(options || {}),
 			info: {
-				id: createId("circle"),
-				name: '圆形图层',
+				id: createId("ellipse"),
+				name: '椭圆图层',
 				...(options?.info || {}),
 			}
 		})
-		this.setLayerPosition(circleObject, options)
-		await this.canvasManager.add(circleObject)
-		if (isActive) this.setActiveID(circleObject.info.id)
-		return circleObject
+		this.setLayerPosition(ellipseObject, options)
+		await this.canvasManager.add(ellipseObject)
+		if (isActive) this.setActiveID(ellipseObject.info.id)
+		return ellipseObject
 	}
+	/** 创建三角形图层 */
+	async createTriangleLayer(options?: any, isActive = false) {
+		const triangleObject = new fabric.Triangle({
+			width: 100,
+			height: 100,
+			fill: '#000',
+			...(options || {}),
+			info: {
+				id: createId("triangle"),
+				name: '三角形图层',
+				...(options?.info || {}),
+			}
+		})
+		this.setLayerPosition(triangleObject, options)
+		await this.canvasManager.add(triangleObject)
+		if (isActive) this.setActiveID(triangleObject.info.id)
+		return triangleObject
+	}
+	/** 创建五角星图层 */
+	async createStarLayer(options?: any, isActive = false) {
+		const width = options?.width || 100
+		const height = options?.height || 100
+		delete options.points
+		const starObject = new fabric.Polygon(getStarArr(width, height), {
+			fill: '#000',
+			...(options || {}),
+			info: {
+				id: createId("star"),
+				name: '五角星图层',
+				...(options?.info || {}),
+			}
+		})
+		this.setLayerPosition(starObject, options)
+		await this.canvasManager.add(starObject)
+		if (isActive) this.setActiveID(starObject.info.id)
+		return starObject
+	}
+	/** 创建箭头图层 */
+	async createArrowLayer(options?: any, isActive = false) {
+		const width = options?.width || 100
+		const height = options?.height || 10
+		delete options.width
+		delete options.height
+		const arrowObject = new fabric.Path(getArrowPath(width, height), {
+			stroke: '#000',        // 只设置边框颜色
+			strokeWidth: 3,       // 边框宽度
+			fill: 'transparent',  // 不填充
+			strokeLineCap: 'round',
+			strokeLineJoin: 'round',
+			...(options || {}),
+			info: {
+				id: createId("star"),
+				name: '箭头图层',
+				...(options?.info || {}),
+			}
+		});
+		this.setLayerPosition(arrowObject, options)
+		this.canvasManager.add(arrowObject)
+		if (isActive) this.setActiveID(arrowObject.info.id)
+		return arrowObject
+	}
+
+
+
 	/** 创建图片图层 */
 	async createImageLayer(imgOrUrl: string | HTMLImageElement, options?: any, isRecord = true) {
 		const canvasWidth = this.canvasManager.canvasWidth