SwiftUI 中的前后图像滑块?

我试图在 SwiftUI 中找到图像的前后滑块效果。但我找不到任何库或解决方案。最后我自己想出了以下解决方案。

希望这对某人有所帮助!!

lz245548622 回答:SwiftUI 中的前后图像滑块?

我为图像添加了背景颜色,以便在没有图像时有所不同。

import SwiftUI

struct ContentView: View {

@State private var location: CGPoint = CGPoint(x: 0,y: 0)
@State private var maskWidth: CGFloat = 0.0

@State var startPoint: CGFloat = 0
@State var endPoint: CGFloat = 0
@State var yPoint: CGFloat = 0

var sliderWidth: CGFloat = 30
var containerWidth: CGFloat = 400
var containerHeight: CGFloat = 300

var body: some View {
    
    ZStack {
        
        ZStack() {
            Image("before_img")
                .resizable()
                .frame(width: containerWidth,height: containerHeight)
                .background(Color.red)
                .clipped()
            
            Image("after_img")
                .resizable()
                .frame(width: containerWidth,height: containerHeight)
                .clipped()
                .background(Color.green)
                .mask(mask)
        }
        .clipped()
        
        Slider
        
    }
    .clipped()
    .frame(width: containerWidth,height: containerHeight)
    .onAppear {
        yPoint = containerHeight/2
        location = CGPoint(x: containerWidth/2,y: yPoint)
        maskWidth = containerWidth/2
        endPoint = containerWidth
    }
}

var dragAction: some Gesture {
    DragGesture()
        .onChanged { value in
            updateDragView(point: value.location)
            updateMaskView(point: value.translation)
        }
        .onEnded { value in
            setInitialPosition()
        }
}

var mask: some View {
    HStack {
        Spacer()
        Rectangle()
            .mask(Color.black)
            .frame(width: maskWidth,height: containerHeight)
    }
}

var Slider: some View {
    VStack(spacing: 0) {
        Rectangle()
            .fill(Color.white)
            .frame(width: 4)
        Image(systemName: "circle.circle.fill")
            .foregroundColor(.white)
            .frame(width: sliderWidth,height: sliderWidth)
            .font(.system(size: sliderWidth))
        Rectangle()
            .fill(Color.white)
            .frame(width: 4)
    }
    .position(location)
    .gesture(dragAction)
    .shadow(radius: 4)
}

func updateDragView(point: CGPoint) {
    let locX = point.x
    if locX > startPoint && locX < endPoint {
        self.location = CGPoint(x: point.x,y: yPoint)
    }
}

func updateMaskView(point: CGSize) {
    let width = -(point.width)
    let newWidth = ((containerWidth/2)+width)
    if newWidth > 0 {
        maskWidth = ((containerWidth/2)+width)
    } else {
        setInitialPosition()
    }
}

func setInitialPosition() {
    withAnimation {
        location = CGPoint(x: containerWidth/2,y: yPoint)
        maskWidth = containerWidth/2
    }
}
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
本文链接:https://www.f2er.com/2948.html

大家都在问