ios - UIBezierPath行程不完整

Question

我正在使用两个彼此相邻放置的UIButton在iOS上创建一个Split Button。像这样:



如您所见，右按钮的左上角有一小口，这是不可取的。我想中风的那部分完成。

右侧按钮使用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