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

Question

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

所以单元格视图的层次结构是：

-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个就大材小用了。）

发生这种情况的原因是 "content view"（上面有阴影的那个）和单元格边缘之间的距离不足以容纳完整的阴影。

垂直偏移量为 5，半径为 20，这意味着从 "content view" 底部到单元格边缘至少需要 25 的距离才能完全显示阴影。（顶部 15...20 - 5）。

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

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

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

Shadows in Swift are totally different than in Sketch

swift

sketchapp