在旋转视图上调整拖动手势
Adjust Drag Gesture on Rotated View
我在视图中有一张图片。
- 添加旋转以旋转视图
- 添加了拖动手势来平移图像
- 当图像未旋转时拖动手势工作正常
- 一旦视图旋转到特定角度,拖动手势就会受到干扰,因为视图已旋转。
那么,如何根据旋转角度调整dragOffset和位置呢?
代码:
struct ImageView: View {
@State private var dragOffset: CGSize = .zero
@State private var position: CGSize = .zero
@State private var currentRotation: Angle = .zero
@GestureState private var twistAngle: Angle = .zero
public var body: some View {
let rotationGesture = RotationGesture(minimumAngleDelta: .degrees(10))
.updating($twistAngle, body: { (value, state, _) in
state = value
})
.onEnded{ self.currentRotation += [=10=] }
let dragGesture = DragGesture()
.onChanged({ (value) in
self.dragOffset = value.translation
})
.onEnded({ (value) in
self.position.width += value.translation.width
self.position.height += value.translation.height
self.dragOffset = .zero
})
let gestures = rotationGesture
.simultaneously(with: dragGesture)
Image.placeholder320x192
.offset(x: dragOffset.width + position.width, y: dragOffset.height + position.height)
.rotationEffect(currentRotation + twistAngle)
.gesture(gestures, including: .gesture)
}
}
修饰符的顺序很重要。您当前在 offset
之前 旋转 - 因此您正在应用偏移 然后 旋转。这使得偏移出现在一个角度。相反,您想旋转然后偏移。
变化:
Image.placeholder320x192
.offset(x: dragOffset.width + position.width, y: dragOffset.height + position.height)
.rotationEffect(currentRotation + twistAngle)
.gesture(gestures, including: .gesture)
为此:
Image.placeholder320x192
.rotationEffect(currentRotation + twistAngle)
.offset(x: dragOffset.width + position.width, y: dragOffset.height + position.height)
.gesture(gestures, including: .gesture)
我在视图中有一张图片。
- 添加旋转以旋转视图
- 添加了拖动手势来平移图像
- 当图像未旋转时拖动手势工作正常
- 一旦视图旋转到特定角度,拖动手势就会受到干扰,因为视图已旋转。
那么,如何根据旋转角度调整dragOffset和位置呢?
代码:
struct ImageView: View {
@State private var dragOffset: CGSize = .zero
@State private var position: CGSize = .zero
@State private var currentRotation: Angle = .zero
@GestureState private var twistAngle: Angle = .zero
public var body: some View {
let rotationGesture = RotationGesture(minimumAngleDelta: .degrees(10))
.updating($twistAngle, body: { (value, state, _) in
state = value
})
.onEnded{ self.currentRotation += [=10=] }
let dragGesture = DragGesture()
.onChanged({ (value) in
self.dragOffset = value.translation
})
.onEnded({ (value) in
self.position.width += value.translation.width
self.position.height += value.translation.height
self.dragOffset = .zero
})
let gestures = rotationGesture
.simultaneously(with: dragGesture)
Image.placeholder320x192
.offset(x: dragOffset.width + position.width, y: dragOffset.height + position.height)
.rotationEffect(currentRotation + twistAngle)
.gesture(gestures, including: .gesture)
}
}
修饰符的顺序很重要。您当前在 offset
之前 旋转 - 因此您正在应用偏移 然后 旋转。这使得偏移出现在一个角度。相反,您想旋转然后偏移。
变化:
Image.placeholder320x192
.offset(x: dragOffset.width + position.width, y: dragOffset.height + position.height)
.rotationEffect(currentRotation + twistAngle)
.gesture(gestures, including: .gesture)
为此:
Image.placeholder320x192
.rotationEffect(currentRotation + twistAngle)
.offset(x: dragOffset.width + position.width, y: dragOffset.height + position.height)
.gesture(gestures, including: .gesture)