111

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

@@ -12,6 +12,9 @@ export const createCanvas = (elementId, options = {}) => {
 		// skipOffscreen: true, // 跳过离屏渲染
 		imageSmoothingEnabled: true, // 启用图像平滑 - 抗锯齿
 		imageSmoothingQuality: "high", // 设置高质量图像平滑
+		fireMiddleClick: true,// 启用中键点击事件
+		fireRightClick: true,// 启用右键点击事件
+		stopContextMenu: true,// 阻止浏览器默认的右键菜单弹出，避免干扰
 		...options,
 	});
 

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

@@ -1,3 +1,4 @@
+import { fabric } from 'fabric-with-all'
 import { createStaticCanvas } from './canvasFactory'
 import { getObjectsBoundingBox, cloneObjects } from './canvasMethod'
 /**  导出画布为图片 */
@@ -39,4 +40,33 @@ export async function exportObjectsToImage(objects = [], isDetails = false) {
 		url: dataURL,
 		...boundingBox,
 	} : dataURL
+}
+
+/**  导出指定对象为缩略图 */
+export async function exportObjectToThumbnail(object, width = 100, height = 100) {
+	const url = await exportObjectsToImage([object]);
+	const staticCanvas = createStaticCanvas(document.createElement('canvas'))
+	staticCanvas.setWidth(width)
+	staticCanvas.setHeight(height)
+	const image = await new Promise((resolve, reject) => {
+		fabric.Image.fromURL(url, (img) => {
+			const scale = Math.min(width / img.width, height / img.height)
+			const left = (width - img.width * scale) / 2
+			const top = (height - img.height * scale) / 2
+			img.set({
+				left,
+				top,
+				scaleX: scale,
+				scaleY: scale,
+			})
+			resolve(img)
+		})
+	})
+	staticCanvas.add(image)
+	// 导出图片
+	const dataURL = staticCanvas.toDataURL({
+		type: 'image/png',
+		quality: 1,
+	})
+	return dataURL
 }