【SwiftUI】ImagePaintの使い方

SwiftUIでは色やグラデーションの他に、図形を塗りつぶすために画像が使えます。
この目的のためにImagePaint構造体を使用します。

スポンサーリンク

環境

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

【Xcode】12.0
【Swift】5.3
【iOS】14.0
【macOS】Catalina バージョン 10.15.6
スポンサーリンク

サンプルに使う画像

ImagePaintのサンプル用に次の画像を使用します。
サンプル画像

スポンサーリンク

基本的な使い方

引数は以下の3つです。

image
描画する画像をImage構造体で指定します。

sourceRect
描画する画像のうち、塗りつぶしに使用する部分をCGRect構造体で指定します。
省略した場合、画像の全体を使用します。

scale
描画する画像の倍率を指定します。
省略した場合のデフォルト値は1.0です。

使用例1(画像のみ指定)

画像(image)のみ指定した場合は、等倍かつ、画像の全体が使用され塗りつぶされます。

画像のみの指定例

使用例2(倍率を指定する)

倍率(scale)を指定すると、画像のサイズをオリジナルから変更できます。
拡大も縮小も可能です。(1.0がオリジナルサイズ)
塗りつぶし範囲よりも画像が小さい場合は、隙間を埋めるためにタイル状に繰り返し表示されます。

倍率の指定例

使用例3(画像の使用範囲を指定)

画像の使用範囲(sourceRect)をCGRect構造体で指定できます。
CGRectで使う各値は、全て0から1.0の範囲で指定します。
次の例では、オリジナル画像の上下20%をカットした範囲を指定しています。

画像の使用範囲を指定した例

スポンサーリンク

ImagePaintが使える場所

ImagePaintが使えるのは、先に示したfill以外にも、次の場所でも使用できます。

  • stroke
  • strokeBorder
  • border

使用例

strokeBorderとborderでの使用例

スポンサーリンク

あわせて読みたい記事

【SwiftUI】図形の塗りつぶし(fill)
(2022/04/02 更新) 図形を塗りつぶすfillモディファイアについて解説します。
【SwiftUI】図形の輪郭描画(stroke)
(2020/8/22 更新) 図形の輪郭を描画する.stroke()の使い方を解説します。
【SwiftUI】Viewの境界線描画(border)
Viewの境界線を表示する.border()について解説します。