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

Question

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

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

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

来自 StoryBoard 的图像出口

@IBOutlet var imgFrame: UIImageView!

将框架应用到ImageView

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

Answer 1

我认为你需要两件事。

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

要配置此功能，您必须将帧图像视图的顶部、底部、前导和尾随锚点与源图像视图的相应锚点对齐。

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

将

UIImageView

大小调整为

UIImage

的大小最简单的方法是使用 纵横比约束。此外，我将两个 UIImageView 的

content mode

配置为 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")

您还必须将源

UIImageView

放置在视图控制器内，但我将其留给您。 这是我使用此代码获得的示例结果。

这是 GitHub 上示例项目的链接

Answer 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)

Answer 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

Answer 4

感谢有用的博客内容，请查看我们的图像编辑服务博客图像编辑服务 2023 年最热门的照片编辑趋势是什么？ 印度排名前 5 的图像编辑公司