为照片编辑应用程序在 ImageView 中添加基于图像的新数据框

Posted 2023-03-12

【中文标题】为照片编辑应用程序在 ImageView 中添加基于图像的新数据框

【英文标题】：Adding New Frame based on Image inside ImageView for PhotoEditing App

【发布时间】：2017-10-16 05:23:16

【问题描述】：

我正在开发照片编辑应用程序，我需要在图像上添加框架，基本上我使用了另一个 UIImageView，它与我的原始 UIImageView 具有相同的框架，并且只需添加 png 图像。现在的问题是我需要基于图像视图中框架的高度和宽度的框架。

如上图所示，我的框架出现在整个 UIImageView 中，但我在 Imageview 中的图像是横向的，所以如果我在 Imageview 中的图像是横向的，那么我需要横向框架，如果图像是纵向的，那么我需要纵向框架。我如何做到这一点？

我使用了 2 个具有相同高度宽度的图像视图，一个是原始图像视图，另一个是框架图像视图现在我使用以下代码应用图像

StoryBoard 图片的出口

@IBOutlet var imgFrame: UIImageView!

将框架应用到 ImageView

                imgFrame.isHidden = false
                imgFrame.image = #imageLiteral(resourceName: "Frame-Style-1.png")

【问题讨论】：

你的代码在哪里？提供相关代码顺便说一句***.com/questions/16878607/… 和***.com/questions/27599275/… 可能对你有帮助。

@iPatel 检查我更新的问题

@iPatel 你明白我的问题了吗？我想你没有得到我的问题。

我不确定我得到了什么问题。你想保持这两个图像视图的帧相同，还是你想为横向和纵向使用不同的帧图像？

@KamilSzostakowski 我想为横向和纵向使用不同的帧图像。

【参考方案1】：

我认为你需要两件事。

保持框架 UIImageView 的大小与源 UIImageView 相同。

要进行配置，您必须将框架图像视图的顶部、底部、前导和尾随锚点与源图像视图的相应锚点对齐。

将源 UIImageView 的大小调整为图像的大小。

将UIImageView 大小调整为UIImage 大小的最简单方法是使用纵横比约束。更重要的是，我将UIImageView的内容模式配置为scale to fill。

let image = UIImage(named: "portrait")!
let aspectRatio = image.size.height / image.size.width

let aspectRatioConstraint = NSLayoutConstraint(item: userImageView,attribute: .height,relatedBy: .equal,toItem: userImageView,attribute: .width,multiplier: aspectRatio,constant: 0)

userImageView.image = image
userImageView.addConstraint(aspectRatioConstraint)

frameImageView.image = UIImage(named: "landscape-frame")

您还必须将 source UIImageView 定位在视图控制器中，但我将其留给您。 这是我使用此代码实现的示例结果。

这是 GitHub 上示例项目的 link

【讨论】：

我想在图像上添加框架，所以如果图像是横向的，那么框架必须是横向的，如果图像是纵向的，那么框架必须是纵向的，我已经尝试过你的代码，但它对我不起作用。它只是制作图像 Aspectfit。

横向和纵向框架使用单一资源还是使用单独的资源？

我同时使用单一资源

我认为您必须根据源图像方向旋转它并将其分配给框架图像视图。我会尽快更新我的答案。

我更新了我的答案。我在示例中添加了一个实际的框架，在代码部分中，我展示了如何将框架图像分配给框架图像视图。这是你想要达到的目标吗？

【参考方案2】：

使innerImageview 像.scaleAspectFit 一样显示图像，没有空格：

func set(image: UIImage, to imageView: UIImageView) 
    // 1. find sizeScale
    let sizeScaleX = imgFrame.frame.width / image.size.width
    let sizeScaleY = imgFrame.frame.height / image.size.height
    let sizeScale = sizeScaleX > sizeScaleY ? sizeScaleX : sizeScaleY

    // 2. change imageView's frame
    imageView.frame.size = CGSize(width: image.size.width*sizeScale, height: image.size.height*sizeScale)

    // 3. center imageView
    imageView.frame.origin.x = (imgFrame.frame.width-imageView.frame.width)/2
    imageView.frame.origin.y = (imgFrame.frame.height-imageView.frame.height)/2


// image is the image what you got (from library/camera or anywhere)
// 1. set image to imgFrame which contain space
imgFrame.image = image
// 2. generate a new image without space
var innerImageView = UIImageView()
set(image: image, to: innerImageView)
// 3. add frame on image
imgFrame.addSubview(innerImageView)

【讨论】：

你得到我想要的了吗？我想同时使用框架和图像。两者都是 UIImageView。

是的，我的示例使imgFrame 显示您想要的位置和大小的图像

我更新我的答案，让答案更接近你的情况

【参考方案3】：

假设这些是您的mainImageView 和图像（横向）的值：

mainImageView.frame.size
▿ (500.0, 500.0)
  - width : 500.0
  - height : 500.0

mainImageView.image?.size
▿ Optional<CGSize>
  ▿ some : (1440.0, 800.0)
    - width : 1440.0
    - height : 800.0

你知道宽度是500，高度可以这样计算： frame.width / image.width * image.height

【讨论】：

@KhushbuDesai 根据您的解释，您有一个带有景观图像的方形 imageView。您想创建另一个框架以适应景观图像（而不是方形 imageView）以创建“框架效果”。你问的是这个吗？

是的，如果图像视图中的图像是横向的，那么我想添加另一个相同横向大小的图像视图，以便在图像视图上添加框架层。我也想从肖像中得到同样的结果。