画像の比率を保ったまま追加した画像の拡大縮小をしたかった。ただそれだけだった。
この記事では、以下のような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に反映されます。
coiai
この記事もおすすめ
株式会社coiaiは、「想像できることを美しく実現」を掲げ、XR・Web・アプリ・システム開発およびDX支援を行う会社です。 創業2022年、東京都練馬区に本社を置き、要件のヒアリングからPoC（概念実証）、本番運用まで一貫して伴走します。 まずはお気軽にご相談ください。
主なご相談内容
詳しい会社情報は会社概要ページでご覧いただけます。
