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)

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

4 个答案: