不完整的 UIBezierPath 描边

Question

我正在使用两个并排放置的 UIButton 在 iOS 上创建一个拆分按钮。像这样：

如您所见，右侧按钮的左上角被咬掉了一小块，这是不合需要的。我想完成那部分笔画。

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

不完整的 UIBezierPath 描边

Incomplete UIBezierPath Stroke

core-graphics

uikit

ios

uibezierpath

swift3