【SwiftUI】アフィン変換を使った図形変換(CGAffineTransform)

アフィン変換を使った図形変換について解説します。
CGAffineTransformは図形変換情報をアフィン変換行列形式で保持する構造体です。
頭のCGはAppleの描画系フレームワーク(Core Graphics)の略です。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6
スポンサーリンク

アフィン変換とは?

幾何学の分野で、図形を回転したり引き伸ばしたりする変換をアフィン変換と呼びます。
アフィン変換行列は、図形オブジェクトを回転、拡大縮小、移動、または傾斜させるために使用される3x3の行列です。
CGAffineTransformは図形変換情報をアフィン変換行列形式で保持する構造体です。

この記事では、アフィン変換行列そのものの説明は省略し、CGAffineTransformを使って実現する基本的な図形変更方法を解説します。

スポンサーリンク

図形の平行移動

図形の変換情報(平行移動)を生成します。
引数translationXにX軸の移動量、引数yにY軸の移動量をCGFloat型で指定します。

既存のPathに図形変換情報を適用するには、applying()メソッドを使います。

使用例

正方形のPath情報に、平行移動の図形変換情報を適用する例です。
X軸、Y軸の移動量をSliderで変更します。

図形の平行移動

スポンサーリンク

図形の拡大・縮小

図形の変換情報(拡大・縮小)を生成します。
引数scaleXにX軸の拡大率、引数yにY軸の拡大率をCGFloat型で指定します。

座標(x:0、 y:0)が常に拡大・縮小の起点となります。

使用例

正方形のPath情報に、拡大・縮小の図形変換情報を適用する例です。
X軸、Y軸の拡大率をSliderで変更します。

図形の拡大・縮小

スポンサーリンク

図形の回転

図形の変換情報(回転)を生成します。
引数rotationAngleに回転角度をCGFloat型で指定します。
なお、回転角度はラジアンで指定する必要がありますので、度数法で指定したい場合はAngle構造体を使って変換すると良いでしょう。

拡大・縮小と同様、回転においても座標(x:0、 y:0)が起点となります。

図形の回転

スポンサーリンク

図形変換情報を組み合わせる

CGAffineTransformは、次のメソッドで図形変換情報の組み合わせが可能です。

以下は、図形の平行移動+回転+平行移動を組み合わせて、図形の中心を起点に回転させる例です。
アフィン変換による図形の回転は、常に座標(x:0, y:0)が起点になるため、図形の中心を一旦そちらに合わせ、回転後元の戻しています。

図形の中心を起点に回転

スポンサーリンク

アフィン変換の利用例

アフィン変換を利用して、幾何学的な模様を表示するサンプルを紹介します。
できるだけコメントを入れたので、コードを追うことで理解が深まると思います。

アフィン変換の利用例

スポンサーリンク

あわせて読みたい記事

【SwiftUI】Pathを使った図形の描画
Pathビューを使った図形の描画方法について解説します。
Kindle unlimited 読み放題で読める管理人のおすすめ本です!
スポンサーリンク
SwiftUI
カピ通信