Swift - 将图像添加到圆形视图

问题描述：

我有一个具有圆角半径和阴影的自定义视图，并且我试图在其中添加图像。图像应位于圆形区域内。但是，我在视图中看到了一个黑色区域，图像应该是这样的（或者图像是一个正方形，没有圆角，在我最后一次尝试时）。我如何添加此图片？Swift - 将图像添加到圆形视图

错误的结果我得到：

我的代码：

import Foundation 
import UIKit 

@IBDesignable 

class RoundedSquareView: UIView { 
    var shadowLayer: CAShapeLayer! 
    @IBInspectable var image: UIImage! = UIImage() 

    override func layoutSubviews() { 
    super.layoutSubviews() 

    if shadowLayer == nil { 
     shadowLayer = CAShapeLayer() 
     shadowLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: 14).cgPath 
     shadowLayer.fillColor = UIColor.white.cgColor 

     shadowLayer.shadowColor = UIColor.darkGray.cgColor 
     shadowLayer.shadowPath = shadowLayer.path 
     shadowLayer.shadowOffset = CGSize(width: 0, height: 10.0) 
     shadowLayer.shadowOpacity = 0.3 
     shadowLayer.shadowRadius = 10 

     layer.insertSublayer(shadowLayer, at: 0) 
    } 

    let imgLayer = CAShapeLayer() 
    let myImage = image.cgImage 
    imgLayer.frame = bounds 
    imgLayer.masksToBounds = true 
    imgLayer.contents = myImage 
    imgLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: 14).cgPath 
    imgLayer.cornerRadius = 14 
    layer.addSublayer(imgLayer) 
    } 

}

编辑：

预期的结果：

答

你可以尝试一个简单的扩展。这里有一个例子：

extension UIImageView { 
    func render(with radius: CGFloat) { 

     // add the shadow to the base view 
     self.backgroundColor = UIColor.clear 
     self.layer.shadowColor = UIColor.black.cgColor 
     self.layer.shadowOffset = CGSize(width: 0, height: 10) 
     self.layer.shadowOpacity = 0.3 
     self.layer.shadowRadius = 10 

     // add a border view for corners 
     let borderView = UIView() 
     borderView.frame = self.bounds 
     borderView.layer.cornerRadius = radius 
     borderView.layer.masksToBounds = true 
     self.addSubview(borderView) 

     // add the image for clipping 
     let subImageView = UIImageView() 
     subImageView.image = self.image 
     subImageView.frame = borderView.bounds 
     borderView.addSubview(subImageView) 

     //for performance 
     self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: 10).cgPath 
     self.layer.shouldRasterize = true 
     self.layer.rasterizationScale = UIScreen.main.scale 
    } 
}

用法：

myImageView.image = image 
myImageView.render(with: 10)

显然，只要你想，你可以添加许多参数扩展，默认设置，它分成单独的方法等

结果：

我已经在应用我想把这个图像放在这个自定义的视图上，视图应该是圆的，有阴影，并且有一个图像在里面 –

Post edit。请看看我想要的结果， m试图实现。 –

更新完整的扩展 – Frankie

答

您可以添加图像，并给它一些属性来使它圆滑。当你拥有的属性选项卡上的uImage选择点击在

layer.cornerRadius

点击“+”和类型，将其更改为一个数字，而不是字符串。所有数字1-50工作。如果你想要一个完美的圆圈，然后输入50.

我已经这样做了。检查代码的最后部分。不是那样工作:( –

刚刚编辑了添加预期结果的帖子，请看一下，PS：我没有将cornerRadius应用到故事板上的视图，因为它会杀死阴影图层 –

答

你要做的F ollowing下面super.layoutSubviews()：

self.clipToBound = true

什么是ClipToBound？

clipsToBounds属性

一个布尔值，它确定是否子视图被限制在视图的边界。

讨论将此值设置为YES会导致子视图被剪裁到接收器边界的。如果设置为“否”，则不会剪裁超出接收器可见边界的框架延伸为的子视图。默认值为NO。

图像层已经有imgLayer.masksToBounds = true。不工作。这应该工作在这个自定义视图。视图应该四舍五入，用一个阴影层，并在里面有一个图像 –

我在谈论clipToBounds，没有masksToBounds（这里是区别：http://stackoverflow.com/a/39466262/4077559）我只是e点击我的答案@CharlesPrado –

刚刚编辑的帖子添加预期的结果。请看一下。 PS：我没有将cornerRadius应用于故事板上的视图，因为它会杀死阴影层。 –

答

你可以尝试删除：

let imgLayer = CAShapeLayer() 
let myImage = image.cgImage

并与替换代码：

Image.frame = bounds 
Image.masksToBounds = true 
Image.contents = myImage 
Image.path = UIBezierPath(roundedRect: bounds, cornerRadius: 14).cgPath 
Image.cornerRadius = 14

的Xcode可能不会喜欢你给人的形象的别名。

那么你还需要在括号内写的UIView的

Layer.addsublayer(Image)

但图像是UIImage ...不是UIImageView。这样图像不会被添加到视图:( –

在UIView写入，'layer.addsublayer（Image）'不写在与图像属性相同的括号 –

@CharlesPrado我更新了我的代码 –

Swift - 将图像添加到圆形视图

相关推荐