鸿蒙开发案例：水平仪

a50.gif

【1】引言（完整代码在最后面）

高仿纯血鸿蒙Next的水平仪效果。主要功能包括：

  1. 倾斜角度检测：通过注册加速度传感器事件监听器，实时获取设备的前后倾斜角度（pitch）和左右倾斜角度（roll）。

  2. 角度计算与更新：根据传感器数据计算新的倾斜角度，如果新角度与旧角度的变化超过设定的阈值，则更新状态变量 pitch 和 roll，并计算出当前的综合角度 angle。

  3. UI 展示：

• 显示当前角度值的文本。

• 模拟水平仪背景的圆环，包括外部大圆、中间圆和刻度线。

• 动态显示一个小球，其位置根据设备的倾斜角度进行调整，通过动画效果实现平滑移动。

【2】环境准备

电脑系统：windows 10

开发工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806

工程版本：API 12

真机：mate60 pro

语言：ArkTS、ArkUI

权限：ohos.permission.ACCELEROMETER（允许应用读取加速度传感器的数据权限）

【3】算法分析

  1. 计算俯仰角和横滚角：

使用 atan 函数计算俯仰角和横滚角。atan 函数的输入是Y轴和X、Z轴的平方和的平方根，输出是弧度值，乘以 (180 / Math.PI) 转换为度数。

const newPitch = Math.atan(data.y / Math.sqrt(data.x * data.x + data.z * data.z)) * (180 / Math.PI);
const newRoll = Math.atan(data.x / Math.sqrt(data.y * data.y + data.z * data.z)) * (180 / Math.PI);
  1. 判断角度变化：

使用 Math.abs 计算新旧角度的差值，判断是否超过设定的阈值。如果超过，则更新当前的俯仰角、横滚角和当前角度。

if (Math.abs(newPitch - this.pitch) > this.threshold || Math.abs(newRoll - this.roll) > this.threshold) {
    this.pitch = newPitch;
    this.roll = newRoll;
    this.angle = Math.hypot(newPitch, newRoll);
}
  1. 计算小球位置

根据当前角度计算半径，并使用 Math.atan2 计算角度的弧度。然后使用 Math.cos 和 Math.sin 计算小球在圆周上的X和Y坐标。

const radius = (this.angle <= 10 ? this.angle * 2.5 : (10 * 2.5 + (this.angle - 10))) * UNIT_LENGTH;
const angleInRadians = Math.atan2(this.pitch, this.roll);

const x = -radius * Math.cos(angleInRadians);
const y = radius * Math.sin(angleInRadians);

【完整代码】

1 配置允许应用读取加速度传感器的数据权限

路径：src/main/module.json5

{

  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.ACCELEROMETER"
      }
    ],

2 完整代码

// 导入传感器服务模块
import { sensor } from '@kit.SensorServiceKit';
// 导入业务错误处理模块
import { BusinessError } from '@kit.BasicServicesKit';

// 定义单位长度，用于后续计算中的比例尺
const UNIT_LENGTH = 4;

// 使用 @Entry 和 @Component 装饰器定义一个名为 LevelMeter 的组件
@Entry
@Component
struct LevelMeter {
  // 定义状态变量，用于存储当前角度
  @State angle: number = 0;
  // 定义状态变量，用于存储前后倾斜角度（pitch）
  @State pitch: number = 0;
  // 定义状态变量，用于存储左右倾斜角度（roll）
  @State roll: number = 0;
  // 定义角度变化阈值，用于判断是否需要更新角度
  private threshold: number = 1;

  // 组件即将出现时的生命周期方法
  aboutToAppear(): void {
    // 获取传感器列表
    sensor.getSensorList((error: BusinessError) => {
      if (error) {
        // 如果获取传感器列表失败，输出错误信息
        console.error('获取传感器列表失败', error);
        return;
      }
      // 开始更新方向信息
      this.startOrientationUpdates();
    });
  }

  // 启动方向更新的方法
  private startOrientationUpdates(): void {
    // 注册加速度传感器事件监听器
    sensor.on(sensor.SensorId.ACCELEROMETER, (data) => {
      // 计算新的前后倾斜角度（pitch）
      const newPitch = Math.atan(data.y / Math.sqrt(data.x * data.x + data.z * data.z)) * (180 / Math.PI);
      // 计算新的左右倾斜角度（roll）
      const newRoll = Math.atan(data.x / Math.sqrt(data.y * data.y + data.z * data.z)) * (180 / Math.PI);

      // 如果新的角度变化超过阈值，则更新状态
      if (Math.abs(newPitch - this.pitch) > this.threshold || Math.abs(newRoll - this.roll) > this.threshold) {
        this.pitch = newPitch;
        this.roll = newRoll;
        // 更新当前角度
        this.angle = Math.hypot(newPitch, newRoll);
      }
    }, { interval: 100000000 }); // 设置更新间隔为100毫秒
  }

  // 计算小球位置的方法
  private calculateBallPosition(): Position {
    // 根据当前角度计算半径
    const radius = (this.angle <= 10 ? this.angle * 2.5 : (10 * 2.5 + (this.angle - 10))) * UNIT_LENGTH;
    // 将角度转换为弧度
    const angleInRadians = Math.atan2(this.pitch, this.roll);

    // 计算小球在圆周上的X坐标
    const x = -radius * Math.cos(angleInRadians);
    // 计算小球在圆周上的Y坐标
    const y = radius * Math.sin(angleInRadians);

    // 返回小球的位置
    return { x, y };
  }

  // 构建UI的方法
  build() {
    // 使用Stack布局容器
    Stack() {
      // 显示当前角度的文本
      Stack() {
        Row({ space: 5 }) { // 创建一个行布局，设置间距为5
          Text(`${Math.floor(this.angle)}°`)// 显示当前角度
            .layoutWeight(1)// 设置布局权重
            .textAlign(TextAlign.Center)// 文本对齐方式
            .fontColor('#dedede')// 文本颜色
            .fontSize(60); // 文本大小
        }.width('100%').margin({ top: 80 }) // 设置宽度和上边距
      }.height('100%').align(Alignment.Top) // 设置高度和对齐方式

      // 模拟水平仪背景的圆环
      Stack() {
        // 外部大圆
        Text()
          .width('600lpx')// 设置宽度
          .height('600lpx')// 设置高度
          .borderRadius('50%')// 设置圆角
          .backgroundColor("#171b1e")// 设置背景颜色
          .blur(50)// 设置模糊效果
          .shadow({ radius: 300, type: ShadowType.COLOR, color: "#232426" }); // 设置阴影效果

        // 中间圆
        Text()
          .width(`${(this.angle <= 10 ? this.angle * 2.5 : (10 * 2.5 + (this.angle - 10))) * UNIT_LENGTH *
            2}lpx`)// 计算宽度
          .height(`${(this.angle <= 10 ? this.angle * 2.5 : (10 * 2.5 + (this.angle - 10))) * UNIT_LENGTH *
            2}lpx`)// 计算高度
          .borderRadius('50%')// 设置圆角
          .backgroundColor("#2e3235")// 设置背景颜色
          .animation({ curve: Curve.EaseOut }); // 设置动画效果

        // 刻度线
        ForEach([10, 20, 30, 40, 50], (item: number) => {
          Text()
            .width(`${(15 + item) * UNIT_LENGTH * 2}lpx`)// 计算宽度
            .height(`${(15 + item) * UNIT_LENGTH * 2}lpx`)// 计算高度
            .borderWidth(1)// 设置边框宽度
            .borderRadius('50%')// 设置圆角
            .borderColor("#807d8184"); // 设置边框颜色

          // 刻度数字
          Text(`${item}`)
            .width(20)// 设置宽度
            .fontColor("#7d8184")// 设置字体颜色
            .fontSize(10)// 设置字体大小
            .textAlign(TextAlign.Center)// 设置文本对齐方式
            .margin({ left: `${(15 + item) * UNIT_LENGTH * 2}lpx` }); // 设置左边距
        });

        // 小球
        Text()
          .width(14)// 设置宽度
          .height(14)// 设置高度
          .backgroundColor("#ff5841")// 设置背景颜色
          .borderRadius('50%'); // 设置圆角

        // 小球背景
        Stack() {
          Stack() {
          }
          .radialGradient({
            center: [20, 20], // 设置渐变中心点
            radius: 60, // 设置渐变半径
            colors: [
              ["#807a7a83", 0.0], // 渐变颜色1
              ["#8074747e", 0.7], // 渐变颜色2
              ["#80898992", 1.0]// 渐变颜色3
            ]
          }).width('100%').height('100%') // 设置宽度和高度
        }
        .clip(true) // 设置裁剪
        .radialGradient({
          center: [20, 20], // 设置渐变中心点
          radius: 60, // 设置渐变半径
          colors: Math.floor(this.angle) === 0 ?
            [["#FF6B6B", 0.0], ["#D84315", 0.3], ["#C62828", 1.0]] : // 当角度为0时的渐变颜色
            [["#bcbcc6", 0.0], ["#464650", 0.3], ["#474750", 1.0]] // 当角度不为0时的渐变颜色
        })
        .width(50) // 设置宽度
        .height(50) // 设置高度
        .borderRadius('50%') // 设置圆角
        .translate({
          x: `${this.calculateBallPosition().x}lpx`, // 设置X轴偏移
          y: `${this.calculateBallPosition().y}lpx` // 设置Y轴偏移
        })
        .animation({ curve: Curve.EaseOut }); // 设置动画效果
      }.width('580lpx').height('580lpx').borderRadius('50%') // 设置外部大圆的宽度、高度和圆角
    }.height('100%') // 设置Stack的高度
    .width('100%') // 设置Stack的宽度
    .backgroundColor("#18181a"); // 设置背景颜色
  }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 224,861评论 6赞 522
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 96,263评论 3赞 402
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 172,033评论 0赞 366
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 60,999评论 1赞 300
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 70,000评论 6赞 400
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 53,483评论 1赞 314
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 41,850评论 3赞 428
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 40,827评论 0赞 279
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 47,366评论 1赞 324
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,404评论 3赞 346
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,525评论 1赞 355
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 37,130评论 5赞 351
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 42,853评论 3赞 338
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,293评论 0赞 25
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,426评论 1赞 276
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 50,082评论 3赞 381
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 46,590评论 2赞 366