【SwiftUI】ImagePaintの使い方

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

環境
サンプルに使う画像
基本的な使い方
ImagePaintが使える場所
1. 使用例
あわせて読みたい記事

環境

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

【Xcode】12.0
【Swift】5.3
【iOS】14.0
【macOS】Catalina バージョン 10.15.6

サンプルに使う画像

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

基本的な使い方

ImagePaint(image: 画像, sourceRect: 画像の範囲, scale: 画像の倍率)

引数は以下の３つです。

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

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

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

使用例１（画像のみ指定）

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

struct ContentView: View {

var body: some View {

RoundedRectangle(cornerRadius: 100)

.fill(ImagePaint(image: Image("image001")))

.frame(width: 300, height: 300)

}

使用例２（倍率を指定する）

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

struct ContentView: View {

var body: some View {

RoundedRectangle(cornerRadius: 100)

.fill(ImagePaint(image: Image("image001"), scale: 0.6))

.frame(width: 300, height: 300)

}

使用例3（画像の使用範囲を指定）

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

struct ContentView: View {

var body: some View {

RoundedRectangle(cornerRadius: 100)

.fill(ImagePaint(image: Image("image001"), sourceRect: CGRect(x: 0, y: 0.2, width: 1, height: 0.6), scale: 0.6))

.frame(width: 300, height: 300)

}

ImagePaintが使える場所

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

stroke
strokeBorder
border

使用例

struct ContentView: View {

var body: some View {

HStack(spacing: 50) {

RoundedRectangle(cornerRadius: 100)

.strokeBorder(ImagePaint(image: Image("image001"), scale: 0.3),

lineWidth: 50)

.frame(width: 300, height: 300)

Text("カピ通信")

.padding(50)

.border(ImagePaint(image: Image("image001"), scale: 0.3),

width: 20)

.font(.largeTitle)

}

あわせて読みたい記事

【SwiftUI】図形の塗りつぶし（fill）

（2022/04/02 更新）図形を塗りつぶすfillモディファイアについて解説します。

【SwiftUI】図形の輪郭描画（stroke）

（2020/8/22 更新）図形の輪郭を描画する.stroke()の使い方を解説します。

【SwiftUI】Viewの境界線描画（border）

Viewの境界線を表示する.border()について解説します。