代码之家 › 专栏 › 技术社区 › zumzum

无法在缩放的滚动视图中平移图像?

scrollview swiftui

0

zumzum · 技术社区 · 4 年前

我想构建一个简单的视图,允许我在滚动视图中显示图像,并允许用户捏来缩放图像和平移。

我环顾四周,从这个开始 ScrollView :

struct TestView: View {
    
    var body: some View {
        
        ScrollView {
            Image("test")
                .border(Color(.yellow))
        }
        .border(Color(.red))
        
    }
}

这无法处理缩放。

然后我这样做了:

struct TestView: View {


    /// https://wp.usatodaysports.com/wp-content/uploads/sites/88/2014/03/sunset-in-the-dolos-mikadun.jpg
    var image = UIImage(named: "test")!
    @State var scale: CGFloat = 1.0
    @State var lastScaleValue: CGFloat = 1.0

    var body: some View {


        GeometryReader { geo in

            ScrollView([.vertical, .horizontal], showsIndicators: false){

                ZStack{

                    Image(uiImage: image)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: geo.size.width, height: geo.size.width)
                        .scaleEffect(scale)
                        .gesture(MagnificationGesture().onChanged { val in
                            let delta = val / self.lastScaleValue
                            self.lastScaleValue = val
                            var newScale = self.scale * delta
                            if newScale < 1.0 {
                                newScale =  1.0
                            }
                            scale = newScale
                        }.onEnded{val in
                            lastScaleValue = 1
                        })

                }

            }
            .frame(width: geo.size.width, height: geo.size.width)
            .border(Color(.red))
            .background(Color(.systemBackground).edgesIgnoringSafeArea(.all))

        }

    }

}

这允许我放大和缩小,但我无法平移图像:

如何对事物进行编码,以便支持缩放和平移?

0 回复 | 直到 4 年前

1

Francisco D. Hurtado 4 年前

为了获得平移功能,您必须更改图像容器的大小,在本例中为ZStack。因此,首先我们需要一个变量来保存当前最新的刻度值。

@State var scaledFrame: CGFloat = 1.0

然后只需在每次手势结束时更改容器的大小。

 ZStack{
                        Image(uiImage: image)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: geo.size.width, height: geo.size.width )
                            .scaleEffect(scale)
                            .gesture(MagnificationGesture().onChanged { val in
                                let delta = val / self.lastScaleValue
                                self.lastScaleValue = val
                                var newScale = self.scale * delta
                                if newScale < 1.0 {
                                    newScale =  1.0
                                }
                                scale = newScale
                            }.onEnded{val in
                                scaledFrame = scale//Update the value once the gesture is over
                                lastScaleValue = 1
                                
                            })
                            .draggable()
                    }
                    .frame(width: geo.size.width * scaledFrame, height: geo.size.width * scaledFrame)
                    //change the size of the frame once the drag is complete

这是由于ScrollView的工作方式,当您放大时,容器的实际大小没有改变,因此ScrollView只是相应地移动。