【SwiftUI】Canvasの画像を動的に変更する

画像の比率を保ったまま追加した画像の拡大縮小をしたかった。ただそれだけだった。

前提条件

この記事では、以下のようなSwiftUIのビューがあると仮定します。

struct CanvasView: View {
    ...
    @State private var image: NSImage? = nil
    ...
}

struct CanvasToSave: View {
    ...
    @Binding var userImage: NSImage?
    ...
}

CanvasViewはユーザーが画像を選択できるビューで、選択した画像はimageに保存されます。CanvasToSaveはキャンバスに画像を描画するビューで、描画する画像はuserImageから取得します。

スケールの追加

まず、CanvasViewとCanvasToSaveの両方に新たなBindingを追加します。これにより、ユーザーが画像のスケールを動的に変更できるようになります。

// CanvasView.swift
struct CanvasView: View {
    ...
    @State private var imageScale: CGFloat = 1.0
    ...
}

// CanvasToSave.swift
struct CanvasToSave: View {
    ...
    @Binding var imageScale: CGFloat
    ...
}

次に、CanvasViewにスライダーを追加して、ユーザーが画像のスケールを調整できるようにします。

// CanvasView.swift
struct CanvasView: View {
    ...
    var body: some View {
        ...
        Form {
            ...
            Section("Image Scale") {
                Slider(value: $imageScale, in: 0.1...2.0, step: 0.1)
            }
            ...
        }
    }
}

最後に、CanvasToSaveで画像を描画する際にスケールを適用します。

// CanvasToSave.swift
struct CanvasToSave: View {
    ...
    var body: some View {
        Canvas { context, size in
            ...
            if let img = userImage {
                let userSelectImage = Image(nsImage: img)
                let scaledSize = CGSize(width: img.size.width * imageScale, height: img.size.height * imageScale)
                context.draw(userSelectImage, in: CGRect(x: midPoint.x - scaledSize.width / 2, y: midPoint.y - scaledSize.height / 2, width: scaledSize.width, height: scaledSize.height))
                context.blendMode = GraphicsContext.BlendMode.softLight
            }
        }
    }
}

以上の変更により、ユーザーがスライダーを使用して画像のスケールを動的に変更できるようになります。画像のスケールは、CanvasToSaveのuserSelectImageに反映されます。