合并画布

src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js

@@ -480,6 +480,12 @@ export class ChangeFixedImageCommand extends Command {
     this.position.x = options.left || this.canvas.width / 2;
     this.position.y = options.top || this.canvas.height / 2;
 
+    this.canvasWidth = options?.canvasWidth?.value || this.canvas.width;
+    this.canvasHeight = options?.canvasHeight?.value || this.canvas.height;
+
+    // 底图加载方式   1.平铺   2.拉伸   3.拉伸平铺  4.拉伸平铺并裁剪  5.包含
+    this.imageMode = options?.imageMode || ""; // 默认 contains, stretch,tile， stretchTile, stretchTileCrop
+
     // 用于回滚的状态
     this.previousImage = null;
     this.previousTransform = null;
@@ -679,6 +685,7 @@ export class ChangeFixedImageCommand extends Command {
   async applyImageToLayer(newImage) {
     await optimizeCanvasRendering(this.canvas, async () => {
       // 设置基本属性
+
       newImage.set({
         id: this.targetLayer?.fabricObject?.id || this.newObjectId,
         layerId: this.targetLayer.id,
@@ -718,6 +725,49 @@ export class ChangeFixedImageCommand extends Command {
         });
       }
 
+      // 如果是包含  则需要根据图像模式调整大小
+      switch (this.imageMode) {
+        case "stretch":
+          // 拉伸模式 - 填充整个画布
+          newImage.scaleToWidth(this.canvasWidth);
+          newImage.scaleToHeight(this.canvasHeight);
+          break;
+        case "tile":
+          // 平铺模式 - 保持原始大小
+          newImage.scaleX = 1;
+          newImage.scaleY = 1;
+          break;
+        case "stretchTile":
+          // 拉伸平铺模式 - 填充整个画布，但保持宽高比
+          newImage.scaleToWidth(this.canvasWidth);
+          newImage.scaleToHeight(this.canvasHeight);
+          break;
+        case "stretchTileCrop":
+          // 拉伸平铺并裁剪模式 - 填充整个画布，可能
+          // 会裁剪图像以适应画布
+          newImage.scaleToWidth(this.canvasWidth);
+          newImage.scaleToHeight(this.canvasHeight);
+          // 这里可以添加裁剪逻辑，如果需要的话
+          // 例如使用fabric.Image.clipPath来裁剪图像
+          break;
+        case "contains":
+          // 包含模式 - 保证图像在画布内完整显示
+          // 既要考虑画布的宽高比，也要考虑图像的宽高比
+          // 图片缩放后要保证最长边能完全显示在画布内
+          const canvasAspect = this.canvasWidth / this.canvasHeight;
+          const imageAspect = newImage.width / newImage.height;
+          // 保证图像在画布内完整显示 - 既要考虑画布的宽高比，也要考虑图像的宽高比
+          // 图片缩放后要保证最长边能完全显示在画布内
+          if (imageAspect > canvasAspect) {
+            // 图像更宽
+            newImage.scaleToWidth(this.canvasWidth);
+          } else {
+            // 图像更高
+            newImage.scaleToHeight(this.canvasHeight);
+          }
+          break;
+      }
+
       // 使用帮助函数在指定z-index位置插入新图像
       if (this.previousZIndex !== undefined && this.previousZIndex >= 0) {
         const insertSuccess = insertObjectAtZIndex(