我正在尝试使用可放置在UIView
中任何位置的覆盖UIImageView
裁剪 ImageView 的子图像。我从类似的帖子中借用了一个解决方案,以解决当UIImageView内容模式为“Aspect Fit”时如何解决此问题。提议的解决方案是:
func computeCropRect(for sourceFrame : CGRect) -> CGRect {
let widthScale = bounds.size.width / image!.size.width
let heightScale = bounds.size.height / image!.size.height
var x : CGFloat = 0
var y : CGFloat = 0
var width : CGFloat = 0
var height : CGFloat = 0
var offSet : CGFloat = 0
if widthScale < heightScale {
offSet = (bounds.size.height - (image!.size.height * widthScale))/2
x = sourceFrame.origin.x / widthScale
y = (sourceFrame.origin.y - offSet) / widthScale
width = sourceFrame.size.width / widthScale
height = sourceFrame.size.height / widthScale
} else {
offSet = (bounds.size.width - (image!.size.width * heightScale))/2
x = (sourceFrame.origin.x - offSet) / heightScale
y = sourceFrame.origin.y / heightScale
width = sourceFrame.size.width / heightScale
height = sourceFrame.size.height / heightScale
}
return CGRect(x: x, y: y, width: width, height: height)
}
问题在于,当 ImageView 为长宽比填充时使用此解决方案会导致裁切后的片段与覆盖
UIView
的放置位置不完全对齐。我不太确定如何修改此代码以适应“长宽比填充”或重新放置我的叠加UIView
,以使其与我尝试裁剪的段以1:1对齐。更新使用以下中的Matt答案解决
class ViewController: UIViewController {
@IBOutlet weak var catImageView: UIImageView!
private var cropView : CropView!
override func viewDidLoad() {
super.viewDidLoad()
cropView = CropView(frame: CGRect(x: 0, y: 0, width: 45, height: 45))
catImageView.image = UIImage(named: "cat")
catImageView.clipsToBounds = true
catImageView.layer.borderColor = UIColor.purple.cgColor
catImageView.layer.borderWidth = 2.0
catImageView.backgroundColor = UIColor.yellow
catImageView.addSubview(cropView)
let imageSize = catImageView.image!.size
let imageViewSize = catImageView.bounds.size
var scale : CGFloat = imageViewSize.width / imageSize.width
if imageSize.height * scale < imageViewSize.height {
scale = imageViewSize.height / imageSize.height
}
let croppedImageSize = CGSize(width: imageViewSize.width/scale, height: imageViewSize.height/scale)
let croppedImrect =
CGRect(origin: CGPoint(x: (imageSize.width-croppedImageSize.width)/2.0,
y: (imageSize.height-croppedImageSize.height)/2.0),
size: croppedImageSize)
let renderer = UIGraphicsImageRenderer(size:croppedImageSize)
let _ = renderer.image { _ in
catImageView.image!.draw(at: CGPoint(x:-croppedImrect.origin.x, y:-croppedImrect.origin.y))
}
}
@IBAction func performCrop(_ sender: Any) {
let cropFrame = catImageView.computeCropRect(for: cropView.frame)
if let imageRef = catImageView.image?.cgImage?.cropping(to: cropFrame) {
catImageView.image = UIImage(cgImage: imageRef)
}
}
@IBAction func resetCrop(_ sender: Any) {
catImageView.image = UIImage(named: "cat")
}
}
最终结果
最佳答案
让我们将问题分为两个部分:
第一部分是有趣的部分,所以让我们尝试一下。 (第二部分将变得无关紧要。)
这是我将使用的原始图像:
https://static1.squarespace.com/static/54e8ba93e4b07c3f655b452e/t/56c2a04520c64707756f4267/1455596221531/
该图像是1000x611。这是按比例缩小的样子(但请记住,我将始终使用原始图像):
但是,我的 ImageView 将为139x182,并设置为“纵横比填充”。当显示图像时,它看起来像这样:
我们要解决的问题是:如果我的 ImageView 设置为“纵横比填充”,则在 ImageView 中显示原始图像的哪一部分?
开始了。假设
iv
是 ImageView :let imsize = iv.image!.size
let ivsize = iv.bounds.size
var scale : CGFloat = ivsize.width / imsize.width
if imsize.height * scale < ivsize.height {
scale = ivsize.height / imsize.height
}
let croppedImsize = CGSize(width:ivsize.width/scale, height:ivsize.height/scale)
let croppedImrect =
CGRect(origin: CGPoint(x: (imsize.width-croppedImsize.width)/2.0,
y: (imsize.height-croppedImsize.height)/2.0),
size: croppedImsize)
因此,现在我们解决了这个问题:
croppedImrect
是 ImageView 中显示的原始图像区域。让我们继续使用我们的知识,方法是将图像实际裁剪为与 ImageView 中显示的图像匹配的新图像:let r = UIGraphicsImageRenderer(size:croppedImsize)
let croppedIm = r.image { _ in
iv.image!.draw(at: CGPoint(x:-croppedImrect.origin.x, y:-croppedImrect.origin.y))
}
结果是此图像(忽略灰色边框):
但是瞧瞧,这是正确的答案!我已经从原始图像中准确提取了 ImageView 内部描绘的区域。
因此,现在您拥有了所需的所有信息。
croppedIm
是实际显示在 ImageView 的裁剪区域中的UIImage。 scale
是 ImageView 和该图像之间的比例。因此,您可以轻松解决您最初提出的问题!给定施加在 ImageView 上的任何矩形,在 ImageView 的边界坐标中,您只需应用比例(即,将其所有四个属性除以scale
)—现在您拥有与croppedIm
相同的矩形。(观察到,我们实际上不需要裁剪原始图像即可获得
croppedIm
;实际上,知道如何执行裁剪就足够了。重要的信息是scale
以及origin
的croppedImRect
;鉴于该信息,您可以将矩形应用于 ImageView ,对其进行缩放并偏移以获取所需的原始图像矩形。)编辑我添加了一些截屏视频,只是为了表明我的方法可以用作概念证明:
编辑还在此处创建了一个可下载的示例项目:
https://github.com/mattneub/Programming-iOS-Book-Examples/blob/39cc800d18aa484d17c26ffcbab8bbe51c614573/bk2ch02p058cropImageView/Cropper/ViewController.swift
但是请注意,我不能保证URL会永远持续下去,因此请阅读上面的讨论以了解所使用的方法。