深度画布

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

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