I'm new to coding, but here goes. This is a single guitar string. It has 24 "frets" - the GuitarFretView(). I then stack 5-9 of these strings in a VStack (adjustable via settings). The GuitarFretView is basically a line that adds a circle when you tap. Still working on it, will also need to update the data model when tapped.
struct GuitarStringView: View {
let guitarString = Array(repeating: GuitarFretView(), count: 24)
var body: some View {
HStack {
ForEach(0 ..< 24) { item in
guitarString[item]
}
}
.frame(maxHeight: 36, alignment: .center)
}
}
struct GuitarFretView: View {
@State var tapped = false
var body: some View {
ZStack {
Path { path in
path.move(to: CGPoint(x:0, y: 18))
path.addLine(to: CGPoint(x: 50, y: 18))
}
.stroke(lineWidth: 3)
.onTapGesture {
withAnimation {
tapped.toggle()
}
}
// appears when the string is tapped
Circle()
.fill(self.tapped ? Color.gray : Color.clear)
.frame(width: 30, height: 30)
.onTapGesture {
withAnimation {
tapped.toggle()
}
}
} // ZSTACK
}
}
The method I found on Stack Overflow forums for getting the position is below. It worked, but then I was blocked from using the swipe for moving between tabs.
.simultaneousGesture(DragGesture(minimumDistance: 0, coordinateSpace: .local)
.onEnded { print("X position \($0.location)") })
Thanks for any guidance!
