UIBezierPath で基本的なパスの描画方法をメモ。

UIBezierPath は UIKit に定義された CoreGraphics のラッパークラス。

目次

  1. 検証環境
  2. 基本的な描画フロー
  3. サンプル

検証環境

  • macOS 10.12.5
  • Xcode 8.3.2
  • Swift 3.1

基本的な描画フロー

  1. パスを追加する

    1. パスの開始
      let bezierPath = UIBezierPath()
    2. パスの追加
      このメモでは円。
      bezierPath.append(UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: self.bounds.width, height: self.bounds.height)))
    3. パスの終了
      bezierPath.close()
  2. パスを描画する

    1. 線の設定(オプション) このメモでは太さを1.0、色を赤。
      UIColor.red.setStroke()
      bezierPath.lineWidth = 1.0
    2. 塗りの設定(オプション) このメモでは黒。
      UIColor.black.setFill()
    3. 描画

      // 線だけを描画
      bezierPath.stroke()
      
      // 塗りだけを描画
      bezierPath.fill()
      
      // 線と塗りの描画
      bezierPath.stroke()
      bezierPath.fill()

サンプル

正円を描画する

override func draw(_ rect: CGRect) {
    let diameter = min(self.bounds.width, self.bounds.height)
    let radius = diameter / 2
    let center = CGPoint(x: self.bounds.width / 2, y: self.bounds.height / 2)

    let bezierPath = UIBezierPath(ovalIn: CGRect(x: center.x - radius, y: center.x - radius, width: diameter, height: diameter))

    UIColor.black.setFill()
    bezierPath.fill()
}

半円を描画する

override func draw(_ rect: CGRect) {
    let lineWidth: CGFloat = 1.0
    let diameter = min(self.bounds.width, self.bounds.height) - lineWidth * 2 - lineWidth
    let radius = diameter / 2
    let center = CGPoint(x: self.bounds.width / 2, y: self.bounds.height / 2)
    let startAngle = -90.0 * CGFloat.pi / 180.0
    let endAngle = startAngle + CGFloat.pi

    let bezierPath = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
    bezierPath.close()

    bezierPath.lineWidth = lineWidth
    UIColor.black.setStroke()
    UIColor.gray.setFill()
    bezierPath.stroke()
    bezierPath.fill()
}

正円の中に小さな半円を描画する

override func draw(_ rect: CGRect) {
    let lineWidth: CGFloat = 1.0
    let diameter = min(self.bounds.width, self.bounds.height) - lineWidth * 2 - lineWidth
    let radius = diameter / 2
    let quarter = radius / 2
    let center = CGPoint(x: self.bounds.width / 2, y: self.bounds.height / 2)
    let startAngle = -90.0 * CGFloat.pi / 180.0
    let endAngle = startAngle + CGFloat.pi

    let circlePath = UIBezierPath(ovalIn: CGRect(x: center.x - radius, y: center.y - radius, width: diameter, height: diameter))

    circlePath.lineWidth = lineWidth
    UIColor.black.setStroke()
    UIColor.gray.setFill()
    circlePath.stroke()
    circlePath.fill()

    let semiCirclePath = UIBezierPath(arcCenter: center, radius: quarter, startAngle: startAngle, endAngle: endAngle, clockwise: true)
    semiCirclePath.close()

    semiCirclePath.lineWidth = lineWidth
    UIColor.black.setStroke()
    UIColor.white.setFill()
    semiCirclePath.stroke()
    semiCirclePath.fill()
}

Next PostPrevious Post