如何为 aspect fit 模式设置圆角的 UIImageView
How to set UIImageView with rounded corners for aspect fit mode
我一般用下面的代码来设置圆角
imageView.layer.cornerRadius = 10
当 imageView 设置为 Aspect Fill 时有效。
但是当imageView设置为Aspect Fit模式时,imageView和图片的比例不一样。
圆角效果就看不出来了
背景颜色设置为绿色以显示圆角。
有什么方法可以设置'real image part'为圆角。
提前感谢您的回答。
试试这个可能对你有帮助:
import UIKit
class ViewController: UIViewController{
@IBOutlet weak var myImageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
myImageView.contentMode = UIViewContentMode.ScaleAspectFit
myImageView.clipsToBounds = true
//myImageView.layer.cornerRadius = 10.0
myImageView.layer.masksToBounds = true
let simpleImage = UIImage(named:"ipad5_einladung.jpg")
let corneredImage = generateRoundCornerImage(simpleImage!, radius: 10)
//Set cornered Image
myImageView.image = corneredImage;
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func generateRoundCornerImage(image : UIImage , radius : CGFloat) -> UIImage {
let imageLayer = CALayer()
imageLayer.frame = CGRectMake(0, 0, image.size.width, image.size.height)
imageLayer.contents = image.CGImage
imageLayer.masksToBounds = true
imageLayer.cornerRadius = radius
UIGraphicsBeginImageContext(image.size)
imageLayer.renderInContext(UIGraphicsGetCurrentContext())
let roundedImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return roundedImage
}
}
您首先需要将宽度和高度设置为相同的值。然后像这样设置图像属性:
imgProfile_Pic.layer.cornerRadius = cell.imgProfile_Pic.frame.size.height / 2
imgProfile_Pic.layer.borderWidth = 3.0
imgProfile_Pic.layer.borderColor = UIColor.white.cgColor
imgProfile_Pic.clipsToBounds = true
imgProfile_Pic.layoutIfNeeded()
将此扩展用于 UIImageView:
extension UIImageView
{
func roundCornersForAspectFit(radius: CGFloat)
{
if let image = self.image {
//calculate drawingRect
let boundsScale = self.bounds.size.width / self.bounds.size.height
let imageScale = image.size.width / image.size.height
var drawingRect: CGRect = self.bounds
if boundsScale > imageScale {
drawingRect.size.width = drawingRect.size.height * imageScale
drawingRect.origin.x = (self.bounds.size.width - drawingRect.size.width) / 2
} else {
drawingRect.size.height = drawingRect.size.width / imageScale
drawingRect.origin.y = (self.bounds.size.height - drawingRect.size.height) / 2
}
let path = UIBezierPath(roundedRect: drawingRect, cornerRadius: radius)
let mask = CAShapeLayer()
mask.path = path.cgPath
self.layer.mask = mask
}
}
}
像这样将图像视图四舍五入是非常简单的:
self.profileImageView?.clipsToBounds = true
self.profileImageView!.layer.cornerRadius = 10
self.profileImageView?.layer.borderWidth = 1.0
self.profileImageView?.contentMode = .ScaleAspectFit
但是为了使图像视图按图像比例四舍五入,我认为您必须将图像视图设置为 ScaleAspectFill 模式。
Swift 3 版本的有用的,被接受的答案在这里!
extension UIImageView {
func roundCornersForAspectFit(radius: CGFloat)
{
if let image = self.image {
//calculate drawingRect
let boundsScale = self.bounds.size.width / self.bounds.size.height
let imageScale = image.size.width / image.size.height
var drawingRect : CGRect = self.bounds
if boundsScale > imageScale {
drawingRect.size.width = drawingRect.size.height * imageScale
drawingRect.origin.x = (self.bounds.size.width - drawingRect.size.width) / 2
}else {
drawingRect.size.height = drawingRect.size.width / imageScale
drawingRect.origin.y = (self.bounds.size.height - drawingRect.size.height) / 2
}
let path = UIBezierPath(roundedRect: drawingRect, cornerRadius: radius)
let mask = CAShapeLayer()
mask.path = path.cgPath
self.layer.mask = mask
}
}
}
这是已接受的答案,转换为 Objective-C:
@implementation UIImageView(Utils)
- (void)roundCornersForAspectFitWithRadius:(CGFloat)cornerRadius {
if (self.image) {
double boundsScale = self.bounds.size.width / self.bounds.size.height;
double imageScale = self.image.size.width / self.image.size.height;
CGRect drawingRect = self.bounds;
if (boundsScale > imageScale) {
drawingRect.size.width = drawingRect.size.height * imageScale;
drawingRect.origin.x = (self.bounds.size.width - drawingRect.size.width) / 2;
}
else {
drawingRect.size.height = drawingRect.size.width / imageScale;
drawingRect.origin.y = (self.bounds.size.height - drawingRect.size.height) / 2;
}
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:drawingRect cornerRadius:cornerRadius];
CAShapeLayer *mask = [CAShapeLayer new];
[mask setPath:path.CGPath];
[self.layer setMask:mask];
}
}
@end
我想对 Arun 的回答发表评论,以帮助那些在执行 Arun 的方法时遇到问题的人,但在 Collection View 中,您必须将 imageView 的框架启动为 Collection View 单元格的框架。
即
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "identifier", for: indexPath) as UICollectionViewCell
let imageView = UIImageView(frame: cell.frame)
显然您想重构它和东西,但您明白了。
如果您在项目中使用SDWebImage
,您可以执行以下操作:
myUIImageView.image = myUIImage.sd_roundedCornerImage(withRadius: 24, corners: .allCorners, borderWidth: 0, borderColor: nil)
我一般用下面的代码来设置圆角
imageView.layer.cornerRadius = 10
当 imageView 设置为 Aspect Fill 时有效。
但是当imageView设置为Aspect Fit模式时,imageView和图片的比例不一样。 圆角效果就看不出来了
背景颜色设置为绿色以显示圆角。
有什么方法可以设置'real image part'为圆角。
提前感谢您的回答。
试试这个可能对你有帮助:
import UIKit
class ViewController: UIViewController{
@IBOutlet weak var myImageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
myImageView.contentMode = UIViewContentMode.ScaleAspectFit
myImageView.clipsToBounds = true
//myImageView.layer.cornerRadius = 10.0
myImageView.layer.masksToBounds = true
let simpleImage = UIImage(named:"ipad5_einladung.jpg")
let corneredImage = generateRoundCornerImage(simpleImage!, radius: 10)
//Set cornered Image
myImageView.image = corneredImage;
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func generateRoundCornerImage(image : UIImage , radius : CGFloat) -> UIImage {
let imageLayer = CALayer()
imageLayer.frame = CGRectMake(0, 0, image.size.width, image.size.height)
imageLayer.contents = image.CGImage
imageLayer.masksToBounds = true
imageLayer.cornerRadius = radius
UIGraphicsBeginImageContext(image.size)
imageLayer.renderInContext(UIGraphicsGetCurrentContext())
let roundedImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return roundedImage
}
}
您首先需要将宽度和高度设置为相同的值。然后像这样设置图像属性:
imgProfile_Pic.layer.cornerRadius = cell.imgProfile_Pic.frame.size.height / 2
imgProfile_Pic.layer.borderWidth = 3.0
imgProfile_Pic.layer.borderColor = UIColor.white.cgColor
imgProfile_Pic.clipsToBounds = true
imgProfile_Pic.layoutIfNeeded()
将此扩展用于 UIImageView:
extension UIImageView
{
func roundCornersForAspectFit(radius: CGFloat)
{
if let image = self.image {
//calculate drawingRect
let boundsScale = self.bounds.size.width / self.bounds.size.height
let imageScale = image.size.width / image.size.height
var drawingRect: CGRect = self.bounds
if boundsScale > imageScale {
drawingRect.size.width = drawingRect.size.height * imageScale
drawingRect.origin.x = (self.bounds.size.width - drawingRect.size.width) / 2
} else {
drawingRect.size.height = drawingRect.size.width / imageScale
drawingRect.origin.y = (self.bounds.size.height - drawingRect.size.height) / 2
}
let path = UIBezierPath(roundedRect: drawingRect, cornerRadius: radius)
let mask = CAShapeLayer()
mask.path = path.cgPath
self.layer.mask = mask
}
}
}
像这样将图像视图四舍五入是非常简单的:
self.profileImageView?.clipsToBounds = true
self.profileImageView!.layer.cornerRadius = 10
self.profileImageView?.layer.borderWidth = 1.0
self.profileImageView?.contentMode = .ScaleAspectFit
但是为了使图像视图按图像比例四舍五入,我认为您必须将图像视图设置为 ScaleAspectFill 模式。
Swift 3 版本的有用的,被接受的答案在这里!
extension UIImageView {
func roundCornersForAspectFit(radius: CGFloat)
{
if let image = self.image {
//calculate drawingRect
let boundsScale = self.bounds.size.width / self.bounds.size.height
let imageScale = image.size.width / image.size.height
var drawingRect : CGRect = self.bounds
if boundsScale > imageScale {
drawingRect.size.width = drawingRect.size.height * imageScale
drawingRect.origin.x = (self.bounds.size.width - drawingRect.size.width) / 2
}else {
drawingRect.size.height = drawingRect.size.width / imageScale
drawingRect.origin.y = (self.bounds.size.height - drawingRect.size.height) / 2
}
let path = UIBezierPath(roundedRect: drawingRect, cornerRadius: radius)
let mask = CAShapeLayer()
mask.path = path.cgPath
self.layer.mask = mask
}
}
}
这是已接受的答案,转换为 Objective-C:
@implementation UIImageView(Utils)
- (void)roundCornersForAspectFitWithRadius:(CGFloat)cornerRadius {
if (self.image) {
double boundsScale = self.bounds.size.width / self.bounds.size.height;
double imageScale = self.image.size.width / self.image.size.height;
CGRect drawingRect = self.bounds;
if (boundsScale > imageScale) {
drawingRect.size.width = drawingRect.size.height * imageScale;
drawingRect.origin.x = (self.bounds.size.width - drawingRect.size.width) / 2;
}
else {
drawingRect.size.height = drawingRect.size.width / imageScale;
drawingRect.origin.y = (self.bounds.size.height - drawingRect.size.height) / 2;
}
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:drawingRect cornerRadius:cornerRadius];
CAShapeLayer *mask = [CAShapeLayer new];
[mask setPath:path.CGPath];
[self.layer setMask:mask];
}
}
@end
我想对 Arun 的回答发表评论,以帮助那些在执行 Arun 的方法时遇到问题的人,但在 Collection View 中,您必须将 imageView 的框架启动为 Collection View 单元格的框架。
即
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "identifier", for: indexPath) as UICollectionViewCell
let imageView = UIImageView(frame: cell.frame)
显然您想重构它和东西,但您明白了。
如果您在项目中使用SDWebImage
,您可以执行以下操作:
myUIImageView.image = myUIImage.sd_roundedCornerImage(withRadius: 24, corners: .allCorners, borderWidth: 0, borderColor: nil)