본문 바로가기
Swfit/UI Layout

SwiftUI Pinch Gesture 적용하기 (view crop도 같이 적용)

by GGShin 2024. 11. 8.

적용된 기능

1. 두 손가락 pinch

2. Pinch 되는 view가 특정한 frame size를 넘어가면 이미지가 잘리도록

3. Pinch가 시작되는 부위부터 zoom 되도록

 

struct PinchView: View {
    @GestureState private var magnifyBy = 1.0
    @State private var accumulatedScale: CGFloat = 1.0
    @State private var scaleAnchor: UnitPoint = .center

    var magnification: some Gesture {
        MagnifyGesture()
            .updating($magnifyBy) { value, gestureState, tranx in
                gestureState = value.magnification
            }
            .onChanged({ val in
                self.scaleAnchor = val.startAnchor
            })
            .onEnded { value in
                accumulatedScale *= value.magnification
            }
    }

    var body: some View {
        ZStack {
            Rectangle()
                .frame(width: 200, height: 200)
                .foregroundColor(.blue)
                .clipped()

            GeometryReader { geometry in
                Image(systemName: "house")
                    .resizable()
                    .scaleEffect(CGSize(width: 1 * accumulatedScale * magnifyBy,
                                        height: 1 * accumulatedScale * magnifyBy),
                                 anchor: self.scaleAnchor)
                    .gesture(magnification)
                    .position(x: geometry.size.width / 2, y: geometry.size.height / 2) 
                    .clipped()
            }
            .frame(width: 200, height: 200)
            .clipped()
        }
        .frame(width: 200, height: 200)
    }

}

 

 

동작 모습

 

 

 

RPReplay_Final1731054357.mov
1.21MB

반응형