swift - Swift 中的阴影与 Sketch 中的完全不同

Question

我正在尝试将阴影应用于圆形的 tableView cell。

所以单元格 View 的层次结构是:

-TableView
 -Cell //height 85
  -ContentView //height 85
   -View //height 85
    -RoundedView //height 65

这就是我应用阴影的方式:

extension UIView{
    func dropShadow(x: CGFloat, y: CGFloat, cornerRadius: CGFloat, shadowRadius: CGFloat, color: CGColor, opacity: Float) {
        self.layer.cornerRadius = cornerRadius //Give the view corner radius
        self.layer.shadowColor = color //Shadow color
        self.layer.shadowOffset = CGSize(width: x, height: y)//Offset like in Sketch X and Y
        self.layer.shadowRadius = shadowRadius //It should be the blur in Sketch
        self.layer.shadowOpacity = 1.0
        self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius)).cgPath
        self.layer.shouldRasterize = true
        self.layer.rasterizationScale = UIScreen.main.scale
    }
}

这些是 Sketch 属性:

我什至从 Sketch 导出了阴影颜色:

cellShadow = UIColor(hue: 0.643, saturation: 0.061, brightness: 0.906, alpha: 0.5)//Alpha 0.5

这是 iPhone 上的输出:

这是 Sketch 中的设计:

为什么 iPhone 上的阴影会被切割，为什么颜色会有点不同(我用颜色选择器看是否匹配但不匹配)？我做错了什么，有人可以告诉我吗？

Answer 1

首先要注意的是您已将颜色设置为...

UIColor(hue: 0.643, saturation: 0.061, brightness: 0.906, alpha: 0.5)

这已经包括了 Sketch 的不透明度，因为 Sketch 定义了颜色中的阴影不透明度。

那么你在做这个...

layer.shadowOpacity = 0.5

然后采用该颜色(具有 50% 的不透明度)并对其应用 50% 的 alpha。所以现在您实际上拥有 25% 的不透明度。

在定义颜色时将 alpha 设置为 1。而不是 0.5。这会使颜色变暗。

你还没有展示你的其他阴影属性是如何在 Sketch 中设置的，所以我现在只能提供这些建议。

编辑

好的...

现在颜色看起来好多了。

截断的原因是你的影子半径太大了! (说真的，它需要那么大吗？通常 4 或 6 会削减它。20 是大材小用。)

发生这种情况的原因是“内容 View ”(上面有阴影的那个)和单元格边缘之间的距离不足以容纳完整的阴影。

垂直偏移量为 5，半径为 20，这意味着从“内容 View ”底部到单元格边缘至少需要 25 的距离才能完全显示阴影。 (顶部 15...20 - 5)。

另一种选择是禁用单元格上的 clipsToBounds... cell.clipsToBounds = false。这样做的缺点是您的阴影可能会发生碰撞，从而在重叠处产生较暗的 Blob 。

TBH 不过，只要减小半径，问题就会消失 :D