HarmonyOS 鸿蒙Next 图片旋转后移动拖动手势方向相反
HarmonyOS 鸿蒙Next 图片旋转后移动拖动手势方向相反
// 绑定拖动手势
PanGesture()
// 当触发拖动手势时，根据回调函数修改组件的布局位置信息
.onActionUpdate((event: GestureEvent|undefined) => {
if(event){
this.offsetX = this.positionX + event.offsetX;
this.offsetY = this.positionY + event.offsetY;
}
})
.onActionEnd(() => {
this.positionX = this.offsetX;
this.positionY = this.offsetY;
}),
RotationGesture()
// 当旋转手势生效时，通过旋转手势的回调函数获取旋转角度，从而修改组件的旋转角度
.onActionUpdate((event: GestureEvent|undefined) => {
if(event){
this.angle = this.rotateValue + event.angle;
}
console.info('RotationGesture is onActionEnd');
})
// 当旋转结束抬手时，固定组件在旋转结束时的角度
.onActionEnd(() => {
this.rotateValue = this.angle;
console.info('RotationGesture is onActionEnd');
})
.onActionCancel(() => {
console.info('RotationGesture is onActionCancel');
})
)
旋转后移动拖动手势方向相反，怎么弄
2 回复
用组合手势会产生这样现象，建议您用一个容器包裹以下图片组件，然后容器组件控制移动手势，图片组件控制旋转手势，参考如下代码：
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index4 {
[@State](/user/State) message: string = 'Hello World';
[@State](/user/State) offsetX: number = 0
[@State](/user/State) offsetY: number = 0
[@State](/user/State) positionX: number = 0
[@State](/user/State) positionY: number = 0
private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right | PanDirection.Horizontal | PanDirection.Vertical})
[@State](/user/State) angle: number = 0;
[@State](/user/State) rotateValue: number = 0;
build() {
RelativeContainer() {
Row(){
Text(this.message)
.height(200)
.width(200)
.padding(20)
.border({ width: 3 })
.margin(50)
.id('TaskPoolPageHelloWorld')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.rotate({ angle: this.angle })
.translate({ x: this.offsetX, y: this.offsetY, z: 0 })// 以组件左上角为坐标原点进行移动
// 左右拖动触发该手势事件
.gesture(
RotationGesture()
.onActionStart((event: GestureEvent|undefined) => {
console.info('RotationGesture is onActionStart');
})
// 当旋转手势生效时，通过旋转手势的回调函数获取旋转角度，从而修改组件的旋转角度
.onActionUpdate((event: GestureEvent|undefined) => {
if(event){
this.angle = this.rotateValue + event.angle;
}
console.info('RotationGesture is onActionEnd');
})
// 当旋转结束抬手时，固定组件在旋转结束时的角度
.onActionEnd(() => {
this.rotateValue = this.angle;
console.info('RotationGesture is onActionEnd' + this.rotateValue);
})
.onActionCancel(() => {
console.info('RotationGesture is onActionCancel');
})
)
}
.gesture(
PanGesture(this.panOption)
.onActionStart((event?: GestureEvent) => {
console.info('Pan start')
})
.onActionUpdate((event?: GestureEvent) => {
if (event) {
// this.offsetX = this.positionX + event.offsetX
// this.offsetY = this.positionY + event.offsetY
console.log('yeyouzhi offsetY>>>' + event.offsetY)
animateTo({
duration: 2000,
curve: Curve.EaseOut,
iterations: 1,
playMode: PlayMode.Normal,
onFinish: () => {
console.info('play end')
}
}, () => {
if (this.rotateValue>180) {
this.offsetX = this.positionX - event.offsetX
this.offsetY = this.positionY - event.offsetY
}
else {
this.offsetX = this.positionX + event.offsetX
this.offsetY = this.positionY + event.offsetY
}
})
}
})
.onActionEnd(() => {
this.positionX = this.offsetX
this.positionY = this.offsetY
console.info('Pan end')
})
)
}.width("100%")
.height('100%')
}
}
针对HarmonyOS 鸿蒙Next系统中图片旋转后移动拖动手势方向相反的问题，这通常是由于图片旋转后坐标系统未正确更新导致的。以下是一些可能的解决方案：
- 更新系统至最新版本：确保你的设备已升级至最新版本的HarmonyOS 鸿蒙Next，以获取最新的系统修复和优化。
- 检查图片旋转逻辑：在图片旋转后，确保更新相关的坐标系统和手势识别逻辑，以匹配旋转后的图片方向。
- 调整手势识别设置：检查手势识别的相关设置，确保在图片旋转后，手势的方向和移动与图片的实际方向一致。
- 锁定组件表面旋转：通过调用API如
this.mXComponentController.setXComponentSurfaceRotation({ lock: true })来锁定组件表面旋转，避免图片旋转带来的坐标系统混乱。
如果以上方法无法解决问题，可能是由于更复杂的系统交互或应用逻辑导致的。建议详细检查应用的相关代码和设置，或寻求专业开发者的帮助。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。
