- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用可以放置在 UIImageView
中任何位置的覆盖 UIView
来裁剪 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 的比例对齐。
更新使用下面马特的答案解决了
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")
}
}
最佳答案
让我们将问题分为两部分:
给定 UIImageView 的大小及其 UIImage 的大小,如果 UIImageView 的内容模式是 Aspect Fill,UIImage 的哪一部分适合 UIImageView?实际上,我们需要裁剪原始图像以匹配 UIImageView 实际显示的内容。
给定 UIImageView 中的任意矩形,它对应于裁剪图像的哪一部分(在第 1 部分中导出)?
第一部分是有趣的部分,所以让我们尝试一下。 (第二部分将变得微不足道。)
这是我将使用的原始图像:
该图像的尺寸为 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 的边界坐标中,您只需应用比例(即将其所有四个属性除以比例) - 现在您拥有与一部分相同的矩形croppedIm
。
(请注意,我们并不真的需要裁剪原始图像来获得croppedIm
;实际上,知道如何就足够了em> 来执行该裁剪。重要的信息是 scale
以及 croppedImRect
的 origin
;根据这些信息,您可以获取矩形施加在 ImageView 上,缩放它,并偏移它以获得原始图像所需的矩形。)
编辑我添加了一些截屏视频,只是为了表明我的方法可以作为概念证明:
编辑还在此处创建了一个可下载的示例项目:
但请注意,我不能保证 URL 将永远持续,因此请阅读上面的讨论以了解所使用的方法。
关于ios - 如何在 'aspect fill' 模式下将 UIImageView 裁剪为新的 UIImage?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49352639/
我一直在尝试实现这一点,但找不到任何可以在删除它们时像 iPhone 应用程序抖动一样抖动它的代码! CABasicAnimation *animation =
我有一个代码在 UIImageView.isAnimating 为 false 之后执行一些操作 但有趣的是它永远不会出错,它总是处于 YES 状态。 "isAnimating return is f
我的 UIViewController 中有一个 UIImageView。我在上面设置了一个图像。我做了如下旋转。 - (void) runSpinAnimationOnView:(UIImageVi
我有一个带有图像的 UIImageView。我在显示之前旋转了图像,方法是将 UIImageView 的变换属性设置为 CGAffineTransformMakeRotation(angle),其中角
如果有解决我的问题的答案,请给我一个链接。否则这是我的问题: 我目前正在运行 Swift 2.0 (Xcode 7) Sprite Kit Game,想知道 UIImageView 是否可以跟随另一个
我不知道我的想法是否正确,但我的问题是我在 UITableView 中有自定义单元格(看起来像汽车),每个单元格包含 2 个 UIImageViews(车轮图像),我需要旋转当 UITableView
我想知道是否有办法使用透明的 UIImageView(框 C)来剪辑移动到其上方的某些图像。 在我的示例中,我将均为 UIImageView 的框 A 和 B 移向透明的框 C。一旦盒子发生碰撞,我只
我有一个带有固定图像的 UIImageView。我想在顶部添加第二个 UIImageView,我打算旋转它。我需要在运行时创建顶部图像。我找不到在哪里处理透明度。它在 UIImage 中还是在 UII
我有一个要求,我有一个 UIImageView 在另一个之上。当用户在其上“绘制”时,我需要使顶部透明。实际上,不是绘制用户将要做的事情,而是“删除”顶 View ,让下面的 View 显示出来。 我
您好,我有一个 UIImageView,它部分在屏幕上,部分在屏幕外。 我想围绕屏幕外的一个点( View 的中心)旋转 View 。 我该怎么做? fullRotationAnimation
我有两张图片。一个图像是矩形第二个是三角形我想使用一根手指或触摸事件从矩形图像的中心点旋转三角形图像。 最佳答案 好吧,如果您希望图像围绕矩形中心点以任意大小的圆旋转,那么数学会变得相当复杂,但是一个
我想知道是否可以将更多的 UIImageView 分组到一个 ImageView 中。例如,如果我有 4 个 imageView,并且我想以完全相同的方式为它们制作动画,我可以将它们组合成一个,然后为
我正在代码中创建多个 UIImageView,并且想要移动和删除我选择的任何 UIImageView。现在,我只能移动使用 UIPanGestureRecognizer 创建的最后一个 UIImage
现在,我已经让它能够在我的应用程序上移动图像、缩放图像、捏合图像……应有尽有。但我的问题是,当一个 UIImageView 位于另一个 UIImageView 时,我如何才能让应用程序注册? 最佳答案
我有一个 UIImageView 应该从 size (0,0) --> (93,75) 开始动画 我有以下内容 [UIView animateWithDuration:0.5 delay:0 op
我这里的问题应该是一个相当简单的问题。基本上,我试图将一个对象 (UIImageView) 从 A 点(它在 Storyboard中设置的位置)移动到我以编程方式定义的 B 点。 我第一次通过这个导致
我有一个带有包含图像的单元格的 UITableView。我想从服务器下载一个大图像并将其插入到我的单元格中。 我的 UITableViewCell 有一个固定的高度并且填满了屏幕的整个宽度。最好的解决
当用户选择新的图像过滤器时,我尝试对图像进行交叉淡入淡出。 所以我在第一个ImageView之上创建了第二个ImageView,并对顶部 View 的alpha进行动画处理以显示或隐藏底部 View
我有一个 UIScrollView,其中包含 n 个占位符 UIImageView。下面我有一个 StackView,其中包含 10 个图像,用户可以从中选择并将图像拖动到上面的特定占位符 Image
尝试设置“选定框”图形的边界的多种组合,该图形仅显示用户在 UIImageView 中触摸的位置。它仍然继续坚持 super View 坐标系 class ViewController: UIView
我是一名优秀的程序员,十分优秀!