@react-native-ohos/react-native-image-crop-picker 0.40.4 → 0.40.5-rc.11

package/harmony/image_crop_picker/src/main/ets/pages/ImageEditInfo.ets

@@ -126,6 +126,7 @@ export struct ImageEditInfo {
   @State imageFlag: boolean = true;
   @State angle: number = 0;
   @State rotateValue: number = 0;
+  @State tempClipDuringDrag: Rectangle = new Rectangle(0, 0, 0, 0);
   private minSize = PHONE_MIN_CROP // 最小宽高
   private dragObj: DragObj = new DragObj(false);
   private clb: number = 1
@@ -144,11 +145,92 @@ export struct ImageEditInfo {
             this.imageHeight = imageInfo.size == undefined ? 0 : imageInfo.size?.height;
             this.imageWith = imageInfo.size == undefined ? 0 : imageInfo.size?.width;
             this.initCropBox(this.imageWith, this.imageHeight, this.screenWidth, this.screenHeight);
+
+            // 初始化后进行一次边界检查
+            this.checkAndAdjustCropSize();
           })
         }
       })
   }
 
+  // 检查并调整裁剪框大小，确保不超过图片显示范围
+  private checkAndAdjustCropSize(): void {
+    const imgHeight = Math.round(this.imageHeight / this.clb);
+    const imgWidth = Math.round(this.imageWith / this.clb);
+
+    let width = this.clipSize.width();
+    let height = this.clipSize.height();
+
+    // 如果裁剪框比图片显示区域大，则调整到图片显示区域大小
+    if (width > imgWidth) {
+      width = imgWidth;
+    }
+    if (height > imgHeight) {
+      height = imgHeight;
+    }
+
+    // 确保最小尺寸
+    width = Math.max(width, this.minSize);
+    height = Math.max(height, this.minSize);
+
+    // 重新计算位置，保持中心点不变
+    const centerX = this.clipSize.left + this.clipSize.width() / 2;
+    const centerY = this.clipSize.top + this.clipSize.height() / 2;
+
+    const newLeft = centerX - width / 2;
+    const newTop = centerY - height / 2;
+    const newRight = newLeft + width;
+    const newBottom = newTop + height;
+
+    // 确保在最大区域内
+    const constrainedLeft = Math.max(newLeft, this.maxClipSize.left);
+    const constrainedTop = Math.max(newTop, this.maxClipSize.top);
+    const constrainedRight = Math.min(newRight, this.maxClipSize.right);
+    const constrainedBottom = Math.min(newBottom, this.maxClipSize.bottom);
+
+    // 如果约束导致尺寸变化，重新计算
+    const finalWidth = constrainedRight - constrainedLeft;
+    const finalHeight = constrainedBottom - constrainedTop;
+
+    if (finalWidth < this.minSize || finalHeight < this.minSize) {
+      // 如果约束后小于最小尺寸，调整到最小尺寸
+      const adjustedRect = this.adjustToMinSize(constrainedLeft, constrainedTop, constrainedRight, constrainedBottom);
+      this.clipSize = adjustedRect;
+    } else {
+      this.clipSize = new Rectangle(constrainedLeft, constrainedTop, constrainedRight, constrainedBottom);
+    }
+  }
+
+  // 调整到最小尺寸
+  private adjustToMinSize(left: number, top: number, right: number, bottom: number): Rectangle {
+    let width = right - left;
+    let height = bottom - top;
+
+    if (width < this.minSize) {
+      width = this.minSize;
+    }
+    if (height < this.minSize) {
+      height = this.minSize;
+    }
+
+    // 保持中心点
+    const centerX = (left + right) / 2;
+    const centerY = (top + bottom) / 2;
+
+    const newLeft = centerX - width / 2;
+    const newTop = centerY - height / 2;
+    const newRight = newLeft + width;
+    const newBottom = newTop + height;
+
+    // 再次确保在最大区域内
+    return new Rectangle(
+      Math.max(newLeft, this.maxClipSize.left),
+      Math.max(newTop, this.maxClipSize.top),
+      Math.min(newRight, this.maxClipSize.right),
+      Math.min(newBottom, this.maxClipSize.bottom)
+    );
+  }
+
   resetImg(): void {
     this.imgScale = 1;
     this.currentScale = 1;
@@ -156,6 +238,7 @@ export struct ImageEditInfo {
     this.preOffsetY = 0;
   }
 
+  // 修改 initCropBox 方法中的相关部分
   initCropBox(imageWidth: number, imageHeight: number, screenWidth: number, screenHeight: number) {
     if (imageHeight / imageWidth < screenHeight / screenWidth) {
       this.clb = imageWidth / (screenWidth - hotspotsWidth * 2);
@@ -172,13 +255,40 @@ export struct ImageEditInfo {
 
     this.maxClipSize = new Rectangle(left, top, right, bottom);
 
+    // 计算初始裁剪框尺寸
+    let initCropWidth = this.initWidth;
+    let initCropHeight = this.initHeight;
+
+    // 如果初始宽高比图片显示宽高大，则使用图片的显示宽高
+    if (initCropWidth > imgWidth) {
+      initCropWidth = imgWidth;
+    }
+    if (initCropHeight > imgHeight) {
+      initCropHeight = imgHeight;
+    }
+
+    // 确保裁剪框不超过图片显示范围
+    initCropWidth = Math.min(initCropWidth, imgWidth);
+    initCropHeight = Math.min(initCropHeight, imgHeight);
+
+    // 确保最小尺寸
+    initCropWidth = Math.max(initCropWidth, this.minSize);
+    initCropHeight = Math.max(initCropHeight, this.minSize);
+
     if (this.initWidth > 0) {
-      left = (screenWidth - this.initWidth) / 2;
-      right = this.initWidth + left;
+      left = (screenWidth - initCropWidth) / 2;
+      right = initCropWidth + left;
+    } else {
+      left = (screenWidth - imgWidth) / 2;
+      right = imgWidth + left;
     }
+
     if (this.initHeight > 0) {
-      top = (screenHeight - this.initHeight) / 2 - 66;
-      bottom = this.initHeight + top;
+      top = (screenHeight - initCropHeight) / 2 - 66;
+      bottom = initCropHeight + top;
+    } else {
+      top = (screenHeight - imgHeight) / 2 - 66;
+      bottom = imgHeight + top;
     }
 
     this.clipSize = new Rectangle(left, top, right, bottom);
@@ -190,7 +300,8 @@ export struct ImageEditInfo {
   }
 
   aboutToDisappear(): void {
-    let arrayData = ['filePath', 'textTitle', 'chooseText', 'chooseTextColor', 'cancelText', 'cancelTextColor', 'cropperRotate'];
+    let arrayData =
+      ['filePath', 'textTitle', 'chooseText', 'chooseTextColor', 'cancelText', 'cancelTextColor', 'cropperRotate'];
     this.clearData(arrayData);
   }
 
@@ -202,13 +313,21 @@ export struct ImageEditInfo {
 
   @Builder
   CropTitleBar() {
+    Text('')
+      .fontColor(Color.White)
+      .fontSize(20)
+      .textAlign(TextAlign.Center)
+      .width('100%')
+      .height(35)
+      .position({ x: 0, y: 0 })
+      .backgroundColor(Color.Black)
     Text(this.title)
       .fontColor(Color.White)
       .fontSize(20)
       .textAlign(TextAlign.Center)
       .width('100%')
-      .height(46)
-      .position({ x: 0, y: 20 })
+      .height(40)
+      .position({ x: 0, y: 35 })
       .backgroundColor(Color.Black)
   }
 
@@ -263,6 +382,12 @@ export struct ImageEditInfo {
         .onActionUpdate((event?: GestureEvent) => {
           if (event) {
             this.imgScale = this.currentScale * event.scale;
+
+            // 缩放时保持图片居中
+            this.adjustImageForCentering();
+
+            // 实时检查并调整裁剪框，防止超出图片范围
+            this.constrainCropBoxInRealTime();
           }
         })
         .onActionEnd(() => {
@@ -270,8 +395,14 @@ export struct ImageEditInfo {
             this.resetImg();
             this.imgOffSetX = 0;
             this.imgOffSetY = 0;
+            // 重置后检查裁剪框
+            this.constrainCropBoxInRealTime();
           } else {
             this.currentScale = this.imgScale;
+            // 缩放结束后确保图片位置正确
+            this.ensureImagePosition();
+            // 缩放结束后检查并调整裁剪框
+            this.constrainCropBoxInRealTime();
           }
         }),
       PanGesture()
@@ -281,10 +412,22 @@ export struct ImageEditInfo {
         })
         .onActionUpdate((event?: GestureEvent) => {
           if (event && this.imageFlag) {
-            this.imgOffSetX = this.preOffsetX + event.offsetX;
-            this.imgOffSetY = this.preOffsetY + event.offsetY;
-            Logger.info(TAG, "into flushPixelMapChange x : " + this.imgOffSetX + " y : " + this.imgOffSetY)
+            // 限制拖动的边界，确保图片不会被拖出裁剪区域太多
+            const maxOffsetX = this.getMaxHorizontalOffset();
+            const maxOffsetY = this.getMaxVerticalOffset();
+
+            this.imgOffSetX = Math.max(-maxOffsetX, Math.min(maxOffsetX, this.preOffsetX + event.offsetX));
+            this.imgOffSetY = Math.max(-maxOffsetY, Math.min(maxOffsetY, this.preOffsetY + event.offsetY));
+
+            // 图片拖动时实时检查裁剪框
+            this.constrainCropBoxInRealTime();
           }
+        })
+        .onActionEnd(() => {
+          // 拖动结束后，自动调整图片位置使其在裁剪框内居中
+          this.adjustImageToCenter();
+          // 拖动结束后再次检查
+          this.constrainCropBoxToImageBounds();
         }),
       RotationGesture()
         .onActionEnd((event: GestureEvent) => {
@@ -303,6 +446,338 @@ export struct ImageEditInfo {
         })
     ))
   }
+  // 添加实时约束裁剪框的方法
+  private constrainCropBoxInRealTime(): void {
+    const imageDisplayBounds = this.getImageDisplayBounds();
+    const cropBox = this.clipSize;
+
+    // 如果裁剪框完全超出图片范围，需要立即调整
+    if (cropBox.left < imageDisplayBounds.left - 5 ||
+      cropBox.top < imageDisplayBounds.top - 5 ||
+      cropBox.right > imageDisplayBounds.right + 5 ||
+      cropBox.bottom > imageDisplayBounds.bottom + 5) {
+
+      this.constrainCropBoxToImageBounds();
+    }
+  }
+
+  // 修改约束裁剪框到图片边界的方法，使其更实时响应
+  private constrainCropBoxToImageBounds(): void {
+    const imageDisplayBounds = this.getImageDisplayBounds();
+
+    let left = this.clipSize.left;
+    let top = this.clipSize.top;
+    let right = this.clipSize.right;
+    let bottom = this.clipSize.bottom;
+
+    // 检查并调整裁剪框，确保在图片显示范围内
+    const needsAdjustment =
+      left < imageDisplayBounds.left ||
+        top < imageDisplayBounds.top ||
+        right > imageDisplayBounds.right ||
+        bottom > imageDisplayBounds.bottom;
+
+    if (!needsAdjustment) {
+      return;
+    }
+
+    // 计算图片显示区域
+    const imageLeft = imageDisplayBounds.left;
+    const imageTop = imageDisplayBounds.top;
+    const imageRight = imageDisplayBounds.right;
+    const imageBottom = imageDisplayBounds.bottom;
+
+    // 约束裁剪框位置
+    left = Math.max(left, imageLeft);
+    top = Math.max(top, imageTop);
+    right = Math.min(right, imageRight);
+    bottom = Math.min(bottom, imageBottom);
+
+    // 确保最小尺寸
+    const width = right - left;
+    const height = bottom - top;
+
+    if (width < this.minSize) {
+      if (left === imageLeft) {
+        // 如果已经在最左边，向右扩展
+        right = left + this.minSize;
+        if (right > imageRight) {
+          right = imageRight;
+          left = right - this.minSize;
+        }
+      } else if (right === imageRight) {
+        // 如果已经在最右边，向左扩展
+        left = right - this.minSize;
+        if (left < imageLeft) {
+          left = imageLeft;
+          right = left + this.minSize;
+        }
+      } else {
+        // 否则居中调整
+        const centerX = (left + right) / 2;
+        left = centerX - this.minSize / 2;
+        right = centerX + this.minSize / 2;
+
+        // 确保在边界内
+        if (left < imageLeft) {
+          const offset = imageLeft - left;
+          left += offset;
+          right += offset;
+        }
+        if (right > imageRight) {
+          const offset = right - imageRight;
+          left -= offset;
+          right -= offset;
+        }
+      }
+    }
+
+    if (height < this.minSize) {
+      if (top === imageTop) {
+        // 如果已经在最上边，向下扩展
+        bottom = top + this.minSize;
+        if (bottom > imageBottom) {
+          bottom = imageBottom;
+          top = bottom - this.minSize;
+        }
+      } else if (bottom === imageBottom) {
+        // 如果已经在最下边，向上扩展
+        top = bottom - this.minSize;
+        if (top < imageTop) {
+          top = imageTop;
+          bottom = top + this.minSize;
+        }
+      } else {
+        // 否则居中调整
+        const centerY = (top + bottom) / 2;
+        top = centerY - this.minSize / 2;
+        bottom = centerY + this.minSize / 2;
+
+        // 确保在边界内
+        if (top < imageTop) {
+          const offset = imageTop - top;
+          top += offset;
+          bottom += offset;
+        }
+        if (bottom > imageBottom) {
+          const offset = bottom - imageBottom;
+          top -= offset;
+          bottom -= offset;
+        }
+      }
+    }
+
+    // 如果宽高比固定，需要保持比例
+    if (this.clipRatio > 0) {
+      const currentWidth = right - left;
+      const currentHeight = bottom - top;
+      const currentRatio = currentWidth / currentHeight;
+
+      if (Math.abs(currentRatio - this.clipRatio) > 0.01) {
+        const centerX = (left + right) / 2;
+        const centerY = (top + bottom) / 2;
+
+        let newWidth = 0, newHeight = 0;
+        if (currentRatio > this.clipRatio) {
+          // 太宽，需要减小宽度
+          newHeight = currentHeight;
+          newWidth = newHeight * this.clipRatio;
+        } else {
+          // 太高，需要减小高度
+          newWidth = currentWidth;
+          newHeight = newWidth / this.clipRatio;
+        }
+
+        // 确保最小尺寸
+        newWidth = Math.max(newWidth, this.minSize);
+        newHeight = Math.max(newHeight, this.minSize);
+
+        left = centerX - newWidth / 2;
+        right = centerX + newWidth / 2;
+        top = centerY - newHeight / 2;
+        bottom = centerY + newHeight / 2;
+
+        // 再次确保在边界内
+        left = Math.max(left, imageLeft);
+        top = Math.max(top, imageTop);
+        right = Math.min(right, imageRight);
+        bottom = Math.min(bottom, imageBottom);
+      }
+    }
+
+    // 应用调整后的裁剪框
+    this.clipSize = new Rectangle(left, top, right, bottom);
+  }
+
+  private getImageDisplayBounds(): Rectangle {
+
+    // 计算不考虑缩放和偏移时的图片显示区域（基于 maxClipSize）
+    const containerLeft = this.maxClipSize.left;
+    const containerTop = this.maxClipSize.top;
+    const containerRight = this.maxClipSize.right;
+    const containerBottom = this.maxClipSize.bottom;
+
+    const containerWidth = containerRight - containerLeft;
+    const containerHeight = containerBottom - containerTop;
+
+    // 图片的实际显示尺寸（考虑缩放）
+    const scaledWidth = containerWidth * this.imgScale;
+    const scaledHeight = containerHeight * this.imgScale;
+
+    // 图片中心点位置（考虑偏移）
+    const containerCenterX = (containerLeft + containerRight) / 2;
+    const containerCenterY = (containerTop + containerBottom) / 2;
+
+    const centerX = containerCenterX + this.imgOffSetX;
+    const centerY = containerCenterY + this.imgOffSetY;
+
+    // 计算图片的实际显示边界
+    const left = centerX - scaledWidth / 2;
+    const top = centerY - scaledHeight / 2;
+    const right = left + scaledWidth;
+    const bottom = top + scaledHeight;
+
+    return new Rectangle(left, top, right, bottom);
+  }
+
+  // 获取图片可以水平移动的最大偏移量
+  private getMaxHorizontalOffset(): number {
+    const imageDisplayBounds = this.getImageDisplayBounds();
+    const cropBounds = this.clipSize;
+
+    // 计算图片超出裁剪框的部分
+    const imageWidth = imageDisplayBounds.width();
+    const cropWidth = cropBounds.width();
+
+    if (imageWidth <= cropWidth) {
+      // 图片比裁剪框小或相等，不需要偏移
+      return 0;
+    }
+
+    // 图片比裁剪框大，可以偏移的量为图片超出裁剪框宽度的一半
+    return Math.max(0, (imageWidth - cropWidth) / 2);
+  }
+
+  // 获取图片可以垂直移动的最大偏移量
+  private getMaxVerticalOffset(): number {
+    const imageDisplayBounds = this.getImageDisplayBounds();
+    const cropBounds = this.clipSize;
+
+    // 计算图片超出裁剪框的部分
+    const imageHeight = imageDisplayBounds.height();
+    const cropHeight = cropBounds.height();
+
+    if (imageHeight <= cropHeight) {
+      // 图片比裁剪框小或相等，不需要偏移
+      return 0;
+    }
+
+    // 图片比裁剪框大，可以偏移的量为图片超出裁剪框高度的一半
+    return Math.max(0, (imageHeight - cropHeight) / 2);
+  }
+
+  private adjustImageToCenter(): void {
+
+    // 只进行边界检查，不自动调整位置
+    const imageDisplayBounds = this.getImageDisplayBounds();
+    const cropBounds = this.clipSize;
+
+    // 检查裁剪框是否完全在图片范围内，如果超出则进行微调
+    const tolerance = 5; // 调整的阈值
+
+    let deltaX = 0;
+    let deltaY = 0;
+
+    // 只有在超出阈值时才进行调整
+    if (cropBounds.left < imageDisplayBounds.left - tolerance) {
+      deltaX = imageDisplayBounds.left - cropBounds.left;
+    } else if (cropBounds.right > imageDisplayBounds.right + tolerance) {
+      deltaX = imageDisplayBounds.right - cropBounds.right;
+    }
+
+    if (cropBounds.top < imageDisplayBounds.top - tolerance) {
+      deltaY = imageDisplayBounds.top - cropBounds.top;
+    } else if (cropBounds.bottom > imageDisplayBounds.bottom + tolerance) {
+      deltaY = imageDisplayBounds.bottom - cropBounds.bottom;
+    }
+
+    // 如果需要进行调整，则应用
+    if (deltaX !== 0 || deltaY !== 0) {
+      const maxOffsetX = this.getMaxHorizontalOffset();
+      const maxOffsetY = this.getMaxVerticalOffset();
+
+      if (imageDisplayBounds.width() <= cropBounds.width()) {
+        this.imgOffSetX = 0;
+      } else {
+        this.imgOffSetX = Math.max(-maxOffsetX, Math.min(maxOffsetX, this.imgOffSetX + deltaX));
+      }
+
+      if (imageDisplayBounds.height() <= cropBounds.height()) {
+        this.imgOffSetY = 0;
+      } else {
+        this.imgOffSetY = Math.max(-maxOffsetY, Math.min(maxOffsetY, this.imgOffSetY + deltaY));
+      }
+    }
+  }
+
+  // 缩放时保持图片居中
+  private adjustImageForCentering(): void {
+    if (this.imgScale <= 1) {
+      // 缩放比例小于等于1时，图片居中
+      this.imgOffSetX = 0;
+      this.imgOffSetY = 0;
+    } else {
+      // 放大时，根据当前缩放比例调整位置，保持裁剪框在图片中心
+      const currentCenterX = this.screenWidth / 2;
+      const currentCenterY = (this.screenHeight - 66) / 2;
+
+      const imageDisplayBounds = this.getImageDisplayBounds();
+      const cropBounds = this.clipSize;
+
+      // 确保裁剪框在图片显示范围内
+      if (imageDisplayBounds.width() > cropBounds.width()) {
+        const cropCenterX = cropBounds.left + cropBounds.width() / 2;
+        const deltaX = cropCenterX - currentCenterX;
+        this.imgOffSetX = Math.max(-this.getMaxHorizontalOffset(),
+          Math.min(this.getMaxHorizontalOffset(),
+            this.imgOffSetX + deltaX * 0.1));
+      }
+
+      if (imageDisplayBounds.height() > cropBounds.height()) {
+        const cropCenterY = cropBounds.top + cropBounds.height() / 2;
+        const deltaY = cropCenterY - currentCenterY;
+        this.imgOffSetY = Math.max(-this.getMaxVerticalOffset(),
+          Math.min(this.getMaxVerticalOffset(),
+            this.imgOffSetY + deltaY * 0.1));
+      }
+    }
+  }
+
+  // 确保图片位置正确（缩放结束后调用）
+  private ensureImagePosition(): void {
+    const imageDisplayBounds = this.getImageDisplayBounds();
+    const cropBounds = this.clipSize;
+
+    // 如果图片比裁剪框小，居中显示
+    if (imageDisplayBounds.width() <= cropBounds.width() &&
+      imageDisplayBounds.height() <= cropBounds.height()) {
+      this.imgOffSetX = 0;
+      this.imgOffSetY = 0;
+      return;
+    }
+
+    // 检查图片是否完全覆盖裁剪框
+    const imageCoversCrop =
+      imageDisplayBounds.left <= cropBounds.left &&
+        imageDisplayBounds.top <= cropBounds.top &&
+        imageDisplayBounds.right >= cropBounds.right &&
+        imageDisplayBounds.bottom >= cropBounds.bottom;
+
+    if (!imageCoversCrop) {
+      // 调整图片位置，确保裁剪框在图片范围内
+      this.adjustImagePositionToFitCrop();
+    }
+  }
 
   @Builder
   BottomToolbar() {
@@ -356,25 +831,30 @@ export struct ImageEditInfo {
         .fontColor(this.chooseTextColor)
         .onClick(() => {
           if (this.icon) {
-            let cropHeight = this.angle % 180 ===0 ? this.imageHeight : this.imageWith
-            let cropWidth = this.angle % 180 ===0 ? this.imageWith : this.imageHeight
+            let cropHeight = this.angle % 180 === 0 ? this.imageHeight : this.imageWith
+            let cropWidth = this.angle % 180 === 0 ? this.imageWith : this.imageHeight
             let xOff = cropWidth * (this.imgScale - 1) / 2;
             let yOff = cropHeight * (this.imgScale - 1) / 2;
             let region: image.Region = { x: 0, y: 0, size: { height: cropHeight, width: cropWidth } };
             region.x =
-              (this.clipSize.left - this.maxClipSize.left) / this.imgScale * this.clb + (xOff / this.imgScale) - this.imgOffSetX / this.imgScale * this.clb;
-            region.size.width = cropWidth - region.x - (this.maxClipSize.right - this.clipSize.right) / this.imgScale * this.clb
-              - (xOff / this.imgScale) - this.imgOffSetX / this.imgScale * this.clb;
+              (this.clipSize.left - this.maxClipSize.left) / this.imgScale * this.clb + (xOff / this.imgScale) -
+                this.imgOffSetX / this.imgScale * this.clb;
+            region.size.width =
+              cropWidth - region.x - (this.maxClipSize.right - this.clipSize.right) / this.imgScale * this.clb
+                - (xOff / this.imgScale) - this.imgOffSetX / this.imgScale * this.clb;
             region.y =
-              (this.clipSize.top - this.maxClipSize.top) / this.imgScale * this.clb + (yOff / this.imgScale) - this.imgOffSetY / this.imgScale * this.clb;
-            region.size.height = cropHeight - region.y - (this.maxClipSize.bottom - this.clipSize.bottom) / this.imgScale * this.clb
-              - (yOff / this.imgScale) - this.imgOffSetY / this.imgScale * this.clb;
+              (this.clipSize.top - this.maxClipSize.top) / this.imgScale * this.clb + (yOff / this.imgScale) -
+                this.imgOffSetY / this.imgScale * this.clb;
+            region.size.height =
+              cropHeight - region.y - (this.maxClipSize.bottom - this.clipSize.bottom) / this.imgScale * this.clb
+                - (yOff / this.imgScale) - this.imgOffSetY / this.imgScale * this.clb;
             this.icon.crop(region, async (err: BusinessError) => {
               if (err != undefined) {
                 console.error("Failed to crop pixelmap.");
                 return;
               } else {
                 let imgPath = await encode(this, this.icon);
+
                 AppStorage.setOrCreate('cropImagePath', imgPath)
                 AppStorage.setOrCreate('cropRect', {
                   width: region.size.width,
@@ -389,7 +869,7 @@ export struct ImageEditInfo {
         })
     }
     .width('100%')
-    .height(56)
+    .height(66)
     .position({ x: 0, y: (this.screenHeight - 66) })
     .backgroundColor(Color.Black)
   }
@@ -406,6 +886,8 @@ export struct ImageEditInfo {
           .then(() => {
             this.angle = this.angle + Constants.CLOCK_WISE;
             this.flushPixelMapChange(this.angle);
+            // 旋转后约束裁剪框
+            this.constrainCropBoxToImageBounds();
           })
       } catch (error) {
       }
@@ -420,6 +902,8 @@ export struct ImageEditInfo {
           .then(() => {
             this.angle = this.angle + Constants.ANTI_CLOCK;
             this.flushPixelMapChange(this.angle);
+            // 旋转后约束裁剪框
+            this.constrainCropBoxToImageBounds();
           })
       } catch (error) {
       }
@@ -429,103 +913,289 @@ export struct ImageEditInfo {
   flushPixelMapChange(angle: number) {
     this.isPixelMapChange = !this.isPixelMapChange;
     let clipAngle = angle / 90;
+
+    // 根据旋转角度更新图片显示尺寸
     switch (Math.abs(clipAngle % 4)) {
       case 0:
       case 2:
-        this.initCropBox(this.imageWith, this.imageHeight, this.screenWidth, this.screenHeight);
+        // 0度或180度，宽高不变
+        this.updateMaxClipSize(this.imageWith, this.imageHeight);
         break;
       default:
-        this.initCropBox(this.imageHeight, this.imageWith, this.screenWidth, this.screenHeight);
+      // 90度或270度，宽高互换
+        this.updateMaxClipSize(this.imageHeight, this.imageWith);
         break;
     }
   }
 
+  updateMaxClipSize(imageWidth: number, imageHeight: number) {
+    if (imageHeight / imageWidth < (this.screenHeight - 132) / this.screenWidth) {
+      this.clb = imageWidth / (this.screenWidth - hotspotsWidth * 2);
+    } else {
+      this.clb = imageHeight / (this.screenHeight - hotspotsWidth * 2 - 66 * 2);
+    }
+
+    let imgHeight = Math.round(imageHeight / this.clb);
+    let imgWidth = Math.round(imageWidth / this.clb);
+
+    let left = (this.screenWidth - imgWidth) / 2;
+    let top = (this.screenHeight - imgHeight) / 2 - 66;
+    let right = imgWidth + left;
+    let bottom = imgHeight + top;
+
+    this.maxClipSize = new Rectangle(left, top, right, bottom);
+
+    // 重置裁剪框位置和大小，确保在最大区域内
+    this.resetCropBox();
+  }
+
+  resetCropBox() {
+    // 将裁剪框重置为最大区域的中心，大小调整为最大区域的80%（或保持最小尺寸）
+    const maxWidth = this.maxClipSize.width();
+    const maxHeight = this.maxClipSize.height();
+
+    const cropWidth = Math.max(this.minSize, maxWidth * 0.8);
+    const cropHeight = Math.max(this.minSize, maxHeight * 0.8);
+
+    const centerX = (this.maxClipSize.left + this.maxClipSize.right) / 2;
+    const centerY = (this.maxClipSize.top + this.maxClipSize.bottom) / 2;
+
+    const left = centerX - cropWidth / 2;
+    const top = centerY - cropHeight / 2;
+    const right = left + cropWidth;
+    const bottom = top + cropHeight;
+
+    this.clipSize = new Rectangle(left, top, right, bottom);
+  }
+
+  constrainClipToMaxBounds() {
+    let constrainedLeft = Math.max(this.clipSize.left, this.maxClipSize.left);
+    let constrainedTop = Math.max(this.clipSize.top, this.maxClipSize.top);
+    let constrainedRight = Math.min(this.clipSize.right, this.maxClipSize.right);
+    let constrainedBottom = Math.min(this.clipSize.bottom, this.maxClipSize.bottom);
+
+    // 如果裁剪框太小，调整到最小尺寸
+    if (constrainedRight - constrainedLeft < this.minSize) {
+      if (this.clipRatio > 0) {
+        // 有固定比例，保持比例调整
+        const width = this.minSize;
+        const height = width / this.clipRatio;
+        constrainedRight = constrainedLeft + width;
+        constrainedBottom = constrainedTop + height;
+      } else {
+        // 自由比例，只调整宽度
+        constrainedRight = constrainedLeft + this.minSize;
+      }
+    }
+
+    if (constrainedBottom - constrainedTop < this.minSize) {
+      if (this.clipRatio > 0) {
+        // 有固定比例，保持比例调整
+        const height = this.minSize;
+        const width = height * this.clipRatio;
+        constrainedRight = constrainedLeft + width;
+        constrainedBottom = constrainedTop + height;
+      } else {
+        // 自由比例，只调整高度
+        constrainedBottom = constrainedTop + this.minSize;
+      }
+    }
+
+    // 确保裁剪框在最大区域内
+    if (constrainedRight > this.maxClipSize.right) {
+      const overflow = constrainedRight - this.maxClipSize.right;
+      constrainedRight -= overflow;
+      constrainedLeft -= overflow;
+    }
+
+    if (constrainedBottom > this.maxClipSize.bottom) {
+      const overflow = constrainedBottom - this.maxClipSize.bottom;
+      constrainedBottom -= overflow;
+      constrainedTop -= overflow;
+    }
+
+    if (constrainedLeft < this.maxClipSize.left) {
+      const underflow = this.maxClipSize.left - constrainedLeft;
+      constrainedLeft += underflow;
+      constrainedRight += underflow;
+    }
+
+    if (constrainedTop < this.maxClipSize.top) {
+      const underflow = this.maxClipSize.top - constrainedTop;
+      constrainedTop += underflow;
+      constrainedBottom += underflow;
+    }
+
+    this.clipSize = new Rectangle(
+      constrainedLeft,
+      constrainedTop,
+      constrainedRight,
+      constrainedBottom
+    );
+  }
+
   flushPixelMap() {
     const temp = this.icon;
     this.icon = undefined;
     this.icon = temp;
   }
 
-  onDragStartFun = (event: TouchEvent, left: boolean, top: boolean, right: boolean, bottom: boolean, multiCrop: boolean): void => {
-    let downPos = new DownPos(this.clipSize.left, this.clipSize.top, this.clipSize.bottom, this.clipSize.right);
-    let action = new Action(left, top, right, bottom);
-    this.dragObj = new DragObj(true, event.touches[0].screenX, event.touches[0].screenY, action, downPos, multiCrop);
+  onDragStartFun =
+    (event: TouchEvent, left: boolean, top: boolean, right: boolean, bottom: boolean, multiCrop: boolean): void => {
+      let downPos = new DownPos(this.clipSize.left, this.clipSize.top, this.clipSize.bottom, this.clipSize.right);
+      let action = new Action(left, top, right, bottom);
+      this.dragObj = new DragObj(true, event.touches[0].screenX, event.touches[0].screenY, action, downPos, multiCrop);
+    }
+  private endImageDrag(): void {
+    // 移除强制调整逻辑，只在严重超出边界时进行调整
+    const imageDisplayBounds = this.getImageDisplayBounds();
+    const cropBounds = this.clipSize;
+
+    // 设置严重超出的阈值
+    const severeThreshold = 10;
+
+    const isSeverelyOutside =
+      cropBounds.left < imageDisplayBounds.left - severeThreshold ||
+        cropBounds.top < imageDisplayBounds.top - severeThreshold ||
+        cropBounds.right > imageDisplayBounds.right + severeThreshold ||
+        cropBounds.bottom > imageDisplayBounds.bottom + severeThreshold;
+
+    if (isSeverelyOutside) {
+      // 只有在严重超出时才调整
+      this.adjustImagePositionToFitCrop();
+    }
   }
 
-  private endImageDrag(): void {
-    // 图片的宽高
-    let imageWidth = this.imageHeight;
-    let imageHeight = this.imageWith;
-    if ([0, 2].includes(Math.abs((this.angle / 90) % 4))) {
-      imageWidth = this.imageWith;
-      imageHeight = this.imageHeight;
+  adjustImagePositionToFitCrop() {
+    const imageDisplayBounds = this.getImageDisplayBounds();
+    const cropBounds = this.clipSize;
+
+    // 只有当裁剪框完全超出图片时才调整
+    const needsAdjustment =
+      cropBounds.left < imageDisplayBounds.left ||
+        cropBounds.right > imageDisplayBounds.right ||
+        cropBounds.top < imageDisplayBounds.top ||
+        cropBounds.bottom > imageDisplayBounds.bottom;
+
+    if (!needsAdjustment) {
+      return;
     }
 
-    let crop: Rectangle = new Rectangle(this.clipSize.left, this.clipSize.top, this.clipSize.right, this.clipSize.bottom);
+    // 计算需要调整的偏移量
+    let deltaX = 0;
+    let deltaY = 0;
+
+    if (cropBounds.left < imageDisplayBounds.left) {
+      deltaX = imageDisplayBounds.left - cropBounds.left;
+    } else if (cropBounds.right > imageDisplayBounds.right) {
+      deltaX = imageDisplayBounds.right - cropBounds.right;
+    }
 
-    // 裁剪框和图片间的偏移量
-    let extraLeft = 0;
-    let extraTop = 0;
-    let extraRight = 0;
-    let extraBottom = 0;
+    if (cropBounds.top < imageDisplayBounds.top) {
+      deltaY = imageDisplayBounds.top - cropBounds.top;
+    } else if (cropBounds.bottom > imageDisplayBounds.bottom) {
+      deltaY = imageDisplayBounds.bottom - cropBounds.bottom;
+    }
 
-    // 图片实际的宽高
-    let actualHeight = 0;
-    let actualWidth = 0;
+    // 计算图片可移动的最大范围
+    const maxOffsetX = this.getMaxHorizontalOffset();
+    const maxOffsetY = this.getMaxVerticalOffset();
 
-    // 图片偏移量
-    let imgOffSetX = this.imgOffSetX;
-    let imgOffSetY = this.imgOffSetY;
+    // 应用调整，但要确保不会超出范围
+    if (deltaX !== 0 && maxOffsetX > 0) {
+      this.imgOffSetX = Math.max(-maxOffsetX, Math.min(maxOffsetX, this.imgOffSetX + deltaX));
+    }
 
-    // 图片缩放偏移量
-    let scaleOffsetX = 0;
-    let scaleOffsetY = 0;
+    if (deltaY !== 0 && maxOffsetY > 0) {
+      this.imgOffSetY = Math.max(-maxOffsetY, Math.min(maxOffsetY, this.imgOffSetY + deltaY));
+    }
+  }
 
-    // 根据图片宽高比计算实际的图片宽高和偏移量
-    // 计算图片的实际宽高和实际偏移量
-    actualHeight = Math.round(imageHeight / this.clb);
-    actualWidth = Math.round(imageWidth / this.clb);
-    extraLeft = (this.screenWidth - actualWidth) / 2;
-    extraTop = (this.screenHeight - actualHeight) / 2 - 66;
-    extraRight = actualWidth + extraLeft;
-    extraBottom = actualHeight + extraTop;
+  forceCropInsideImage() {
+    const imageDisplayBounds = this.getImageDisplayBounds();
 
-    // 计算缩放偏移量
-    scaleOffsetX = this.imgScale > 1 ? 0 - ((extraRight - extraLeft) * this.imgScale - (extraRight - extraLeft)) / 2 : 0;
-    scaleOffsetY = this.imgScale > 1 ? 0 - ((extraBottom - extraTop) * this.imgScale - (extraBottom - extraTop)) / 2 : 0;
+    // 设置允许超出的范围
+    const tolerance = 10;
 
-    // 计算图片四个边缘的位置
-    const imageRight = this.imgOffSetX + actualWidth;
-    const imageBottom = this.imgOffSetY + actualHeight;
+    let left = this.clipSize.left;
+    let top = this.clipSize.top;
+    let right = this.clipSize.right;
+    let bottom = this.clipSize.bottom;
 
-    // 计算裁剪框四个边缘的位置
-    const cropRight = crop.right
-    const cropBottom = crop.bottom;
+    // 只有在超出容忍范围时才进行调整
+    const needAdjustLeft = left < imageDisplayBounds.left - tolerance;
+    const needAdjustTop = top < imageDisplayBounds.top - tolerance;
+    const needAdjustRight = right > imageDisplayBounds.right + tolerance;
+    const needAdjustBottom = bottom > imageDisplayBounds.bottom + tolerance;
 
-    // 判断图片左边缘是否在裁剪框内
-    if (this.imgOffSetX + scaleOffsetX > crop.left - extraLeft) {
-      // 图片左边缘已经被拖动到裁剪框内，需要还原位置
-      imgOffSetX = crop.left - extraLeft - scaleOffsetX;
+    if (needAdjustLeft) {
+      left = Math.max(left, imageDisplayBounds.left);
+    }
+    if (needAdjustTop) {
+      top = Math.max(top, imageDisplayBounds.top);
+    }
+    if (needAdjustRight) {
+      right = Math.min(right, imageDisplayBounds.right);
+    }
+    if (needAdjustBottom) {
+      bottom = Math.min(bottom, imageDisplayBounds.bottom);
     }
 
-    // 判断图片上边缘是否在裁剪框内
-    if (this.imgOffSetY + scaleOffsetY > crop.top - extraTop) {
-      // 图片上边缘已经被拖动到裁剪框内，需要还原位置
-      imgOffSetY = crop.top - extraTop - scaleOffsetY;
+    // 保持比例
+    if (this.clipRatio > 0) {
+      const width = right - left;
+      const height = bottom - top;
+      const currentRatio = width / height;
+
+      if (Math.abs(currentRatio - this.clipRatio) > 0.01) {
+        // 需要调整以保持比例
+        const targetWidth = height * this.clipRatio;
+        const targetHeight = width / this.clipRatio;
+
+        if (targetWidth <= width) {
+          right = left + targetWidth;
+        } else {
+          bottom = top + targetHeight;
+        }
+      }
     }
 
-    // 判断图片右边缘是否在裁剪框内
-    if (imageRight - scaleOffsetX < cropRight - extraLeft) {
-      imgOffSetX = cropRight - extraRight + scaleOffsetX;
+    this.clipSize = new Rectangle(left, top, right, bottom);
+  }
+
+  // 拖动结束后让裁剪框和图像内容居中
+  private centerCropBoxAfterDrag(): void {
+    this.animateCropToCenter();
+  }
+
+  // 确保裁剪框在允许范围内
+  private constrainCropPosition(left: number, top: number, right: number, bottom: number): Rectangle {
+    // 确保裁剪框在最大允许范围内
+    let constrainedLeft = Math.max(left, this.maxClipSize.left);
+    let constrainedTop = Math.max(top, this.maxClipSize.top);
+    let constrainedRight = Math.min(right, this.maxClipSize.right);
+    let constrainedBottom = Math.min(bottom, this.maxClipSize.bottom);
+
+    // 如果移动后超出边界，保持尺寸但调整位置
+    if (constrainedRight - constrainedLeft < this.clipSize.width()) {
+      // 水平方向被限制，保持宽度调整位置
+      constrainedRight = constrainedLeft + this.clipSize.width();
+      if (constrainedRight > this.maxClipSize.right) {
+        constrainedRight = this.maxClipSize.right;
+        constrainedLeft = constrainedRight - this.clipSize.width();
+      }
     }
 
-    // 判断图片下边缘是否在裁剪框内
-    if (imageBottom - scaleOffsetY < cropBottom - extraTop) {
-      // 图片下边缘已经被拖动到裁剪框内，需要还原位置
-      imgOffSetY = cropBottom - extraBottom + scaleOffsetY;
+    if (constrainedBottom - constrainedTop < this.clipSize.height()) {
+      // 垂直方向被限制，保持高度调整位置
+      constrainedBottom = constrainedTop + this.clipSize.height();
+      if (constrainedBottom > this.maxClipSize.bottom) {
+        constrainedBottom = this.maxClipSize.bottom;
+        constrainedTop = constrainedBottom - this.clipSize.height();
+      }
     }
-    this.imgOffSetX = imgOffSetX;
-    this.imgOffSetY = imgOffSetY;
+
+    return new Rectangle(constrainedLeft, constrainedTop, constrainedRight, constrainedBottom);
   }
 
   touchHandler: (event: TouchEvent | undefined) => void = (event: TouchEvent | undefined): void => {
@@ -535,11 +1205,27 @@ export struct ImageEditInfo {
 
     if (event.type === TouchType.Up) {
       this.dragObj.dragging = false;
-      this.endImageDrag();
+
+      // 如果是在拖动裁剪框，则居中
+      if (!this.imageFlag) {
+        // 如果有临时保存的裁剪框位置，使用它
+        if (this.tempClipDuringDrag.width() > 0 && this.tempClipDuringDrag.height() > 0) {
+          this.clipSize = this.tempClipDuringDrag;
+          this.tempClipDuringDrag = new Rectangle(0, 0, 0, 0);
+        }
+
+        // 让裁剪框居中
+        this.centerCropBoxAfterDrag();
+      } else {
+        // 如果是拖动图片，调整图片位置
+        this.endImageDrag();
+      }
     }
 
     if (event.type === TouchType.Down) {
-      Logger.info(TAG, "Down")
+      Logger.info(TAG, "Down");
+      // 重置临时变量
+      this.tempClipDuringDrag = new Rectangle(0, 0, 0, 0);
     }
 
     if (event.type === TouchType.Move) {
@@ -548,29 +1234,83 @@ export struct ImageEditInfo {
         return;
       }
       this.imageFlag = false;
-      if (this.freeStyleCropEnabled) {
+      if (!this.freeStyleCropEnabled) {
         return;
       }
       let touch = event.touches[0];
       let delX: number = touch.screenX - this.dragObj.x;
       let delY: number = touch.screenY - this.dragObj.y;
-      // 裁剪和缩放平移收拾互斥
 
       let newPosition = this.clipSize.clone();
-
       let direction = this.dragObj.action;
+
       if (this.dragObj.multiCrop) {
         this.getMultiCropRect(delX, delY, newPosition, direction, event.pressure);
       } else {
         this.getSingleCropRect(delX, delY, newPosition, direction, event.pressure);
       }
+
+      // 直接应用约束后的裁剪框位置
+      if (this.tempClipDuringDrag.width() > 0 && this.tempClipDuringDrag.height() > 0) {
+        const constrainedClip = this.constrainClipSize(this.tempClipDuringDrag);
+        this.clipSize = constrainedClip;
+      }
     }
+
+  };
+
+  // 平滑移动裁剪框到中心
+  private animateCropToCenter(): void {
+    const screenCenterX = this.screenWidth / 2;
+    const screenCenterY = (this.screenHeight - 66 * 2) / 2;
+
+    const cropCenterX = this.clipSize.left + this.clipSize.width() / 2;
+    const cropCenterY = this.clipSize.top + this.clipSize.height() / 2;
+
+    const deltaX = screenCenterX - cropCenterX;
+    const deltaY = screenCenterY - cropCenterY;
+
+    // 使用动画移动
+    animateTo({
+      duration: 300,  // 300ms动画
+      tempo: 1.0,
+      curve: Curve.EaseOut
+    }, () => {
+      const newLeft = this.clipSize.left + deltaX;
+      const newTop = this.clipSize.top + deltaY;
+      const newRight = this.clipSize.right + deltaX;
+      const newBottom = this.clipSize.bottom + deltaY;
+
+      const constrainedRect = this.constrainCropPosition(newLeft, newTop, newRight, newBottom);
+      this.clipSize = constrainedRect;
+
+      // 同时移动图像
+      this.imgOffSetX += deltaX;
+      this.imgOffSetY += deltaY;
+
+      // 确保边界
+      const maxOffsetX = this.getMaxHorizontalOffset();
+      const maxOffsetY = this.getMaxVerticalOffset();
+
+      this.imgOffSetX = Math.max(-maxOffsetX, Math.min(maxOffsetX, this.imgOffSetX));
+      this.imgOffSetY = Math.max(-maxOffsetY, Math.min(maxOffsetY, this.imgOffSetY));
+    });
   }
 
   getMultiCropRect(delX: number, delY: number, newPosition: Rectangle, direction: Action, pressure: number) {
+    // 获取图片实际显示边界
+    const imageDisplayBounds = this.getImageDisplayBounds();
+
     if (direction.left) {
       newPosition.left = this.dragObj.downPos.left + delX;
       let width = this.clipSize.right - newPosition.left;
+
+      // 只检查图片边界，不检查 maxClipSize
+      if (newPosition.left < imageDisplayBounds.left) {
+        newPosition.left = imageDisplayBounds.left;
+      }
+
+      // 确保最小尺寸
       if (this.clipRatio > 0) {
         let height = width / this.clipRatio;
         if (height <= this.minSize) {
@@ -579,13 +1319,17 @@ export struct ImageEditInfo {
       } else if (width <= this.minSize) {
         newPosition.left = this.clipSize.right - this.minSize;
       }
-      if (newPosition.left < this.maxClipSize.left) {
-        newPosition.left = this.maxClipSize.left;
-      }
     }
+
     if (direction.top) {
       newPosition.top = this.dragObj.downPos.top + delY;
       let height = this.clipSize.bottom - newPosition.top;
+
+      // 只检查图片边界，不检查 maxClipSize
+      if (newPosition.top < imageDisplayBounds.top) {
+        newPosition.top = imageDisplayBounds.top;
+      }
+
       if (this.clipRatio > 0) {
         let width = height * this.clipRatio;
         if (width <= this.minSize) {
@@ -594,13 +1338,17 @@ export struct ImageEditInfo {
       } else if (height <= this.minSize) {
         newPosition.top = this.clipSize.bottom - this.minSize;
       }
-      if (newPosition.top < this.maxClipSize.top) {
-        newPosition.top = this.maxClipSize.top;
-      }
     }
+
     if (direction.right) {
       newPosition.right = this.dragObj.downPos.right + delX;
       let width = newPosition.right - this.clipSize.left;
+
+      // 只检查图片边界，不检查 maxClipSize
+      if (newPosition.right > imageDisplayBounds.right) {
+        newPosition.right = imageDisplayBounds.right;
+      }
+
       if (this.clipRatio > 0) {
         let height = width / this.clipRatio;
         if (height <= this.minSize) {
@@ -609,13 +1357,17 @@ export struct ImageEditInfo {
       } else if (width <= this.minSize) {
         newPosition.right = this.clipSize.left + this.minSize;
       }
-      if (newPosition.right > this.maxClipSize.right) {
-        newPosition.right = this.maxClipSize.right;
-      }
     }
+
     if (direction.bottom) {
       newPosition.bottom = this.dragObj.downPos.bottom + delY;
       let height = newPosition.bottom - this.clipSize.top;
+
+      // 只检查图片边界，不检查 maxClipSize
+      if (newPosition.bottom > imageDisplayBounds.bottom) {
+        newPosition.bottom = imageDisplayBounds.bottom;
+      }
+
       if (this.clipRatio > 0) {
         let width = height * this.clipRatio;
         if (width <= this.minSize) {
@@ -624,85 +1376,182 @@ export struct ImageEditInfo {
       } else if (height <= this.minSize) {
         newPosition.bottom = this.clipSize.top + this.minSize;
       }
-      if (newPosition.bottom > this.maxClipSize.bottom) {
-        newPosition.bottom = this.maxClipSize.bottom;
-      }
     }
-    this.clipSize = new Rectangle(newPosition.left, newPosition.top, newPosition.right, newPosition.bottom);
+
+    this.tempClipDuringDrag = new Rectangle(
+      newPosition.left,
+      newPosition.top,
+      newPosition.right,
+      newPosition.bottom
+    );
+  }
+
+  constrainClipSize(tempClip: Rectangle): Rectangle {
+    const imageDisplayBounds = this.getImageDisplayBounds();
+
+    let left = tempClip.left;
+    let top = tempClip.top;
+    let right = tempClip.right;
+    let bottom = tempClip.bottom;
+
+    // 只约束在图片边界内
+    left = Math.max(left, imageDisplayBounds.left);
+    top = Math.max(top, imageDisplayBounds.top);
+    right = Math.min(right, imageDisplayBounds.right);
+    bottom = Math.min(bottom, imageDisplayBounds.bottom);
+
+    // 确保最小尺寸
+    const width = right - left;
+    const height = bottom - top;
+
+    // 如果尺寸太小，调整到最小尺寸，保持中心点
+    if (width < this.minSize) {
+      const centerX = (left + right) / 2;
+      left = centerX - this.minSize / 2;
+      right = centerX + this.minSize / 2;
+    }
+
+    if (height < this.minSize) {
+      const centerY = (top + bottom) / 2;
+      top = centerY - this.minSize / 2;
+      bottom = centerY + this.minSize / 2;
+    }
+
+    // 再次确保在图片边界内（调整后可能超出）
+    left = Math.max(left, imageDisplayBounds.left);
+    top = Math.max(top, imageDisplayBounds.top);
+    right = Math.min(right, imageDisplayBounds.right);
+    bottom = Math.min(bottom, imageDisplayBounds.bottom);
+
+    return new Rectangle(left, top, right, bottom);
   }
 
+
   getSingleCropRect(delX: number, delY: number, newPosition: Rectangle, direction: Action, pressure: number) {
-    if (direction.left) {
-      let newX = this.dragObj.downPos.left + delX;
-      newX = newX < this.dragObj.downPos.right - this.minSize ? newX : this.dragObj.downPos.right - this.minSize
-      if (this.clipRatio > 0) {
-        let width = this.clipSize.right - newX;
-        let height = width / this.clipRatio;
-        newPosition.top = this.clipSize.top - (height - this.clipSize.height()) / 2;
-        newPosition.bottom = this.clipSize.bottom + (height - this.clipSize.height()) / 2;
-        if (height <= this.minSize) {
-          newX = this.clipSize.right - this.minSize * this.clipRatio;
+    // 获取图片实际显示边界
+    const imageDisplayBounds = this.getImageDisplayBounds();
+
+    // 确定主要拖动方向
+    let mainDirection: 'left' | 'right' | 'top' | 'bottom' | null = null;
+
+    if (direction.left && !direction.right && !direction.top && !direction.bottom) {
+      mainDirection = 'left';
+    } else if (direction.right && !direction.left && !direction.top && !direction.bottom) {
+      mainDirection = 'right';
+    } else if (direction.top && !direction.bottom && !direction.left && !direction.right) {
+      mainDirection = 'top';
+    } else if (direction.bottom && !direction.top && !direction.left && !direction.right) {
+      mainDirection = 'bottom';
+    } else {
+      // 如果是角上拖动，应该调用 getMultiCropRect
+      return;
+    }
+
+    // 根据主方向处理
+    switch (mainDirection) {
+      case 'left': {
+        let newLeft = this.dragObj.downPos.left + delX;
+
+        // 确保在图片边界内
+        newLeft = Math.max(newLeft, imageDisplayBounds.left);
+
+        // 确保不会使裁剪框太小
+        const maxLeft = this.clipSize.right - this.minSize;
+        newLeft = Math.min(newLeft, maxLeft);
+        newPosition.left = newLeft;
+
+        // 如果有固定比例，调整另一边
+        if (this.clipRatio > 0) {
+          const newWidth = this.clipSize.right - newLeft;
+          const newHeight = newWidth / this.clipRatio;
+
+          // 保持中心点不变
+          const centerY = (this.clipSize.top + this.clipSize.bottom) / 2;
+          newPosition.top = centerY - newHeight / 2;
+          newPosition.bottom = centerY + newHeight / 2;
         }
+        break;
       }
-      newPosition.left = newX;
-      if (newPosition.left < this.maxClipSize.left) {
-        newPosition.left = this.maxClipSize.left;
-      }
-    } else if (direction.right) {
-      let newX = this.dragObj.downPos.right + delX;
-      if (newX < this.dragObj.downPos.left + this.minSize) {
-        newX = this.dragObj.downPos.left + this.minSize;
-      }
-      if (this.clipRatio > 0) {
-        let width = newX - this.clipSize.left;
-        let height = width / this.clipRatio;
-        newPosition.top = this.clipSize.top - (height - this.clipSize.height()) / 2;
-        newPosition.bottom = this.clipSize.bottom + (height - this.clipSize.height()) / 2;
-        if (height <= this.minSize) {
-          newX = this.minSize * this.clipRatio + this.clipSize.left;
+
+      case 'right': {
+        let newRight = this.dragObj.downPos.right + delX;
+
+        // 确保在图片边界内
+        newRight = Math.min(newRight, imageDisplayBounds.right);
+
+        // 确保不会使裁剪框太小
+        const minRight = this.clipSize.left + this.minSize;
+        newRight = Math.max(newRight, minRight);
+        newPosition.right = newRight;
+
+        // 如果有固定比例，调整另一边
+        if (this.clipRatio > 0) {
+          const newWidth = newRight - this.clipSize.left;
+          const newHeight = newWidth / this.clipRatio;
+
+          // 保持中心点不变
+          const centerY = (this.clipSize.top + this.clipSize.bottom) / 2;
+          newPosition.top = centerY - newHeight / 2;
+          newPosition.bottom = centerY + newHeight / 2;
         }
+        break;
       }
-      newPosition.right = newX;
-      if (newPosition.right > this.maxClipSize.right) {
-        newPosition.right = this.maxClipSize.right;
-      }
-    } else if (direction.top) {
-      let newY = this.dragObj.downPos.top + delY;
-      newY = newY < this.dragObj.downPos.bottom - this.minSize ? newY : this.dragObj.downPos.bottom - this.minSize
-      if (this.clipRatio > 0) {
-        let height = this.clipSize.bottom - newY;
-        let width = height * this.clipRatio;
-        newPosition.left = this.clipSize.left - (width - this.clipSize.width()) / 2;
-        newPosition.right = this.clipSize.right + (width - this.clipSize.width()) / 2;
-        if (width <= this.minSize) {
-          newY = this.clipSize.bottom - this.minSize / this.clipRatio;
+
+      case 'top': {
+        let newTop = this.dragObj.downPos.top + delY;
+
+        // 确保在图片边界内
+        newTop = Math.max(newTop, imageDisplayBounds.top);
+
+        // 确保不会使裁剪框太小
+        const maxTop = this.clipSize.bottom - this.minSize;
+        newTop = Math.min(newTop, maxTop);
+        newPosition.top = newTop;
+
+        // 如果有固定比例，调整另一边
+        if (this.clipRatio > 0) {
+          const newHeight = this.clipSize.bottom - newTop;
+          const newWidth = newHeight * this.clipRatio;
+
+          // 保持中心点不变
+          const centerX = (this.clipSize.left + this.clipSize.right) / 2;
+          newPosition.left = centerX - newWidth / 2;
+          newPosition.right = centerX + newWidth / 2;
         }
+        break;
       }
-      newPosition.top = newY;
-      if (newPosition.top < this.maxClipSize.top) {
-        newPosition.top = this.maxClipSize.top;
-      }
-    } else if (direction.bottom) {
-      let newY = this.dragObj.downPos.bottom + delY;
-      if (newY < this.dragObj.downPos.top + this.minSize) {
-        newY = this.dragObj.downPos.top + this.minSize;
-      }
-      if (this.clipRatio > 0) {
-        let height = newY - this.clipSize.top;
-        let width = height * this.clipRatio;
-        newPosition.left = this.clipSize.left - (width - this.clipSize.width()) / 2;
-        newPosition.right = this.clipSize.right + (width - this.clipSize.width()) / 2;
-        if (width <= this.minSize) {
-          newY = this.minSize / this.clipRatio + this.clipSize.top;
+
+      case 'bottom': {
+        let newBottom = this.dragObj.downPos.bottom + delY;
+
+        // 确保在图片边界内
+        newBottom = Math.min(newBottom, imageDisplayBounds.bottom);
+
+        // 确保不会使裁剪框太小
+        const minBottom = this.clipSize.top + this.minSize;
+        newBottom = Math.max(newBottom, minBottom);
+        newPosition.bottom = newBottom;
+
+        // 如果有固定比例，调整另一边
+        if (this.clipRatio > 0) {
+          const newHeight = newBottom - this.clipSize.top;
+          const newWidth = newHeight * this.clipRatio;
+
+          // 保持中心点不变
+          const centerX = (this.clipSize.left + this.clipSize.right) / 2;
+          newPosition.left = centerX - newWidth / 2;
+          newPosition.right = centerX + newWidth / 2;
         }
-      }
-      newPosition.bottom = newY;
-      if (newPosition.bottom > this.maxClipSize.bottom) {
-        newPosition.bottom = this.maxClipSize.bottom;
+        break;
       }
     }
-    this.clipSize = new Rectangle(newPosition.left, newPosition.top, newPosition.right, newPosition.bottom);
 
+    this.tempClipDuringDrag = new Rectangle(
+      newPosition.left,
+      newPosition.top,
+      newPosition.right,
+      newPosition.bottom
+    );
   }
 
   build() {
@@ -717,11 +1566,11 @@ export struct ImageEditInfo {
   }
 }
 
-
 @Component
 export struct RectangleSizer {
   @Prop clipSize: Rectangle = new Rectangle(0, 0, 0, 0);
-  public onDrag: (event: TouchEvent, left: boolean, top: boolean, right: boolean, bottom: boolean, multiCrop: boolean) => void = Event
+  public onDrag: (event: TouchEvent, left: boolean, top: boolean, right: boolean, bottom: boolean,
+    multiCrop: boolean) => void = Event
   @Prop clipVisible: boolean = true;
   @State isScrolling: boolean = false;
   @State isTouched: boolean = false;
@@ -729,6 +1578,18 @@ export struct RectangleSizer {
   @StorageProp('showCropFrame') showCropFrame: boolean = true;
   @StorageProp('showCropGuidelines') showCropGuidelines: boolean = true;
   @Prop isScreenPortrait: boolean = false;
+  // 添加本地触摸状态
+  @State dragStartX: number = 0;
+  @State dragStartY: number = 0;
+  @State isDraggingEdge: boolean = false;
+  // 添加触摸状态变量
+  @State touchStartTime: number = 0;
+  @State touchStartX: number = 0;
+  @State touchStartY: number = 0;
+
+  // 定义边缘检测区域 - 优化边缘检测
+  private readonly EDGE_THRESHOLD: number = 25; // 边缘检测阈值
+  private readonly CORNER_THRESHOLD: number = 25; // 角检测阈值
 
   build() {
     Stack() {
@@ -828,7 +1689,7 @@ export struct RectangleSizer {
       x: this.clipSize.left - hotspotsWidth,
       y: this.clipSize.top - hotspotsWidth,
     })
-    .onTouch((event?: TouchEvent) => {
+    .onTouch((event?: TouchEvent)=>{
       if (!event) {
         return;
       }
@@ -838,28 +1699,68 @@ export struct RectangleSizer {
       if (event.touches.length >= 2) {
         return;
       }
+
       let touch = event.touches[0];
       let eventX = touch.x;
       let eventY = touch.y;
+
       if (event.type == TouchType.Down) {
+        // 记录触摸开始时间和位置
+        this.touchStartTime = Date.now();
+        this.touchStartX = eventX;
+        this.touchStartY = eventY;
+
         if (this.isTouched) {
           return;
         }
         this.isTouched = true;
-        let eventLeft = eventX < (2 * hotspotsWidth);
-        let eventTop = eventY < (2 * hotspotsWidth);
-        let eventRight = eventX > this.clipSize.width();
-        let eventBottom = eventY > this.clipSize.height();
-
-        let eventCount = (eventLeft ? 1 : 0) + (eventTop ? 1 : 0) + (eventRight ? 1 : 0) + (eventBottom ? 1 : 0);
-        if (eventCount > 0) {
-          this.onDrag(event, eventLeft, eventTop, eventRight, eventBottom, eventCount > 1);
+
+        // 计算触摸点相对于裁剪框的位置
+        // 计算到各个边的距离
+        const distanceToLeft = eventX;
+        const distanceToTop = eventY;
+        const distanceToRight = (this.clipSize.width() + hotspotsWidth * 2) - eventX;
+        const distanceToBottom = (this.clipSize.height() + hotspotsWidth * 2) - eventY;
+
+        // 检测是否在角上
+        const isNearLeftTop = distanceToLeft <= this.CORNER_THRESHOLD && distanceToTop <= this.CORNER_THRESHOLD;
+        const isNearLeftBottom = distanceToLeft <= this.CORNER_THRESHOLD && distanceToBottom <= this.CORNER_THRESHOLD;
+        const isNearRightTop = distanceToRight <= this.CORNER_THRESHOLD && distanceToTop <= this.CORNER_THRESHOLD;
+        const isNearRightBottom = distanceToRight <= this.CORNER_THRESHOLD && distanceToBottom <= this.CORNER_THRESHOLD;
+
+        // 检测是否在边缘
+        const isNearLeft = distanceToLeft <= this.EDGE_THRESHOLD && !isNearLeftTop && !isNearLeftBottom;
+        const isNearTop = distanceToTop <= this.EDGE_THRESHOLD && !isNearLeftTop && !isNearRightTop;
+        const isNearRight = distanceToRight <= this.EDGE_THRESHOLD && !isNearRightTop && !isNearRightBottom;
+        const isNearBottom = distanceToBottom <= this.EDGE_THRESHOLD && !isNearLeftBottom && !isNearRightBottom;
+
+        // 根据检测结果触发相应的事件
+        if (isNearLeftTop) {
+          this.onDrag(event, true, true, false, false, true);
+        } else if (isNearLeftBottom) {
+          this.onDrag(event, true, false, false, true, true);
+        } else if (isNearRightTop) {
+          this.onDrag(event, false, true, true, false, true);
+        } else if (isNearRightBottom) {
+          this.onDrag(event, false, false, true, true, true);
+        } else if (isNearLeft) {
+          this.onDrag(event, true, false, false, false, false);
+        } else if (isNearTop) {
+          this.onDrag(event, false, true, false, false, false);
+        } else if (isNearRight) {
+          this.onDrag(event, false, false, true, false, false);
+        } else if (isNearBottom) {
+          this.onDrag(event, false, false, false, true, false);
         }
       }
+
       if (event.type === TouchType.Up) {
         this.isTouched = false;
+        // 重置触摸状态
+        this.touchStartTime = 0;
+        this.touchStartX = 0;
+        this.touchStartY = 0;
       }
     })
-
   }
 }