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

目次

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

検証環境

  • macOS 10.12.5
  • Xcode 8.3.2
  • Swift 3.1

基本的な描画フロー

  1. グラフィックコンテキストを取得する

    let context = UIGraphicsGetCurrentContext()
  2. パスを追加する

    1. パスの開始
      context.beginPath()
    2. パスの追加
      このメモでは円。
      context.addEllipse(in: CGRect(x: 0, y: 0, width: self.bounds.width, height: self.bounds.height))
    3. パスの終了
      context.closePath()
  3. パスを描画する

    1. 線の設定(オプション) このメモでは太さを1.0、色を赤。
      context.setLineWidth(1.0)
      context.setStrokeColor(UIColor.red.cgColor)
    2. 塗りの設定(オプション) このメモでは黒。
      context.setFillColor(UIColor.black.cgColor)
    3. 描画

      // 線だけを描画
      context.strokePath()
      // または
      context.drawPath(using: .stroke)
      
      // 塗りだけを描画
      context.fillPath()
      // または
      context.drawPath(using: .fill)
      
      // 線と塗りの描画
      context.strokePath()
      context.fillPath()
      // または
      context.drawPath(using: .fillStroke)

サンプル

正円を描画する

override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }

    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)

    context.beginPath()
    context.addEllipse(in: CGRect(x: center.x - radius, y: center.y - radius, width: diameter, height: diameter))
    context.closePath()

    context.setFillColor(UIColor.black.cgColor)
    context.fillPath()
}

半円を描画する

override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }

    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

    context.beginPath()
    context.move(to: center)
    context.addArc(center: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)
    context.closePath()

    context.setLineWidth(lineWidth)
    context.setStrokeColor(UIColor.black.cgColor)
    context.setFillColor(UIColor.gray.cgColor)
    context.drawPath(using: .fillStroke)
}

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

override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }

    let lineWidth: CGFloat = 2.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

    context.beginPath()
    context.addEllipse(in: CGRect(x: center.x - radius, y: center.y - radius, width: diameter, height: diameter))
    context.closePath()

    context.setLineWidth(lineWidth)
    context.setStrokeColor(UIColor.black.cgColor)
    context.setFillColor(UIColor.gray.cgColor)
    context.drawPath(using: .fillStroke)

    context.beginPath()
    context.move(to: center)
    context.addArc(center: center, radius: quarter, startAngle: startAngle, endAngle: endAngle, clockwise: false)
    context.closePath()

    context.setLineWidth(lineWidth)
    context.setFillColor(UIColor.white.cgColor)
    context.drawPath(using: .fill)
}

Next PostPrevious Post