ios - 如何控制阴影扩散和模糊？

Question

我在 sketch 中设计了 UI 元素，其中一个有一个 blur 1 和 spread 0 的阴影。我查看了 View 图层属性的文档，图层没有任何名为 spread 或 blur 的东西，或任何等效的东西(唯一的控制只是 shadowOpacity)。如何控制模糊和扩散之类的东西？

这是我在 Sketch 中的设置:

这是我希望我的影子看起来像的样子:

这是它现在的样子:

请注意，您必须单击图片才能真正看到阴影。

我的代码如下:

func setupLayer(){
    view.layer.cornerRadius = 2
    view.layer.shadowColor = Colors.Shadow.CGColor
    view.layer.shadowOffset = CGSize(width: 0, height: 1)
    view.layer.shadowOpacity = 0.9
    view.layer.shadowRadius = 5
}

Answer 1

以下是如何以近乎完美的精度将所有 6 个 Sketch 阴影属性应用到 UIView 的图层:

extension CALayer {
  func applySketchShadow(
    color: UIColor = .black,
    alpha: Float = 0.5,
    x: CGFloat = 0,
    y: CGFloat = 2,
    blur: CGFloat = 4,
    spread: CGFloat = 0)
  {
    masksToBounds = false
    shadowColor = color.cgColor
    shadowOpacity = alpha
    shadowOffset = CGSize(width: x, height: y)
    shadowRadius = blur / 2.0
    if spread == 0 {
      shadowPath = nil
    } else {
      let dx = -spread
      let rect = bounds.insetBy(dx: dx, dy: dx)
      shadowPath = UIBezierPath(rect: rect).cgPath
    }
  }
}

假设我们要表示以下内容:

您可以通过以下方式轻松做到这一点:

myView.layer.applySketchShadow(
  color: .black, 
  alpha: 0.5, 
  x: 0, 
  y: 0, 
  blur: 4, 
  spread: 0)

或更简洁:

myView.layer.applySketchShadow(y: 0)

例子:

Left: iPhone 8 UIView screenshot; right: Sketch rectangle.

注意:

• 当使用非零spread 时，它会根据 CALayer 的 bounds 对路径进行硬编码。如果图层的边界发生变化，您需要再次调用 applySketchShadow() 方法。