不完全なUIBezierPathストローク

Question

私は、隣に配置された2つの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) 

私が代わりにUIBezierPathの

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

を使用している場合は、それが正常に動作します。また、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}> 

をそれは戻って最初に最終コーナーからのラインを持っているが、それは同じではありません閉路として最初のコーナーにはジョイントがないため、1つのジョイントではなく重なったラインキャップが描画されます。

これを試してみてください：

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