swift - 如何使用 SF Symbol 作为图像从 UIImageView 转换两个阴影？

Question

我想在我的图像的左下角和右下角投下阴影。但是我正在努力获得第二个阴影转换(layer2)......



我创建了 UIImage View 的子类并在 IB 中使用它:

import UIKit

class ShadowImageView: UIImageView {

    var layer2 = CALayer()

    override func layoutSubviews() {
        super.layoutSubviews()

        self.layer2 = CALayer(layer: self.layer)

        self.clipsToBounds = false

        self.layer.shadowColor = UIColor.gray.cgColor
        self.layer.shadowOffset = CGSize(width: -16, height: 16)
        self.layer.shadowOpacity = 0.33
        self.layer.shadowRadius = 3
        self.layer.masksToBounds = false

        self.layer2.shadowColor = UIColor.gray.cgColor
        self.layer2.shadowOffset = CGSize(width: 16, height: 16)
        self.layer2.shadowOpacity = 0.33
        self.layer2.shadowRadius = 3
        self.layer2.masksToBounds = false

        self.layer.insertSublayer(self.layer2, at: 0)

        print("\(self.layer)\n")
        if let sublayers = self.layer.sublayers {
            for layer in sublayers {
                print("\(layer)\n")
            }
        }
    }
}

我是朝着正确的方向复制图层并为其应用新阴影，还是应该朝不同的方向看？

Answer 1

修复了阴影问题。通过在 UIView 上添加 3 个图层，我能够生成双重阴影。最远的后面( View 层的第一个子层)是较暗的阴影，在它上面的是较亮的阴影，在它上面我有一个具有正常颜色的阴影。
我通过应用阴影路径和颜色在图层上“绘制”图像。
我正在绘制的图像来自下面列出的方法，但它不是从 SFSymbols 生成的。我想在运行时生成它，所以我最终使用了一个简单的方法来使用符号在我们的应用程序中放置 Neumorphic 元素。这些 BezierPath 的手动生成并不是很愉快。

static var shieldFill: UIBezierPath = {
    let bezierPath = UIBezierPath()
    bezierPath.move(to: CGPoint(x: 58.94, y: 115.53))
    bezierPath.addCurve(to: CGPoint(x: 62.84, y: 114.4), controlPoint1: CGPoint(x: 60.06, y: 115.53), controlPoint2: CGPoint(x: 61.57, y: 115.04))
    bezierPath.addCurve(to: CGPoint(x: 101.76, y: 74.46), controlPoint1: CGPoint(x: 91.5, y: 100.49), controlPoint2: CGPoint(x: 101.76, y: 91.89))
    bezierPath.addLine(to: CGPoint(x: 101.76, y: 39.94))
    bezierPath.addCurve(to: CGPoint(x: 92.04, y: 25.05), controlPoint1: CGPoint(x: 101.76, y: 31.84), controlPoint2: CGPoint(x: 99.41, y: 28.12))
    bezierPath.addCurve(to: CGPoint(x: 67.63, y: 16.85), controlPoint1: CGPoint(x: 87.89, y: 23.29), controlPoint2: CGPoint(x: 71.29, y: 17.97))
    bezierPath.addCurve(to: CGPoint(x: 58.94, y: 15.53), controlPoint1: CGPoint(x: 64.94, y: 16.11), controlPoint2: CGPoint(x: 61.52, y: 15.53))
    bezierPath.addCurve(to: CGPoint(x: 50.24, y: 16.85), controlPoint1: CGPoint(x: 56.35, y: 15.53), controlPoint2: CGPoint(x: 52.93, y: 16.11))
    bezierPath.addCurve(to: CGPoint(x: 25.83, y: 25.05), controlPoint1: CGPoint(x: 46.53, y: 17.97), controlPoint2: CGPoint(x: 29.93, y: 23.29))
    bezierPath.addCurve(to: CGPoint(x: 16.11, y: 39.94), controlPoint1: CGPoint(x: 18.46, y: 28.12), controlPoint2: CGPoint(x: 16.11, y: 31.84))
    bezierPath.addLine(to: CGPoint(x: 16.11, y: 74.46))
    bezierPath.addCurve(to: CGPoint(x: 55.03, y: 114.4), controlPoint1: CGPoint(x: 16.11, y: 91.89), controlPoint2: CGPoint(x: 26.46, y: 100.29))
    bezierPath.addCurve(to: CGPoint(x: 58.94, y: 115.53), controlPoint1: CGPoint(x: 56.3, y: 115.04), controlPoint2: CGPoint(x: 57.76, y: 115.53))
    bezierPath.close()

    return bezierPath
}()