深度画布功能

src/components/Canvas/DepthCanvas/tools/canvasMethod.js

@@ -0,0 +1,40 @@
+/**  克隆对象 */
+export async function cloneObjects(objects = []) {
+	const arrs = []
+	for (const obj of objects) {
+		const clonedObj = await new Promise((resolve, reject) => {
+			obj.clone((v) => {
+				v.set({
+					left: obj.left,
+					top: obj.top,
+					width: obj.width,
+					height: obj.height,
+					scaleX: obj.scaleX,
+					scaleY: obj.scaleY,
+				})
+				resolve(v)
+			})
+		})
+		arrs.push(clonedObj)
+	}
+	return arrs
+}
+
+
+/**  获取组合对象边界 */
+export async function getObjectsBoundingBox(objects = []) {
+	const box1 = { x: Infinity, y: Infinity }
+	const box2 = { x: -Infinity, y: -Infinity }
+	objects.forEach(obj => {
+		box1.x = Math.min(box1.x, obj.left)
+		box1.y = Math.min(box1.y, obj.top)
+		box2.x = Math.max(box2.x, obj.left + obj.width * obj.scaleX)
+		box2.y = Math.max(box2.y, obj.top + obj.height * obj.scaleY)
+	})
+	return {
+		left: box1.x,
+		top: box1.y,
+		width: box2.x - box1.x,
+		height: box2.y - box1.y,
+	}
+}

src/components/Canvas/DepthCanvas/tools/exportMethod.js

@@ -0,0 +1,26 @@
+import { createStaticCanvas } from './canvasFactory'
+import { getObjectsBoundingBox, cloneObjects } from './canvasMethod'
+/**  导出指定对象 */
+export async function exportObjectsToImage(objects = [], isDetails = false) {
+	const clonedObjects = await cloneObjects(objects)
+	const boundingBox = await getObjectsBoundingBox(clonedObjects)
+	const staticCanvas = createStaticCanvas(document.createElement('canvas'))
+	staticCanvas.setWidth(boundingBox.width)
+	staticCanvas.setHeight(boundingBox.height)
+	clonedObjects.forEach(obj => {
+		obj.set({
+			left: obj.left - boundingBox.left,
+			top: obj.top - boundingBox.top,
+		})
+		staticCanvas.add(obj)
+	})
+	// 导出图片
+	const dataURL = staticCanvas.toDataURL({
+		type: 'image/png',
+		quality: 1,
+	})
+	return isDetails ? {
+		url: dataURL,
+		...boundingBox,
+	} : dataURL
+}

src/components/Canvas/DepthCanvas/tools/index.d.ts

@@ -1,45 +0,0 @@
-/**  
- * 组件
-*/
-export const NODE_COMPONENT = {
-	RESULT_IMAGE: 'result-image',
-	CARD: 'card',
-	TEXT: 'text',
-}
-
-/**
- * 节点类型
- */
-export const NODE_TYPE = {
-	INPUT: 'InputNode',
-	SECONDARY: 'SecondaryNode',
-	OUTPUT: 'OutputNode',
-	ALONE: 'AloneNode',
-}
-
-/**
- * 节点数据类型
- */
-export const NODE_DATATYPE = {
-	RESULT_IMAGE: 'result-image',
-	CARDS_SELECT: 'cards-select',
-	TO_REAL_STYLE: 'to-real-style',
-	SURFACE_EDIT: 'surface-edit',
-	SCENE_COMPOSITION: 'scene-composition',
-	COLOR_PALETTE: 'color-palette',
-	TO_3D_MODEL: 'to-3d-model',
-	TO_3VIEW: 'to-3view',
-}
-/**
- * 节点数据层级
- */
-export const NODE_DATATIER = {
-	RESULT_IMAGE: 0,
-	CARDS_SELECT: 0,
-	TO_REAL_STYLE: 1,
-	SURFACE_EDIT: 1,
-	SCENE_COMPOSITION: 2,
-	COLOR_PALETTE: 2,
-	TO_3D_MODEL: 2,
-	TO_3VIEW: 3,
-}