CAShapeLayer 凹槽路径

Question

我想制作一个白色的视图，里面有一个三角形的指针，如下所示：

如上图所示，目标是创建一个 "rounded groove" 插入到 white 视图

    let pointerRadius:CGFloat = 4
    pointerLayer = CAShapeLayer()
    pointerLayer.path = pointerPathForContentSize(contentSize: bounds.size).cgPath
    pointerLayer.lineJoin = kCALineJoinRound
    pointerLayer.lineWidth = 2*pointerRadius
    pointerLayer.fillColor = UIColor.white.cgColor
    pointerLayer.strokeColor = UIColor.black.cgColor
    pointerLayer.backgroundColor = UIColor.white.cgColor

    layer.addSublayer(pointerLayer)

但我得到的是：

但是，如果我将描边颜色设置为白色

pointerLayer.strokeColor = UIColor.white.cgColor

在凹槽中，我想在底部有一个 rounded edge（就像在第一张图片中一样），当 fillColor 和 strokeColor 匹配（均为白色）时，它不再可见。我该如何解决？还有其他方法可以实现吗？

指针路径的代码如下：

private func pointerPathForContentSize(contentSize: CGSize) -> UIBezierPath
{
    let rect = CGRect(x: 0, y: 0, width: contentSize.width, height: contentSize.height)

    let width:CGFloat = 20
    let height:CGFloat = 20

    let path = UIBezierPath()


    let startX:CGFloat = 50
    let startY:CGFloat = rect.minY
    path.move(to: CGPoint(x: startX , y: startY))
    path.addLine(to: CGPoint(x: (startX + width*0.5), y: startY + height))


    path.addLine(to: CGPoint(x: (startX + width), y: startY))

    path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
    path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
    path.addLine(to: CGPoint(x: rect.minX, y: rect.minY))


    path.close()
    return path
}

Answer 1

既然你已经通过描边路径勾勒出你想要的形状，我认为最简单的解决方案可能是使用描边和填充路径作为遮罩。

例如，这里是一个矩形的红色视图：

这里是同一个红色视图，顶部的缺口被切掉了。这似乎是您想要的东西：

我在那里做的是用一个特殊的遮罩视图遮盖红色视图，该遮罩视图使用 .clear 混合模式绘制凹口：

class MaskView : UIView {
    override init(frame: CGRect) {
        super.init(frame:frame)
        self.isOpaque = false
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    override func draw(_ rect: CGRect) {
        let con = UIGraphicsGetCurrentContext()!
        con.fill(self.bounds)
        con.setBlendMode(.clear)
        con.move(to: CGPoint(x:0, y:-4))
        con.addLine(to: CGPoint(x:100, y:-4))
        con.addLine(to: CGPoint(x:110, y:15))
        con.addLine(to: CGPoint(x:120, y:-4))
        con.addLine(to: CGPoint(x: self.bounds.maxX, y:-4))
        con.addLine(to: CGPoint(x: self.bounds.maxX, y:-20))
        con.addLine(to: CGPoint(x: 0, y:-20))
        con.closePath()
        con.setLineJoin(.round)
        con.setLineWidth(10)
        con.drawPath(using: .fillStroke) // stroke it and fill it
    }
}

所以当我准备好在红色视图上剪掉缺口时，我只是说：

self.redView.mask = MaskView(frame:self.redView.bounds)

CAShapeLayer 凹槽路径

CAShapeLayer groove path

cashapelayer

ios

swift