Question

我需要创建这种视图

这就是我能够创建的

这是替代的draw(_ rect: CGRect)方法。

override func draw(_ rect: CGRect) {
    let aPath = UIBezierPath()
    
    let curve: CGFloat = 8
    let inset: CGFloat = 15
    let maxHeight = rect.height - 20
    let minWidth: CGFloat = 2
    
    if isLeftCurved {
        aPath.move(to: CGPoint(x: minWidth + curve, y: 0))
    } else {
        aPath.move(to: CGPoint(x: 0, y: 0))
    }
    
    if isLeftCurved {
        aPath.addLine(to: CGPoint(x: rect.width-minWidth, y: 0))
        aPath.addLine(to: CGPoint(x: rect.width-minWidth, y: maxHeight))
    } else {
        aPath.addLine(to: CGPoint(x: rect.width-curve, y: 0))
        aPath.addQuadCurve(to: CGPoint(x: rect.width, y: curve), controlPoint: CGPoint(x: rect.width, y: 0))
        aPath.addLine(to: CGPoint(x: rect.width, y: maxHeight-curve))
        aPath.addQuadCurve(to: CGPoint(x: rect.width-curve, y: maxHeight), controlPoint: CGPoint(x: rect.width, y: maxHeight))
    }
    
    aPath.addLine(to: CGPoint(x: rect.width/2+inset, y: maxHeight))
    
    aPath.addCurve(to: CGPoint(x: rect.width/2-inset, y: maxHeight), controlPoint1: CGPoint(x: rect.width/2+inset, y: rect.height), controlPoint2: CGPoint(x: rect.width/2-inset, y: rect.height))
    
    if isLeftCurved {
        aPath.addLine(to: CGPoint(x: minWidth + curve, y: maxHeight))
        aPath.addQuadCurve(to: CGPoint(x: minWidth, y: maxHeight - curve), controlPoint: CGPoint(x: 0, y: maxHeight))
        aPath.addLine(to: CGPoint(x: minWidth, y: curve))
        aPath.addQuadCurve(to: CGPoint(x: minWidth + curve, y: 0), controlPoint: CGPoint(x: minWidth, y: 0))
    } else {
        aPath.addLine(to: CGPoint(x: minWidth, y: maxHeight))
        aPath.close()
    }
    
    R.color.segmentBackgroundColor()?.setFill()
    aPath.fill()
    R.color.segmentBackgroundColor()?.setStroke()
    aPath.stroke()
    
    let layer = CAShapeLayer()
    layer.path = aPath.cgPath

    let stroke = CAShapeLayer()
    let circlePath : UIBezierPath = UIBezierPath(arcCenter: CGPoint(x: rect.width/2, y: maxHeight), radius:
        CGFloat(11), startAngle: CGFloat(-90.degreesToRadians), endAngle: CGFloat(270.degreesToRadians), clockwise: true)
    selectionColor.setStroke()
    circlePath.lineWidth = 1
    circlePath.stroke()
    stroke.path = circlePath.cgPath
    layer.insertSublayer(stroke, at: 0)
    
    if isSelected {
        let circlePath : UIBezierPath = UIBezierPath(arcCenter: CGPoint(x: rect.width/2, y: maxHeight), radius:
            CGFloat(6), startAngle: CGFloat(-90.degreesToRadians), endAngle: CGFloat(270.degreesToRadians), clockwise: true)
        selectionColor.setFill()
        circlePath.fill()
        let stroke = CAShapeLayer()
        stroke.path = circlePath.cgPath
        layer.insertSublayer(stroke, at: 1)
    }
    
    self.layer.mask = layer
}

唯一的问题是阴影，我试图将阴影添加到self.layer，self.layer.mask，但输出相同。那么向自定义Layers或UIBezierPath添加阴影的正确方法是什么。谢谢。

Answer 1

一种简单的方法（未优化或未广为人知）是将阴影作为整个容器图像的一部分，这也覆盖了底部的单选按钮。

向自定义CLLayer蒙版添加阴影时出现问题

1 个答案: