屏幕旋转计算，有什么好的方案？

希望通过计算屏幕旋转角度来完成：

从视频详情页旋转手机完成全屏播放。

在全屏播放旋转手机退出到视频详情页。

HarmonyOS

济南二狗子

2024-05-26 14:12:57

浏览

回答 2

按赞同

按时间

油炸帕尼尼

使用的核心API

sensor.on()

核心代码解释

import sensor from '@ohos.sensor'; 
import base from '@ohos.base'; 
 
export function onDegree(callback: base.Callback<string>): void { 
  sensor.on(sensor.SensorId.GRAVITY, (data: sensor.GravityResponse) => { 
    let degree: number = -1; 
    let rotation: string = 'INVALID'; 
    degree = CalDegree(data.x, data.y, data.z) 
    console.log(degree + "  zzz") 
    if (degree >= 0 && (degree <= 30 || degree >= 330)) { 
      rotation = "ROTATION_0"; 
    } else if (degree >= 60 && degree <= 120) { // Use ROTATION_90 when degree range is [60, 120] 
      rotation = "ROTATION_90"; 
    } else if (degree >= 150 && degree <= 210) { // Use ROTATION_180 when degree range is [150, 210] 
      rotation = "ROTATION_180"; 
    } else if (degree >= 240 && degree <= 300) { // Use ROTATION_270 when degree range is [240, 300] 
      rotation = "ROTATION_270"; 
    } 
    callback(rotation); 
  }); 
} 
 
function CalDegree(x: number, y: number, z: number): number { 
  let degree: number = -1; 
  // 3 为 有效_增量_角度_阈值_系数 
  if ((x * x + y * y) * 3 < z * z) { 
    return degree; 
  } 
  degree = 90 - (Number)(Math.round(Math.atan2(y, -x) / Math.PI * 180)); 
  return degree >= 0 ? degree % 360 : degree % 360 + 360; 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

实现效果

使用ArkTS语言可以完成对C++能力的复现。

注明适配的版本信息

IDE版本：4.1.3.500

SDK版本：OpenHarmony 4..5.6

2024-05-27 17:34:18

开源武术

在HarmonyOS中实现屏幕旋转计算和全屏切换，可以通过以下方案实现视频详情页与全屏播放的流畅切换：

一、方向感知与窗口管理

传感器监听与方向判断
通过@ohos.sensor 模块获取设备方向数据，实时计算旋转角度。例如：

// 监听加速度传感器 
sensor.on(sensor.SensorId.ACCELEROMETER,  (data) => {
  const angle = Math.atan2(data.y,  data.x) * 180 / Math.PI;
  if (angle > 45 && angle < 135) { /* 横屏逻辑 */ }
});1.
2.
3.
4.
5.

结合重力传感器判断自然方向（竖屏、横屏、反向横屏）8。

窗口旋转策略设置

全局配置：在module.json5 中设置Ability的默认方向（如"orientation": "auto_rotation_restricted"）7。
动态调整：通过window模块的setPreferredOrientation方法实时修改窗口方向：

// 进入全屏时强制横屏 
const windowStage = window.getLastWindow(this.context); 
windowStage.setPreferredOrientation(window.Orientation.LANDSCAPE);1.
2.
3.

退出全屏时恢复竖屏方向。

二、布局适配与状态同步

媒体查询与响应式布局
使用@ohos.mediaquery 动态调整UI：

// 监听横竖屏变化 
const listener = mediaquery.matchMediaSync('(orientation:  landscape)');
listener.on('change',  (result) => {
  if (result.matches)  { /* 更新横屏布局 */ }
});1.
2.
3.
4.
5.

结合Flex布局或栅格系统实现自适应。

全屏状态与组件联动

隐藏状态栏：进入全屏时调用window.setWindowSystemBarEnable 隐藏状态栏，沉浸式显示视频。
组件尺寸同步：监听窗口尺寸变化，动态计算视频组件宽高：

windowStage.on('windowSizeChange',  (newSize) => {
  this.viewWidth  = vp2px(newSize.width);   // 转换为vp单位 
  this.viewHeight  = vp2px(newSize.height); 
});1.
2.
3.
4.

通过状态变量驱动视频组件尺寸更新。

三、关键场景处理

系统旋转锁定的兼容
当用户启用系统方向锁定时，通过手动按钮触发全屏切换：

// 强制横屏（不受系统锁定影响）
setPreferredOrientation(window.Orientation.USER_ROTATION_LANDSCAPE);1.
2.

退出时恢复为USER_ROTATION_PORTRAIT。

页面跳转与状态保存

路由传参：从详情页跳转全屏页时传递视频播放进度、画质等状态。
共享状态管理：使用AppStorage或LocalStorage同步播放状态，避免旋转时数据丢失。

四、性能优化

冻结非活跃页面：使用aboutToDisappear冻结后台页面，减少旋转时的渲染开销2。
图片与动画优化：为视频封面图设置AutoResize属性，避免大尺寸图片内存占用；使用显式动画替代复杂属性渐变。

示例代码片段

// 全屏切换逻辑 
toggleFullScreen() {
  if (this.isFullScreen)  {
    windowStage.setPreferredOrientation(window.Orientation.PORTRAIT); 
    window.setWindowSystemBarEnable(['status']);   // 显示状态栏
  } else {
    windowStage.setPreferredOrientation(window.Orientation.LANDSCAPE); 
    window.setWindowSystemBarEnable([]);   // 隐藏状态栏
  }
  this.isFullScreen  = !this.isFullScreen; 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

通过以上方案，可实现自然流畅的横竖屏切换，同时兼容系统策略和用户手动操作。具体实现需参考官方文档中@ohos.window 和@ohos.mediaquery 的接口细节。

2025-03-26 21:42:36

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

屏幕旋转计算，有什么好的方案？

订阅鸿蒙技术特刊，精选内容抢先看