単純に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()
}
}
}