不完整的UIBezierPath笔划

Question

我在iOS上使用两个彼此相邻的UIButton创建一个分割按钮。像这样：

正如您所看到的，从右侧按钮的左上角取出一小口是不可取的。我想完成中风的那部分。

右键使用UIBezierPath作为子图层在按钮周围绘制边框：

let borderWidth = CGFloat(4.0)
let borderLayer = CAShapeLayer()

var borderFrame = button.bounds.insetBy(dx: borderWidth/2.0, dy: borderWidth/2.0)

borderLayer.frame = borderFrame
borderFrame.origin = CGPoint.zero

borderLayer.path = UIBezierPath(roundedRect: borderFrame, byRoundingCorners: [.topRight, .bottomRight], cornerRadii: radius).cgPath

borderLayer.lineWidth = borderWidth
borderLayer.fillColor = UIColor.white.cgColor
borderLayer.strokeColor = UIColor.green.cgColor

button.layer.addSublayer(borderLayer)

如果我使用

borderLayer.path = CGPath(rect: borderFrame, transform: nil)

而不是UIBezierPath，它工作正常。如果我绕过UIBezierPath的左上角，它也可以正常工作。

任何人都可以帮我弄清楚如何以我喜欢的方式绘制边框吗？ 提前谢谢！

Answer 1

Although UIBezierPath(roundedRect:byRoundingCorners:cornerRadii:) is documented to return a closed subpath，在我的测试中没有：

import UIKit

let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 40, height: 40), byRoundingCorners: [.topRight, .bottomRight], cornerRadii: CGSize(width: 10, height: 10))
print(path)

输出：

<UIBezierPath: 0x6180000a5d00; <MoveTo {0, 0}>,
 <LineTo {24.713349999999998, 0}>,
 <CurveTo {33.300654247944713, 0.65495893024402596} {29.115070423814711, 0} {31.315930559369978, 0}>,
 <LineTo {33.685062071690076, 0.74911387847016009}>,
 <CurveTo {39.250886121529845, 6.3149379283099272} {36.27176173374253, 1.6905955604436995} {38.30940443955631, 3.7282382662574722}>,
 <CurveTo {40, 15.286649847295823} {40, 8.6840694406300223} {40, 10.884929576185289}>,
 <LineTo {40, 24.713349999999998}>,
 <CurveTo {39.345041069755972, 33.300654247944713} {40, 29.115070423814711} {40, 31.315930559369978}>,
 <LineTo {39.250886121529845, 33.685062071690076}>,
 <CurveTo {33.685062071690076, 39.250886121529838} {38.30940443955631, 36.27176173374253} {36.27176173374253, 38.309404439556296}>,
 <CurveTo {24.713350152704177, 40} {31.315930559369978, 40} {29.115070423814711, 40}>,
 <LineTo {0, 40}>,
 <LineTo {0, 0}>,
 <LineTo {0, 0}>

它有从最后一个角落到第一个角落的一条线，但这与封闭路径不同。在第一个角落没有关节，所以它绘制重叠的线帽而不是单个关节。

试试这个：

let path = UIBezierPath(roundedRect: borderFrame, byRoundingCorners: [.topRight, .bottomRight], cornerRadii: radius)
path.close()
borderLayer.path = path.cgPath