代码之家 › 专栏 › 技术社区 › leedex

将阴影添加到形状已被uibezierPath更改的uiview

uiview swift ios

leedex · 技术社区 · 6 年前

我已经为uiview创建了一个扩展,允许我做一个凹形。

extension UIView {
    func createConcave(depth: CGFloat) {
    let width = self.bounds.width
    let height = self.bounds.height

    let path = UIBezierPath()
    let p0 = CGPoint(x: 0, y: 0)
    let p2 = CGPoint(x: width, y: 0)
    let p1 = CGPoint(x: width / 2, y: depth)
    path.move(to: p0)
    path.addQuadCurve(to: p2, controlPoint: p1)
    path.addLine(to: CGPoint(x: width, y: height))
    path.addLine(to: CGPoint(x: 0, y: height))
    path.addLine(to: p0)
    let mask = CAShapeLayer()
    mask.path = path.cgPath
    self.layer.mask = mask
    self.layer.masksToBounds = false
    }
}

将阴影添加到与形状匹配的视图中有什么好的解决方案?我必须指定阴影路径与凹形路径相同吗?

1 回复 | 直到 6 年前

Rob Md Fahim Faez Abir 6 年前

您正在将层剪切到路径。因此,任何东西,包括影子,都将被掩盖。

添加子层而不是遮罩。

例如。

@IBDesignable
class ConcaveView: UIView {
    @IBInspectable var depth: CGFloat = 10         { didSet { updatePath() } }
    @IBInspectable var fillColor: UIColor = .red   { didSet { shapeLayer.fillColor = fillColor.cgColor } }

    private lazy var shapeLayer: CAShapeLayer = {
        let shapeLayer = CAShapeLayer()
        shapeLayer.fillColor = fillColor.cgColor
        shapeLayer.shadowColor = UIColor.black.cgColor
        shapeLayer.shadowRadius = 5
        shapeLayer.shadowOpacity = 1
        shapeLayer.shadowOffset = .zero
        return shapeLayer
    }()

    override init(frame: CGRect = .zero) {
        super.init(frame: frame)
        configure()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        configure()
    }

    func configure() {
        layer.addSublayer(shapeLayer)
        clipsToBounds = false
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        updatePath()
    }

    func updatePath() {
        let path = UIBezierPath()
        let point0 = CGPoint(x: bounds.minX, y: bounds.minY)
        let point2 = CGPoint(x: bounds.maxX, y: bounds.minY)
        let point1 = CGPoint(x: bounds.width / 2, y: bounds.minY + depth)
        path.move(to: point0)
        path.addQuadCurve(to: point2, controlPoint: point1)
        path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
        path.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
        path.addLine(to: point0)

        shapeLayer.path = path.cgPath
    }
}

收益率: