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

Question

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

我得到的错误结果：

我的代码：

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

}

编辑：

预期结果：

Answer 1

您可以尝试一个简单的扩展。这是一个例子：

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)

显然，您可以向扩展添加任意数量的参数、设置默认值、将其分解为单独的方法等。

结果：

Answer 2

您可以只添加图像并为其赋予一些属性以使其圆润。 选择 UImage 后，单击属性选项卡，然后单击“+”并输入

layer.cornerRadius

并将其更改为数字而不是字符串。所有数字 1-50 工作。如果您想要一个完美的圆圈，请输入 50。

Answer 3

您必须在super.layoutSubviews()下面执行以下操作：

self.clipToBound = true

什么是 ClipToBound？

clipsToBounds 属性

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

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

Answer 4

您可以尝试删除：

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)