UIBezierPathの角を丸くする

# UIBezierPathの角を丸くする

## init(rect: CGRect)

```swift
let bezierPath = UIBezierPath(rect: rect)
strokColor.setStroke()
fillColor.setFill()
bezierPath.lineWidth = 3
bezierPath.stroke()
bezierPath.fill()
```

<img width="200" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/6d586ad2-936b-c174-6523-bf4f4b2bd2bf.png">

普通のRectです。角は丸くならない。

## init(ovalIn: CGRect)

```swift
let bezierPath = UIBezierPath(ovalIn: rect)
strokColor.setStroke()
fillColor.setFill()
bezierPath.lineWidth = 3
bezierPath.stroke()
bezierPath.fill()
```

<img width="200" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/ab9f230d-0593-4afe-c848-c51c2c0a1ad3.png">

楕円なので角はない。Rectによって自動で決まるので調節はできない。

## init(roundedRect: CGRect, cornerRadius: CGFloat)

```swift
let bezierPath = UIBezierPath(roundedRect: rect, cornerRadius: 50)
strokColor.setStroke()
fillColor.setFill()
bezierPath.lineWidth = 3
bezierPath.stroke()
bezierPath.fill()
```

<img width="200" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/3c4e4a98-38ce-de64-bae0-afac72a32608.png">

４つ角が丸くなる。曲がり具合も調節できる。
上だけ丸くしたいとかはできない。


## init(roundedRect: CGRect, byRoundingCorners: UIRectCorner, cornerRadii: CGSize)

```swift
let bezierPath = UIBezierPath(roundedRect: rect, byRoundingCorners: .init(rawValue: 0), cornerRadii: CGSize(width: 50, height: 50))
strokColor.setStroke()
fillColor.setFill()
bezierPath.lineWidth = 5
bezierPath.stroke()
bezierPath.fill()
```

<img width="200" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/1a400520-1590-0e71-0798-b3ff9bd98eb6.png">




これだと角が丸くなっていません。
パラメーター`byRoundingCorners`の`.init(rawValue: Int)`の`Int`部分ををいろいろ変更してみた。
Rectの頂点における全ての組み合わせで角を丸くできます。

| 1 | 2 | 3 | 4 |
|:-:|:-:|:-:|:-:|
| <img width="261" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/8e342eac-eced-37e7-e9c0-62ac2b3c78ee.png"> | <img width="260" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/db642203-fbad-bf7f-134e-a411d93463fd.png"> | <img width="261" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/8226348c-4850-0709-ef69-b952ecdd9d5a.png"> | <img width="263" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/751eb15e-4137-5a59-0d52-81fb003bfd8e.png"> |

| 5 | 6 | 7 | 8 |
|:-:|:-:|:-:|:-:|
| <img width="261" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/79ad3967-9b9f-2b51-fe35-37fb70a8c646.png"> | <img width="264" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/4411ebc0-df83-e284-ab5b-4c0cc538ccd7.png"> | <img width="264" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/8d7ff841-c3d3-7d79-e78c-f63b7ee1921e.png"> | <img width="266" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/7b5161ad-978b-cf2a-06bf-977b2f21b749.png"> |

| 9 | 10 | 11 | 12 |
|:-:|:-:|:-:|:-:|
| <img width="263" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/a1467ac7-2003-82ca-e8ac-b3a0b0fb285e.png"> | <img width="266" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/5d1f3175-b544-0bb5-b394-9b9d68b3c17e.png"> | <img width="267" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/11f57f9c-0c10-15ba-e438-64d29235a551.png"> | <img width="265" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/5ed2d0c2-d0cc-c75f-ae95-cfcd90cf57c1.png"> | 

| 13 | 14 | 15 | 16 |
|:-:|:-:|:-:|:-:|
| <img width="266" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/197c7e10-c2b5-5dca-595e-4e0c1294dfe3.png"> | <img width="268" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/46f94f12-3237-4c17-d4ab-e3a6608ba327.png"> | <img width="266" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/2167a3e7-53bc-ad9d-d9e3-90bdd7b8649e.png"> | <img width="265" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/36781311-f0a5-8455-c172-d2f8618b6a91.png"> |


### （追記）

`byRoundingCorners`は`topLeft`, `topRight`, `bottomLeft`, `bottomRight`, `allCorners`で指定できます。 

```swift
let bezierPath = UIBezierPath(roundedRect: rect, byRoundingCorners: .topLeft, cornerRadii: CGSize(width: 50, height: 50))
```

これらは組み合わせで指定できるので、次のようにすると上記の`.init(rawValue: 3)`よりも直感的に表現できますね。

```swift
let bezierPath = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 50, height: 50))
```


## lineCapStyle

```swift
let bezierPath = UIBezierPath()
bezierPath.move(to: CGPoint(x: frame.size.width / 2, y: 500))
bezierPath.addLine(to: CGPoint(x: frame.size.width / 2, y: 100))
strokColor.setStroke()
bezierPath.lineWidth = 100
bezierPath.lineCapStyle = .round
bezierPath.stroke()
```

`move`や`addLine`を使って描画したパスの角を丸くするには、`lineCapStyle`を`round`に変更する。

パスを閉じる場合は`lineJoinStyle`を使う。

```swift
let bezierPath = UIBezierPath()
bezierPath.move(to: CGPoint(x: frame.size.width / 2, y: 500))
bezierPath.addLine(to: CGPoint(x: frame.size.width / 2, y: 100))
bezierPath.close()    // パスを閉じる
strokColor.setStroke()
bezierPath.lineWidth = 100
bezierPath.lineJoinStyle = .round  // lineCapStyleではない
bezierPath.stroke()
```

| lineCapStyle | lineJoinStyle |
|:-:|:-:|
|  <img width="200" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/b0c8fc98-93b2-ccce-ac0d-1b48c4cb3849.png"> |  <img width="200" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/129900/f10ee7c8-974d-dfb3-c3f0-e8c4a78eeac6.png"> |