111

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

@@ -6,6 +6,22 @@ import { detectDeviceType } from '../tools/index'
 import { CanvasEventManager } from "./events/CanvasEventManager";
 import { OperationType } from '../tools/layerHelper'
 
+// 自定义画布转对象属性
+fabric.Object.prototype.customProperties = ["top", "left", "width", "height", "scaleX", "scaleY", "info", "thumbnail"];
+fabric.Object.prototype.toObject_ = fabric.Object.prototype.toObject
+fabric.Object.prototype.toObject = function () {
+	const args = [...arguments]
+	const arr = [...fabric.Object.prototype.customProperties]
+	args.forEach(v => {
+		if (typeof v === 'string') {
+			arr.push(v)
+		} else if (Array.isArray(v)) {
+			arr.push(...v)
+		}
+	})
+	return this.toObject_(arr)
+}
+
 interface CanvasInitOptions {
 	canvasRef: any
 	canvasViewWidth?: number
@@ -43,8 +59,6 @@ export class CanvasManager {
 		this.canvas = createCanvas(options.canvasRef.value, {
 			preserveObjectStacking: true,
 			enableRetinaScaling: true,
-			stopContextMenu: true,
-			fireRightClick: true,
 			backgroundColor: '#fff',
 		})
 		this.setCanvasViewSize(options)
@@ -118,7 +132,7 @@ export class CanvasManager {
 		this.animationManager.setupInteractionAnimations();
 	}
 	/** 设置激活对象 */
-	setActiveObjectByID(id: string) {
+	setActiveObjectById(id: string) {
 		const obj = this.getObjectById(id)
 		console.log(obj)
 		if (obj) this.canvas.setActiveObject(obj)
@@ -184,8 +198,7 @@ export class CanvasManager {
 
 	/** 导出画布为JSON */
 	getCanvasJSON() {
-		const keys = ["top", "left", "width", "height", "scaleX", "scaleY", "info",]
-		const json = this.canvas.toJSON(keys)
+		const json = this.canvas.toJSON()
 		return JSON.stringify(json)
 	}
 	/** 加载画布JSON */