【Swift P4.5.1】ScrollViewとZoom（２）

単純にScrollView()とMagnifyGesture()を利用すると画像の拡大状態でスクロールさせても元の画像の一部分しか見られず、端までスクロールできない。

note.comさんの
【SwiftUIでImageをピンチイン・ピンチアウト・ダブルタップでズームさせる】

このコードをそのまま使わせてもらうと拡大時のスクロールで幅は元の画像の端までスクロールして全部見られる。
しかし、高さは元の画像の端までスクロールできない。

ビューの横幅、アスペクト比を渡している事から、アスペクト比の求め方辺りに何かあると思えた。
なので、色々試した結果。元の画像のアスペクト比を算出して渡してみたら横も高さも端までスクロールできた。

UIImageを用意してCGSizeを取り出す。
アスペクト比を求めた場所で元の画像のアスペクト比を求める。

他はそのまま使えば拡大された元画像の完全スクロールができる。

対処療法的な対応はできたけど、ScrollView()のスクロール範囲についての理解は不明瞭のまま。
それは後回しにして他の基礎習得に移る。

import SwiftUI

struct ContentView: View {
    @State private var aspectRatio: CGFloat = 1.0

    // 追加
    @State private var image = UIImage(named: "Test") // アセットフォルダに　Test.jpg を入れて利用しています
    // 

    var body: some View {
        GeometryReader { proxy in
            Image(uiImage: image!)
                .resizable()
                .scaledToFit()
                .frame(width: proxy.size.width)
             // backgroundでGeometryReaderを使うことで、対象のViewのサイズを取得できる
                .background(GeometryReader { imageGeometry in
                    Color.clear
                        .onAppear {
                            // 【追加】画像のアスペクト比を算出する。置き換え部分
                            aspectRatio = image!.size.width / image!.size.height
                    
                            /* ビューのアスペクト比を算出していた。元部分
                            aspectRatio = imageGeometry.size.width / imageGeometry.size.height
                            */
                        }
                })
                .modifier(ImageMagnificationModifier(contentSize: proxy.size, aspectRatio: aspectRatio))
                .background(.black)
                .ignoresSafeArea()
        }
    }
}

 

【Swift P4.5.1】ScrollViewとZoom

前回の引用からスクロールとズームの両立は複雑だと分かる。
あえて、単純にスクロールとズームを組み合わせたらどうなるか確認をしておく。

で、下にスクロールビューにイメージズームを入れてみた。

結果、スクロールが優先的に作動してしまう。（１ポイント操作）
上手くすればピンチによるズーム。（２ポイント操作）

何かしらの工夫が必要である。

状況は、ズーム後のスクロールは動作する。
しかし、スクロール範囲はズーム後の画像全体ではない。
最初の画像サイズ領域に限られる。何らかの修正をする必要がある。

 

import SwiftUI

struct ContentView: View {
    @State private var currentScale: CGFloat = 1.0
    @State private var lastMagnificationValue: CGFloat = 1.0
    var body: some View {
        ScrollView([.horizontal,.vertical],showsIndicators: false)
        {
            Image(uiImage: UIImage(named: "Test")! ) 
                .resizable()
                .scaledToFill()
                .scaleEffect(currentScale)
                .gesture(
                    MagnifyGesture()
                        .onChanged { value in
                            let changeRate = value.magnification / lastMagnificationValue
                            currentScale *= changeRate
                            currentScale = max(1.0, currentScale )
                            lastMagnificationValue = value.magnification
                        }
                        .onEnded { value in
                            lastMagnificationValue = 1.0
                        }
                )
        }
        .scrollTargetLayout()
        .padding()
    }
}

スクロールとズームの混在は意図した通りの反応でないとストレスが溜まる。
モード切り替えを入れるなどワンクッションが入るとストレス軽減になるのかな？

【追記】
ズーム後にImageの.frame()でズーム後サイズを算出し設定してみたがスクロール範囲の変化なし。

 

【Swift P4.5.1】拡大縮小。ピンチジェスチャー

ピンチジェスチャーでのズーム倍率は必ず（1.0）から始まるらしい。
参考書通りに書くとピンチ始まりで必ず原画サイズに戻ってからの拡大になる。
倍率を保存して、そこから再開すれば指を離しても継続できる。とは分かるけど上手くいかない…。

検索に少々掛ったけど何とか見つけた。

note.comさんの
【SwiftUIでImageをピンチイン・ピンチアウト・ダブルタップでズームさせる】

コピペで検索してください。
記事ではズームとスクロールを両立していました。

ここではズームの継続のみ切り出しています。

import SwiftUI

struct ContentView: View {
    @State private var currentScale: CGFloat = 1.0
    @State private var lastMagnificationValue: CGFloat = 1.0
    var body: some View {
                
        Image(uiImage: UIImage(named: "Test")! ) 
            .resizable()
            .scaledToFill()
            .scaleEffect(currentScale)
            .gesture(
                MagnifyGesture()
                    .onChanged { value in
                        let changeRate = value.magnification / lastMagnificationValue
                        currentScale *= changeRate
                        currentScale = max(1.0, currentScale )
                        lastMagnificationValue = value.magnification
                    }
                    .onEnded { value in
                        lastMagnificationValue = 1.0
                    }
             )
    }
}

数値の計算と設定方法で自分の工夫以上に簡単な記述となった^^。

このコードだと倍率1.0以下になるとエラーになるので
currentScale = max(1.0, currentScale )
倍率1.0以上をセットしている。

frameをきちんと設定すれば良いのかもしれない。