SwiftUI DragGesture & MagnificationGesture の話 その2

コードを修正しました・2022/2/20 AM11:30

Appleの参考サイトのMagnificationGestureで.updatingでは値が保存されないことに気付きました .onChangedに変更しました

SwiftのDragやPinchの挙動をSwiftUIで実現します その2

目的

• 今回は複数の画像やTextを移動や拡大・縮小の挙動を実現します
• 法人確定申告などの書類の記入部分にTextを割り当ててiPhoneとかの狭いViewでも その挙動で見やすくします

忙しい人はContentView.swiftをすり替えてください

必要な条件

• 新規作成で命名はお好みです
• SwiftUIにチェックを入れること
• 画像はシステム画像を使用しています

ContentView.swift

ContentView.swift

//
//  ContentView.swift
//
//  Created by 福田 敏一 on 2022/2/19.20
//  Copyright © 2022 株式会社パパスサン. All rights reserved.
//
// ❇️ ℹ️ 🚨 🎀 📅 ☼ ☕︎ 👀 💼 👑 📢 🧨 💎 🎡 🏕 🏖 🚗 🖲 🎁 📌 ⛑ ✚ 😍 ♻️ 💠 🔆 🅿️ 🔰 ✅ 🌏 ☀️ 🌙 💌 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 🧼 🆎 🅰️ 🅱️ ㊗️ ☯️ 📚

import SwiftUI

struct ContentView: View {
    
    @State var offset: CGSize = .zero
    @State var newOffset: CGSize = .zero
    
    //@GestureState var magnifyBy = 1.0//🌙🌙🌙2022/2/20・未使用にしました
    @State var magnifyBy = 1.0//🌙🌙🌙2022/2/20・追加変更しました
    @State var nowsmagnifyBy: CGFloat = 1.0//🌙🌙🌙2022/2/20・追加変更しました

    var body: some View {
//2022/2/19・参考サイト https://developer.apple.com/documentation/swiftui/draggesture
        var drag: some Gesture {
                DragGesture()
                .onChanged { offset = CGSize(width: self.newOffset.width +  $0.translation.width, height: self.newOffset.height +  $0.translation.height) }
                .onEnded{ _ in self.newOffset = offset }
            }
//2022/2/19・参考サイト https://developer.apple.com/documentation/swiftui/magnificationgesture
            var magnification: some Gesture {
                MagnificationGesture()
//🌙🌙🌙2022/2/20・.updatingでは値が保存されません
                /*.updating($magnifyBy) { currentState, gestureState, transaction in
                    gestureState = currentState*///🌙🌙🌙2022/2/20・未使用にしました
                    .onChanged { magnifyBy = $0 * nowsmagnifyBy//🌙🌙🌙2022/2/20・追加変更しました
                }
            }
        return VStack {
            ZStack {
                Image(systemName: "trash")
                    .resizable()
                    .scaleEffect(self.magnifyBy)
                    .frame(width: 80, height: 80)
                Text("🏖🏖🏖")
                    .scaleEffect(self.magnifyBy)
                    .frame(width: 60)
                    .font(.system(size: 10, design: .default))
                    .offset(x: 142 * self.magnifyBy, y: -116.5 * self.magnifyBy)
                Text("🚗株式会社パパスサン🚗")
                    .scaleEffect(self.magnifyBy)
                    .frame(width: 135, alignment: .center)
                    .font(.system(size: 10, design: .default))
                    .offset(x: -90 * self.magnifyBy, y: -79.5 * self.magnifyBy)
                Text("📅令和4年")//年
                    .scaleEffect(self.magnifyBy)
                    .frame(width: 60, alignment: .trailing)//.leading.center.trailing)
                    .font(.system(size: 10, design: .default))
                    .offset(x: -130 * self.magnifyBy, y: -61.5 * self.magnifyBy)
                Text("2🌙")//月
                    .scaleEffect(self.magnifyBy)
                    .frame(width: 30, alignment: .trailing)
                    .font(.system(size: 10, design: .default))
                    .offset(x: -75 * self.magnifyBy, y: -61.5 * self.magnifyBy)
                Text("19☀️")//日
                    .scaleEffect(self.magnifyBy)
                    .frame(width: 30, alignment: .trailing)
                    .font(.system(size: 10, design: .default))
                    .offset(x: -35 * self.magnifyBy, y: -61.5 * self.magnifyBy)
                Text("🎁")//日
                    .scaleEffect(self.magnifyBy)
                    .frame(width: 30, alignment: .trailing)
                    .font(.system(size: 10, design: .default))
                    .offset(x: -35 * self.magnifyBy, y: 100.5 * self.magnifyBy)
                
                Text("❤️は移動はしますが拡大縮小はしません")
                        .frame(width: 400, alignment: .center)
                        .font(.system(size: 16, design: .default))
                        .offset(x: 0, y: 60)
            }
            .offset(offset)
            .gesture(drag)
            .gesture(magnification)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

私の感想なんですが?

やはりSwiftUIは新規の言語なんですね? 苦労しますね?
最初は画像に.overlayで一体化をしましたが❌でした
必ず簡単な方法があると確信して2週間悪戦苦闘の結果 ?
ZStackにまとめたら⭕️でした

ここまで