Merge remote-tracking branch 'origin/StableVersion' into dev_vite

2025-09-25 15:14:27 +08:00
parent 31c4b478d6 ab9f830525
commit 0f25730307
13 changed files with 118 additions and 97 deletions
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -468,7 +468,6 @@ onMounted(async () => {
  // 使用window的resize事件代替ResizeObserver
  // 只有当窗口大小变化时才更新画布尺寸
  //   window.addEventListener("resize", handleWindowResize);
-
 	if(props.config.initZoom) {
 		const width  = canvasManager.width;
 		const height  = canvasManager.height;
@@ -547,6 +546,10 @@ function setZoom(zoom) {
  if (!canvasManager) return;
  const newZoom = Math.max(zoom, 0.1); // 最小0.1倍

+function setZoom(zoom) {
+	setTimeout(()=>{
+  if (!canvasManager) return;
+  const newZoom = Math.max(zoom, 0.1); // 减少10%，最小0.1倍
  // 使用画布中心作为缩放点
  const centerPoint = {
    x: canvasManager.canvas.width / 2,
@@ -556,6 +559,7 @@ function setZoom(zoom) {
  canvasManager.animateZoom(centerPoint, newZoom);
 	})
 }
+
 function zoomIn() {
  if (!canvasManager) return;

--- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
@@ -811,7 +811,7 @@ export class CanvasManager {
   * @param {Array} options.layerIdArray 导出多个图层ID数组
   * @param {String} options.expPicType 导出图片类型 (png/jpg/svg)
   * @param {Boolean} options.restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
-   * @param {Boolean} options.isEnhanceImg 是否是增强图片
+	 * @param {Boolean} options.isEnhanceImg 是否是增强图片
   * @returns {String} 导出的图片数据URL
   */
  async exportImage(options = {}) {
--- a/src/component/Canvas/CanvasEditor/managers/ExportManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/ExportManager.js
@@ -18,12 +18,12 @@ export class ExportManager {
   * @param {Object} options 导出选项
   * @param {Boolean} options.isContainBg 是否包含背景图层
   * @param {Boolean} options.isContainFixed 是否包含固定图层
-   * @param {Boolean} options.isCropByBg 是否使用背景大小裁剪
+	 * @param {Boolean} options.isCropByBg 是否使用背景大小裁剪
   * @param {String} options.layerId 导出具体图层ID
   * @param {Array} options.layerIdArray 导出多个图层ID数组
   * @param {String} options.expPicType 导出图片类型 (png/jpg/svg)
   * @param {Boolean} options.restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
-   * @param {Boolean} options.isEnhanceImg 是否是增强图片
+	 * @param {Boolean} options.isEnhanceImg 是否是增强图片
   * @returns {String} 导出的图片数据URL
   */
  exportImage(options = {}) {
@@ -48,7 +48,7 @@ export class ExportManager {
          isRedGreenMode,
          restoreOpacityInRedGreen,
          isCropByBg,
-					isEnhanceImg,
+					isEnhanceImg, // 是否是增强图片
        );
      }

@@ -62,7 +62,7 @@ export class ExportManager {
          isRedGreenMode,
          restoreOpacityInRedGreen,
          isCropByBg,
-					isEnhanceImg
+					isEnhanceImg, // 是否是增强图片
        );
      }

@@ -74,7 +74,7 @@ export class ExportManager {
        isRedGreenMode,
        restoreOpacityInRedGreen,
        isCropByBg,
-				isEnhanceImg
+				isEnhanceImg, // 是否是增强图片
      );
    } catch (error) {
      console.error("导出图片失败:", error);
@@ -98,7 +98,7 @@ export class ExportManager {
    expPicType,
    isRedGreenMode,
    restoreOpacityInRedGreen,
-		isCropByBg,
+		isCropByBg, // 是否使用背景大小裁剪
 		isEnhanceImg, // 是否是增强图片
  ) {
    if (!this.layerManager) {
@@ -127,7 +127,9 @@ export class ExportManager {
      return this._exportWithRedGreenMode(
        objectsToExport,
        expPicType,
-        restoreOpacityInRedGreen
+        restoreOpacityInRedGreen,
+				isCropByBg, // 是否使用背景大小裁剪
+				isEnhanceImg, // 是否是增强图片
      );
    }

@@ -149,7 +151,7 @@ export class ExportManager {
   * @param {Boolean} isContainFixed 是否包含固定图层
   * @param {Boolean} isRedGreenMode 是否为红绿图模式
   * @param {Boolean} restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
-   * @param {Boolean} isCropByBg 是否根据背景裁剪
+	 * @param {Boolean} isCropByBg 是否使用背景大小裁剪
 	 * @param {Boolean} isEnhanceImg 是否是增强图片
   * @returns {String} 图片数据URL
   * @private
@@ -161,7 +163,7 @@ export class ExportManager {
    isContainFixed,
    isRedGreenMode,
    restoreOpacityInRedGreen,
-    isCropByBg, // 是否根据背景裁剪
+    isCropByBg, // 是否使用背景大小裁剪
 		isEnhanceImg, // 是否是增强图片
  ) {
    if (!this.layerManager) {
@@ -194,7 +196,7 @@ export class ExportManager {
      objectsToExport,
      expPicType,
      restoreOpacityInRedGreen,
-			isCropByBg, // 是否根据背景裁剪
+			isCropByBg, // 是否使用背景大小裁剪
 			isEnhanceImg, // 是否是增强图片
    );
  }
@@ -206,7 +208,7 @@ export class ExportManager {
   * @param {Boolean} isContainFixed 是否包含固定图层
   * @param {Boolean} isRedGreenMode 是否为红绿图模式
   * @param {Boolean} restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
-	 * @param {Boolean} isCropByBg 是否根据背景裁剪
+	 * @param {Boolean} isCropByBg 是否使用背景大小裁剪
 	 * @param {Boolean} isEnhanceImg 是否是增强图片
   * @returns {String} 图片数据URL
   * @private
@@ -217,8 +219,8 @@ export class ExportManager {
    isContainFixed,
    isRedGreenMode,
    restoreOpacityInRedGreen,
-    isCropByBg,
-		isEnhanceImg
+    isCropByBg, // 是否使用背景大小裁剪
+		isEnhanceImg, // 是否是增强图片
  ) {
    // 按图层顺序收集对象（从底到顶）
    const objectsToExport = this._collectObjectsByLayerOrder(
@@ -272,7 +274,7 @@ export class ExportManager {
      expPicType,
      restoreOpacityInRedGreen,
      canvasClipPath,
-			isCropByBg, // 是否根据背景裁剪
+			isCropByBg, // 是否使用背景大小裁剪
 			isEnhanceImg, // 是否是增强图片
    );
  }
@@ -635,7 +637,7 @@ export class ExportManager {
    objectsToExport,
    expPicType,
    restoreOpacityInRedGreen,
-    maskObject,
+    maskObject, // 裁剪对象
 		isCropByBg, // 是否使用背景大小裁剪
 		isEnhanceImg, // 是否是增强图片
  ) {
@@ -656,7 +658,7 @@ export class ExportManager {
      trimWhitespace: true, // 裁剪空白
      trimPadding: 0, // 裁剪边距
      restoreOpacityInRedGreen,
-			isCropByBg, // 是否根据背景裁剪
+			isCropByBg, // 是否使用背景大小裁剪
 			isEnhanceImg, // 是否是增强图片
    });

--- a/src/component/Canvas/CanvasEditor/utils/selectionToImage.js
+++ b/src/component/Canvas/CanvasEditor/utils/selectionToImage.js
@@ -42,7 +42,7 @@ export const createRasterizedImage = async ({
        clippingObject,
        isReturenDataURL,
        selectionManager, // 传递选区管理器
-        isEnhanceImg, // 是否是增强图片
+				isEnhanceImg, // 是否是增强图片
      });
    }

@@ -83,7 +83,7 @@ const createClippedObjects = async ({
  clippingObject,
  isReturenDataURL,
  selectionManager = null, // 新增选区管理器参数
-  isEnhanceImg, // 是否是增强图片
+	isEnhanceImg, // 是否是增强图片
 }) => {
  try {
    console.log("🎯 使用新的图像遮罩裁剪方法创建对象");
@@ -113,7 +113,7 @@ const createClippedObjects = async ({
        clippingObject,
        selectionBounds: optimizedBounds, // 使用优化后的边界框
        featherAmount,
-        isEnhanceImg, // 是否是增强图片
+				isEnhanceImg, // 是否是增强图片
      });
    }

@@ -124,7 +124,7 @@ const createClippedObjects = async ({
      clippingObject,
      selectionBounds: optimizedBounds, // 使用优化后的边界框
      featherAmount,
-      isEnhanceImg, // 是否是增强图片
+			isEnhanceImg, // 是否是增强图片
    });

    // 将DataURL转换为fabric.Image对象
@@ -178,7 +178,7 @@ const createClippedDataURLByCanvas = async ({
  clippingObject,
  selectionBounds,
  featherAmount = 0,
-	isEnhanceImg = false, // 是否是增强图片
+  isEnhanceImg = false, // 是否是增强图片
 }) => {
  try {
    console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL");
@@ -192,7 +192,7 @@ const createClippedDataURLByCanvas = async ({
    // 使用高分辨率以保证质量
    const pixelRatio = window.devicePixelRatio || 1;
 		const qualityMultiplier = !!isEnhanceImg ? Math.max(2, pixelRatio) : 1;
-
+		
 		console.log("使用高分辨率以保证质量:" + isEnhanceImg, optimizedBounds);

    const canvasWidth = Math.ceil(optimizedBounds.width * qualityMultiplier);
@@ -463,7 +463,7 @@ const createLegacyRasterization = async ({
  quality,
  format,
  isReturenDataURL,
-  isCropByBg, // 是否根据背景裁剪
+	isCropByBg, // 是否根据背景裁剪
 	isEnhanceImg, // 是否是增强图片
 }) => {
  console.log("⚠️ 使用兼容的离屏渲染方法");
@@ -491,7 +491,7 @@ const createLegacyRasterization = async ({
    format,
    currentZoom,
    isReturenDataURL,
-    isCropByBg, // 是否根据背景裁剪
+		isCropByBg, // 是否根据背景裁剪
 		isEnhanceImg, // 是否是增强图片
  });
 };