OpenHarmony实战开发-如何开发一个表盘方式和数字方式的时钟

最新推荐文章于 2024-07-25 09:06:44 发布
最新推荐文章于 2024-07-25 09:06:44 发布
阅读量869 收藏 13
点赞数 12
分类专栏： 鸿蒙 OpenHarmony HarmonyOS 文章标签： 鸿蒙应用开发 harmonyos HarmonyOS 鸿蒙工程师 OpenHarmony 鸿蒙 鸿蒙开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70749039/article/details/139145610
版权
鸿蒙 同时被 3 个专栏收录
661 篇文章 4 订阅
订阅专栏
HarmonyOS
654 篇文章 4 订阅
订阅专栏
OpenHarmony
648 篇文章 6 订阅
订阅专栏

场景介绍

常见的时钟呈现方式有两种，一种是表盘方式，一种是数字方式。用户可根据个人喜好在两种形式间进行切换。本例即为大家讲解如何开发上述两种钟表样式，以供参考。

效果呈现

本例最终效果如下：

在这里插入图片描述

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

  • IDE: DevEco Studio 3.1 Beta2
  • SDK: Ohos_sdk_public 3.2.11.9 (APIVersion 9 Release)

实现思路

  • 表盘方式的展示：通过Canvas组件提供画布;在画布上，通过CanvasRenderingContext2D对象使用RenderingContext在Canvas组件上进行绘制，绘制表盘上的数字、时针、分针、秒针。表盘上数字的分布使用fillText绘制填充类文本并确定其在画布上位置；表盘上时针的运动通过theta的角度决定时针的移动；分针和秒针同上。
  • 数字时间方式的展示：使用TextClock组件通过文本将系统时间显示在设备上。

开发步骤

根据上述思路，具体实现步骤如下：

1.表盘方式：通过CanvasRenderingContext2D对象使用RenderingContext在Canvas组件上进行绘制，绘制表盘上的数字、时针、分针、秒针。 首先，创建画布，具体代码如下：

// clock ets
clear() { // clear canvas function
  this.ctx.clearRect(0, 0, 360, 500);
}
drawScene() { // main drawScene function 绘制场景
  this.clear(); // clear canvas
...
build() {
  Column({ space: 5 }) {
    Canvas(this.ctx)
      .width(360)
      .height(500)
      .border({ width: 1, color: '#ffff00'})
      .onReady(() => {
        setInterval(() => {
          this.drawScene()
        }, 1000)
      })
      ...
  }
}

声明相关变量，具体代码如下：

// clock ets
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
hours = hours > 12 ? hours - 12 : hours;
let hour = hours + minutes / 60;
let minute = minutes + seconds / 60;

使用fillText方法绘制表盘数字并确定其位置

// clock ets
...
// draw numbers
this.ctx.font = '36px Arial'; //文本尺寸
this.ctx.fillStyle = '#000';   //指定绘制的填充色
this.ctx.textAlign = 'center'; // 文本对齐
this.ctx.textBaseline = 'middle'; //文本基线
for (let n = 0; n < 12; n++) {
  let theta = (n - 2) * (Math.PI * 2) / 12;
  let x = clockRadius * 0.7 * Math.cos(theta);
  let y = clockRadius * 0.7 * Math.sin(theta);
  this.ctx.fillText(`${n + 1}`, x, y);  // 表盘数字所在的位置
...

时针的移动路径，具体代码如下：

// clock ets
...
// draw hour
this.ctx.save(); //将当前状态放入栈中，保存canvas的全部状态，通常在需要保存绘制状态时调用
let theta = (hour - 3) * 2 * Math.PI / 12;
this.ctx.rotate(theta); //顺时针旋转
this.ctx.beginPath(); //创建一个新的绘制路径
this.ctx.moveTo(-15, -5); //绘制时针组件 起始点
this.ctx.lineTo(-15, 5);
this.ctx.lineTo(clockRadius * 0.3, 1);
this.ctx.lineTo(clockRadius * 0.3, -1); //绘制时针组件 终点
this.ctx.fillStyle = 'green';
this.ctx.fill();
this.ctx.restore(); //对保存的绘图上下文进行恢复
...

分针的移动路径，具体代码如下：

// clock ets
...
// draw minute
this.ctx.save();
theta = (minute - 15) * 2 * Math.PI / 60;
this.ctx.rotate(theta); //顺时针旋转
this.ctx.beginPath(); //创建一个新的绘制路径
this.ctx.moveTo(-15, -4);//绘制分针组件 起始点
this.ctx.lineTo(-15, 4);
this.ctx.lineTo(clockRadius * 0.45, 1);
this.ctx.lineTo(clockRadius * 0.45, -1);//绘制分针组件 终点
this.ctx.fillStyle = 'red';
this.ctx.fill();
this.ctx.restore(); //对保存的绘图上下文进行恢复
...

秒针的移动路径，具体代码如下：

// clock ets
...
// draw second
this.ctx.save();
theta = (seconds - 15) * 2 * Math.PI / 60;
this.ctx.rotate(theta); //顺时针旋转
this.ctx.beginPath(); //创建一个新的绘制路径
this.ctx.moveTo(-15, -3);//绘制秒针组件 起始点
this.ctx.lineTo(-15, 3);
this.ctx.lineTo(clockRadius * 0.6, 1);
this.ctx.lineTo(clockRadius * 0.6, -1);//绘制秒针组件 终点
this.ctx.fillStyle = 'black';
this.ctx.fill();
this.ctx.restore(); //对保存的绘图上下文进行恢复
...

2.时钟方式的转换：通过Button组件中的onClick事件进行切换页面。 从表盘方式往数字方式转换，具体代码如下：

// clock.ets
...
Button(){
  Text("切换")
    .fontSize(30)
    .fontWeight(FontWeight.Regular)
}
.type(ButtonType.Capsule)
.margin({top:20
})
.backgroundColor("red")
.width('40%')
.height('5%')
.onClick(()=>{
  router.pushUrl({url:'pages/Index1'})
})
...

从数字时间方式往表盘方式转换，具体代码如下：

// TextClock.ets
...
Button() {
  Text("切换")
    .fontSize(30)
    .fontWeight(FontWeight.Regular)
}
.type(ButtonType.Capsule)
.margin({ top: 20
})
.backgroundColor("red")
.width('40%')
.height('5%')
.onClick(() => {
  router.back()
})
...

3.数字时间方式：使用TextClock组件通过文本将当前系统时间显示在设备上。 具体代码如下：

// TextClock.ets
import router from '@ohos.router'
@Entry
@Component
struct Second {
  @State accumulateTime: number = 0
  // 导入对象
  controller: TextClockController = new TextClockController()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      TextClock({ timeZoneOffset: -8, controller: this.controller })
        .format('hms') //数字时间格式
        .onDateChange((value: number) => {
          this.accumulateTime = value
        })
        .margin(20)
        .fontSize(30)
        ...
    }
  }
}

完整代码

完整示例代码如下： 表盘时钟代码页

// clock.ets
import router from '@ohos.router';
const clockRadius = 180;

@Entry
@Component
struct Test10 {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  // 绘制函数
  clear() {
    this.ctx.clearRect(0, 0, 360, 500);
  }
  drawScene() { // 绘制场景
    this.clear(); // 清空画布
    // 获取当前时间
    let date = new Date();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    hours = hours > 12 ? hours - 12 : hours;
    let hour = hours + minutes / 60;
    let minute = minutes + seconds / 60;
    this.ctx.save();
    this.ctx.translate(360 / 2, 500 / 2);
    this.ctx.beginPath(); //创建一个新的绘制路径

    // 绘制表盘数字
    this.ctx.font = '45px Arial'; //文本尺寸
    this.ctx.fillStyle = '#000';   //指定绘制的填充色
    this.ctx.textAlign = 'center'; // 文本对齐
    this.ctx.textBaseline = 'middle'; //文本基线
    for (let n = 0; n < 12; n++) {
      let theta = (n - 2) * (Math.PI * 2) / 12;
      let x = clockRadius * 0.7 * Math.cos(theta);
      let y = clockRadius * 0.7 * Math.sin(theta);
      this.ctx.fillText(`${n + 1}`, x, y);  // 表盘数字所在的位置
    }

    // 绘制时针
    this.ctx.save(); //将当前状态放入栈中，保存canvas的全部状态，通常在需要保存绘制状态时调用
    let theta = (hour - 3) * 2 * Math.PI / 12;
    this.ctx.rotate(theta); //顺时针旋转
    this.ctx.beginPath(); //创建一个新的绘制路径
    this.ctx.moveTo(-15, -5); //绘制时针组件 起始点
    this.ctx.lineTo(-15, 5);
    this.ctx.lineTo(clockRadius * 0.3, 1);
    this.ctx.lineTo(clockRadius * 0.3, -1);
    this.ctx.fillStyle = 'green';
    this.ctx.fill();
    this.ctx.restore(); //对保存的绘图上下文进行恢复

    // 绘制分针
    this.ctx.save();
    theta = (minute - 15) * 2 * Math.PI / 60;
    this.ctx.rotate(theta); //顺时针旋转
    this.ctx.beginPath(); //创建一个新的绘制路径
    this.ctx.moveTo(-15, -4); //绘制分针组件 起始点
    this.ctx.lineTo(-15, 4);
    this.ctx.lineTo(clockRadius * 0.45, 1);
    this.ctx.lineTo(clockRadius * 0.45, -1);
    this.ctx.fillStyle = 'red';
    this.ctx.fill();
    this.ctx.restore(); //对保存的绘图上下文进行恢复

    // 绘制秒针
    this.ctx.save();
    theta = (seconds - 15) * 2 * Math.PI / 60;
    this.ctx.rotate(theta); //顺时针旋转
    this.ctx.beginPath(); //创建一个新的绘制路径
    this.ctx.moveTo(-15, -3); //绘制秒针组件 起始点
    this.ctx.lineTo(-15, 3);
    this.ctx.lineTo(clockRadius * 0.6, 1);
    this.ctx.lineTo(clockRadius * 0.6, -1);
    this.ctx.fillStyle = 'black';
    this.ctx.fill();
    this.ctx.restore(); //对保存的绘图上下文进行恢复

    this.ctx.restore(); //对保存的绘图上下文进行恢复
  }

  build() {
    Column({ space: 5 }) {
      Canvas(this.ctx)
        .width(360)
        .height(500)
        .onReady(() => {
          setInterval(() => {
            this.drawScene()
          }, 1000)
        })
      Button(){
        Text("切换")
          .fontSize(30)
          .fontWeight(FontWeight.Regular)
      }
      .type(ButtonType.Capsule)
      .margin({top:20
      })
      .backgroundColor('#E8A027')
      .width('40%')
      .height('5%')
      .onClick(()=>{
        router.pushUrl({url:'pages/TextClock'})
      })
    }.width('100%')
    .height('100%')
    .backgroundColor('#A4AE75')
  }
}

数字时间代码页：

//TextClock.ets
import router from '@ohos.router'
@Entry
@Component
struct Second {
  @State accumulateTime: number = 0
  // 导入对象
  controller: TextClockController = new TextClockController()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

      TextClock({ timeZoneOffset: -8, controller: this.controller }) //timeZoneOffset 时区偏移ian
        .format('hms')
        .onDateChange((value: number) => {
          this.accumulateTime = value
        })
        .margin(20)
        .fontSize(30)
      Button() {
        Text("切换")
          .fontSize(30)
          .fontWeight(FontWeight.Regular)
      }
      .type(ButtonType.Capsule)
      .margin({ top: 20
      })
      .backgroundColor('#E8A027')
      .width('40%')
      .height('5%')
      .onClick(() => {
        router.back()
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#D4C3B3')
  }
}

参考

Canvas

CanvasRenderingContext2D对象

TextClock

我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、实战开发视频教程》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

在这里插入图片描述

应用开发中级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……
在这里插入图片描述

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
在这里插入图片描述

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

不入流HarmonyOS开发
关注
  • 12
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【OpenHarmony硬件操作】OLED屏的使用、RGB灯的使用
m0_62599305的博客
02-11 197
OLED（Organic Light Emitting Diode）屏幕作为一种先进的显示技术，具有低功耗、高对比度、快速响应时间等优势，在各种嵌入式设备和消费电子产品中得到了广泛应用。为了在OpenHarmony环境下充分利用这一先进技术，开发者们需要了解如何对OLED屏幕进行硬件操作。本文将介绍如何在OpenHarmony中使用OLED屏幕，包括初始化、显示文本和图像等基本操作，以帮助开发者快速上手。
swift-一个简单的表盘动画指针动画
08-15
一个简单的表盘动画！指针动画！
android wear 2.0 表盘开发,android wear手表开发如何获取所有的表盘（动态）以及切换表盘...
weixin_29231263的博客
05-26 871
获取到所有的表盘信息关于表盘的获取，网上的资料也少，也只是怎么获取当前壁纸(表盘)。这里呢，就从思路上尝试去获取表盘。思路：原理上来讲，表盘就是一个服务，动态壁纸，在后台不断地刷新。这样子的话，我们可以通过获取所有的服务，添加过滤即获取表盘。1、拿到包管理器2、通过包管理器去获取所有的服务，但是要添加过滤3、还是看码吧，已经定了注释，相信聪明的你一定可以的private void getAllWa...
OpenHarmony开发实战：闹钟（ArkTS）
shudaoshanQAQ的博客
04-09 855
本篇Codelab将介绍如何使用后台代理提醒，实现一个简易闹钟
OpenHarmony实战开发-如何实现时间日期国际化
2401_82546228的博客
05-16 801
在不同的国家和文化中，时间和日期格式的表示方法有所不同，使用惯例的不同点包括：日期中年月日的顺序、时间中时分秒的分隔符等。若应用中需展示时间日期，要确保界面以合适的方式显示，以便用户能够理解。
Qt实战开发-仪表盘制作
热门推荐
Osean_li的博客
02-13 1万+
QT实战开发
OpenHarmony实战开发-Canvas实现模拟时钟案例。
m0_70749039的博客
04-19 500
本示例介绍利用Canvas 和定时器实现模拟时钟场景，该案例多用于用户需要显示自定义模拟时钟的场景。
鸿蒙实战开发-如何实现时钟、闹钟、倒计时、设置屏幕亮度相功能
2401_82546228的博客
04-01 1876
本示例集中展示了时钟、闹钟、倒计时、设置屏幕亮度相关的场景，
Android-TClock一个简单的时钟表盘控件
08-13
TClock 是一个专门为 Android 平台设计的简单时钟表盘控件，它为开发者提供了一种方便的方式来在应用程序中集成具有美观外观和实用功能的时钟界面。这个控件适用于那些希望创建个性化或者模拟真实时钟效果的应用，...
经典手表：显示模拟时钟和数字时钟-matlab开发
05-30
我们可以使用GUIDE创建一个新的窗口，在窗口中添加两个面板，分别用于显示模拟时钟和数字时钟。在MATLAB的工作环境中，打开GUIDE，然后设计窗口布局，设置面板大小和位置。 对于模拟时钟，我们需要利用MATLAB的图形...
HTML5带表盘和数字刻度时钟代码
04-02
在这个“HTML5带表盘和数字刻度时钟代码”项目中，我们主要关注的是如何利用HTML5的Canvas元素来构建一个功能完备的时钟界面。 Canvas是HTML5中引入的一个重要绘图API，它允许开发者通过JavaScript来绘制图形。在这...
微信小程序开发-工具类-鱼缸表盘系统小程序案例源码.zip
08-15
微信小程序开发-工具类-鱼缸表盘系统小程序案例源码.zip
鸿蒙上的“adb“即hdc常用命令
学习与分享
07-23 293
hdc（HarmonyOS Device Connector）是为开发人员提供的用于调试的命令行工具，通过该工具可以在windows/linux/mac系统上与真实设备进行交互。
鸿蒙界面开发
qq_46025779的博客
07-23 2130
界面开发界面开发-布局思路属性方法字体颜色文字溢出省略号、行高Image图片组件输入框与按钮综合实训设计资源-svg图标欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入MarkdownText-to-HTML。
鸿蒙9+在TV端焦点封装控制
熊佳龙的博客
07-24 485
鸿蒙自定义Component焦点封装控制
鸿蒙HarmonyOS开发：多种内置弹窗及自定义弹窗的详细使用指南
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
07-25 916
弹窗是移动应用中常见的一种用户界面元素，常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用，除此之外还支持自定义弹窗，来满足各种不同的需求。不同弹窗的详细使用介绍，消息提示框（showToast）、对话框（showDialog）、警告弹窗（AlertDialog）、操作菜单（showActionMenu）、操作列表弹窗（ActionSheet）、文本滑动选择器弹窗 (TextPickerDialog)、自定义弹窗 (CustomDialog)。
SignalR2.0开发实战指南
SignalR2.0是一个专门针对ASP.NET开发人员设计的库，它的主要目标是简化实时Web功能的实现。实时Web功能的核心在于，当客户端连接建立后，服务器能够即时地向客户端推送内容，而无需等待客户端发起新的请求。SignalR...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值