如何使图像可调整大小的裁剪框

Posted 2023-02-25

【中文标题】如何使图像可调整大小的裁剪框

【英文标题】：How to make a image resizable crop box

【发布时间】：2013-06-16 17:31:57

【问题描述】：

我正在尝试找到一种方法在用户上传的图片之上创建一个框，以便用户可以裁剪图片以适合 X 裁剪纵横比（该框将具有 X 最小宽度和高度以及定义的纵横比框）。

我能够找到使用裁剪框但没有具有纵横比功能的存储库。因此，我想知道是否有人可以向我指出一个教程，以便我可以学习如何做到这一点，或者一个可以完成我想要实现的目标的 repo，以便我可以看到另一个人是如何实现这一目标的。

【问题讨论】：

如果我理解正确，您想要做的是让用户裁剪图像，但使用您想要的纵横比，并且您最初提供具有该特定纵横比的裁剪框。如果是这种情况，为什么不限制调整裁剪框大小的能力，使其仅在 X 和 Y 方向上按相同比例调整大小，从而保持初始纵横比？我希望我在这里说清楚了。

是的，这就是我想做的。但我不知道该怎么做。

您如何让用户调整裁剪框的大小？我最近做了类似的事情，我使用UIPinchGestureRecognizer 让用户调整大小。如果你也这样做，你可以在这里查看UIPinchGestureRecognizer 部分raywenderlich.com/6567/…。这个想法是在CGAffineTransform 中将 X 和 Y 比例设置为相同的值。

@zambrey 你能分享你用来调整大小的代码吗？请

嘿乔纳森，你解决了吗？我什么都找不到啊

【参考方案1】：

这里有几个挑战，一个是呈现和拖动裁剪控件的 UI，更简单的一个是约束裁剪控件的数学。这是对后者的提示：

@interface CropBox : NSObject

@property (assign, nonatomic) CGRect box;
@property (assign, nonatomic)  CGFloat aspect;  // set this to 16.0/9.0=1.77 e.g. to get 16:9

- (void)setOrigin:(CGPoint)origin;
- (void)setWidth:(CGFloat)width;
- (void)setHeight:(CGFloat)height;

@end

@implementation CropBox

- (void)setOrigin:(CGPoint)origin 

    self.box = CGRectMake(origin.x, origin.y, self.box.width, self.box.height);


- (void)setWidth:(CGFloat)width 

    CGFloat height = width / self.aspect;
    self.box = CGRectMake(self.box.origin.x, self.box.origin.y, width, height);


- (void)setHeight:(CGFloat)height 

    CGFloat width = height * self.aspect;
    self.box = CGRectMake(self.box.origin.x, self.box.origin.y, width, height);


@end

【参考方案2】：

我不能公开分享我的确切代码。但这就是它的大致情况。在我的情况下，我想允许调整 UIImageView 的大小。在您的情况下，这可能是一个简单的矩形。如果是这样，只是handlePinch: 函数中的逻辑会相应改变。 初始化捏合手势识别器并将其添加到目标视图。

UIImageView *imageview = [[UIImageView alloc] initWithImage:image];
UIPinchGestureRecognizer *pinchGesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinch:)];
[imageview addGedtureRecognizer:pinchGesture];

实际的手势处理程序代码。对于手势处理程序代码，我参考了this 页面。

- (void)handlePinch:(UIPinchGestureRecognizer *)recognizer 
    
    recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, recognizer.scale);
    recognizer.scale = 1;    

如果CGRect 调整大小，您应该查看this 页面上的CGRectApplyAffineTransform 方法。 CGAffineTransformScale 中的第二个和第三个参数分别是 X 和 Y 方向的缩放因子。保持纵横比与初始值相同的关键是使这两个值相同。希望这会有所帮助。如果我没有说清楚，请发表评论。

【参考方案3】：

我创建了一个自定义 UIPinchGestureRecognizer，它可以单向或双向缩放。这可用于对覆盖的裁剪视图进行自定义缩放。您可以调整一些设置以帮助您的项目。检查出来; https://***.com/a/17938469/1186235