2017-07-27 79 views
1

我使用兩個放在一起的UIButtons在iOS上創建分割按鈕。像這樣:不完整的UIBezierPath筆畫

enter image description here

正如你可以看到,有取出右側按鈕的左上角這是不可取的一小口。我想讓中風的那部分完整。

右邊的按鈕使用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的左上角,它也可以正常工作。

任何人都可以幫我弄清楚如何以我想要的方式繪製邊框? 在此先感謝!

回答

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