SwiftUI Tutorials: 5日目

今日のお題目は「Drawing Paths and Shapes」。といっても、今回はチュートリアルをざっと眺めて感触を掴んだだけ。

いわゆる、これまでCoreGraphics APIやCAShapeLayer, CAGradientLayerなどを使って実現していた図形描画をSwiftUIではどのように行うか、という内容だった。

これまで、プログラムで図形を描きたければ

  • CoreGraphics APIをもちいて、
    • drawRect(_:) に描画する
    • 描画した結果をUIImageとして生成し、UIImageViewに設定
  • UIBezierPathなどで作成したパスをもとにCAShapeLayerを生成
  • CAGradientLayerでグラデーションを描画

などさまざまな方法があった。それに、CoreGraphics APIひとつとっても、描画するためには次のような一定の実装を要するため、冗長になりがちだった。

UIGraphicsBeginImageContextWithOptions(...)
let ctx = UIGraphicsGetCurrentContext()
//パス生成、描画処理
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

 

それがSwiftUIではいくつかの点で単純明快となった。

  • View.bodyの中に描画処理を実装
    • Path { path in /*pathで図形生成*/  }
      • pathの点移動や線追加の仕方はCoreGraphicsの書き方に似ている
    • Path { … }.fill(color) で塗りつぶし
      • color: UIColor なら単色
      • color: LinearGradient なら線形グラデーション
        • 他にも AngularGradient, RadialGradient
    • GeometryReaderから、Viewの幾何情報を取得できる
  • ZStackで描画結果をレイヤーのように重ね合わせられる

 

しかし上にも記した通り、図形をプログラムで再現するというのは、一定の幾何学的な知識はもとより、コツを掴む必要はあるだろう。それは、このチュートリアルの一見の難解さからも分かる通りだ。

コメントを残す