纯血鸿蒙APP实战开发——Canvas实现模拟时钟案例

介绍

本示例介绍利用Canvas
和定时器实现模拟时钟场景,该案例多用于用户需要显示自定义模拟时钟的场景。

效果图预览

使用说明

无需任何操作,进入本案例页面后,所见即模拟时钟的展示。

实现思路

本例的的主要实现思路如下:

  • 利用CanvasRenderingContext2D中的drawImage将表盘和表针绘制出来;
  • 利用定时器每秒刷新一次,计算好时针、分针、秒针对应的偏移量,重新绘制表盘和表针,实现表针的转动。

1.在aboutToAppear中执行init函数,初始化表盘和表针对应的pixelMap,并首次绘制表盘和表针,保证进入页面即展示时钟。

// 初始化表盘和表针对应的变量,并首次绘制。
private init() {let clockBgSource = image.createImageSource(this.resourceDir + '/' + CLOCK_BG_PATH);let hourSource = image.createImageSource(this.resourceDir + '/' + CLOCK_HOUR_PATH);let minuteSource = image.createImageSource(this.resourceDir + '/' + CLOCK_MINUTE_PATH);let secondSource = image.createImageSource(this.resourceDir + '/' + CLOCK_SECOND_PATH);const now = new Date();const currentHour = now.getHours();const currentMinute = now.getMinutes();const currentSecond = now.getSeconds();this.time = this.getTime(currentHour, currentMinute, currentSecond);// 创建表盘对应的PixelMap并绘制。let paintDial = clockBgSource.createPixelMap().then((pixelMap: image.PixelMap) => {this.clockPixelMap = pixelMap;this.paintDial();}).catch((err: BusinessError) => {logger.error(`[error]error at clockBgSource.createPixelMap:${err.message}`);});// 创建时针对应的PixelMap并绘制。hourSource.createPixelMap().then(async (pixelMap: image.PixelMap) => {await paintDial;const hourOffset = currentMinute / 2;this.paintPin(ANGLE_PRE_HOUR * currentHour + hourOffset, pixelMap);this.hourPixelMap = pixelMap;}).catch((err: BusinessError) => {logger.error(`[error]error at hourSource.createPixelMap:${err.message}`);});...
}

2.为表盘和表针的绘制注册监听,每秒钟重新绘制一次,实现时钟的转动。

// 2.监听时间变化,每秒重新绘制一次
this.timeListener = new TimeChangeListener((hour: number, minute: number, second: number) => {this.renderContext.clearRect(-this.clockRadius, -this.clockRadius, this.canvasSize, this.canvasSize);this.paintDial();this.timeChanged(hour, minute, second);this.time = this.getTime(hour, minute, second);},
);

3.表针的绘制逻辑也是关键的一部分,因表针的绘制涉及旋转场景,需每次在旋转前先保存当前的绘制状态,旋转绘制结束后再恢复,防止多次旋转导致时间错乱。

// 绘制表针
private paintPin(degree: number, pinImgRes: image.PixelMap | null) {// TODO:知识点:先将当前绘制上下文保存再旋转画布,先保存旋转前的状态,避免状态混乱。this.renderContext.save();const angleToRadian = Math.PI / 180;let theta = degree * angleToRadian;this.renderContext.rotate(theta);this.renderContext.beginPath();if (pinImgRes) {this.renderContext.drawImage(pinImgRes,-IMAGE_WIDTH / 2,-this.clockRadius,IMAGE_WIDTH,this.canvasSize);} else {logger.error('PixelMap is null!');}this.renderContext.restore();
}

高性能知识点

不涉及

工程结构&模块类型

analogclock                             // har类型
|---src/main/ets/pages
|   |---AnalogClock.ets                 // 页面及时钟绘制的主要逻辑
|   |---TimeChangeListener.ets          // 时间变化监听文件

模块依赖

路由管理模块

utils

参考资料

canvas

CanvasRenderingContext2D

image

鸿蒙全栈开发全新学习指南

也为了积极培养鸿蒙生态人才,让大家都能学习到鸿蒙开发最新的技术,针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线【包含了大厂APP实战项目开发】

本路线共分为四个阶段:

第一阶段:鸿蒙初中级开发必备技能

第二阶段:鸿蒙南北双向高工技能基础:gitee.com/MNxiaona/733GH

第三阶段:应用开发中高级就业技术

第四阶段:全网首发-工业级南向设备开发就业技术:https://gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》(共计892页)

如何快速入门?

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

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

基于ArkTS 开发

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

鸿蒙开发面试真题(含参考答案):gitee.com/MNxiaona/733GH

鸿蒙入门教学视频:

美团APP实战开发教学:gitee.com/MNxiaona/733GH

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新学习资源,请移步前往小编:gitee.com/MNxiaona/733GH

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/8336.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言:__attribute__((packed))

一、简介 在使用结构体的时候,经常要根据结构体的长度来进行相关判断。但是按照C语言的规则,会对不同类型的数据类型进行自动对齐。有时候就会造成一些问题,如果不需要使用自动对齐的功能,就需要使用到本章的关键字。 二、自动对…

相机内存卡格式化怎么恢复?恢复数据的3个方法

相机内存卡格式化后,许多用户都曾面临过照片丢失的困境。这些照片可能具有极高的纪念价值,也可能包含着重要的信息。因此如何有效地恢复这些照片变得至关重要。本文将详细介绍三种实用的恢复方法,帮助您找回那些珍贵的影像。 下面分享几个实…

JavaScript 动态网页实例 —— 数值处理对象

前言 Math对象用于进行数学运算。其属性是数学中一些常见的常数值,在程序中可以直接使用。Math对象的方法很多,主要完成一些常见的数学运算,如三角函数计算、乘方、开方、求对数等。在 Math 对象的方法中,除了random()之外的所有方法都需要一个或几个参数,并且其用法基本…

24V转3.8V用什么芯片方案-AH8310

在将24V降压至3.8V的电源转换中,AH8310是一个理想的选择。这款芯片是一款降压转换器,输入电压范围为4.5V至36V,输出电压可调,峰值电流可达1.5A。AH8310采用SOT23-6封装,内置MOS,适用于各种应用场合&#xf…

PostgreSQL数据库创建只读用户的权限安全隐患

PostgreSQL数据库模拟备库创建只读用户存在的权限安全隐患 default_transaction_read_only权限授权版本变更说明 看腻了就来听听视频演示吧:https://www.bilibili.com/video/BV1ZJ4m1578H/ default_transaction_read_only 创建只读用户,参照备库只读模…

力扣数据库题库学习(5.7日)--1789. 员工的直属部门

1789. 员工的直属部门 问题链接😊 思路分析 一个员工可以属于多个部门。当一个员工加入超过一个部门的时候,他需要决定哪个部门是他的直属部门。请注意,当员工只加入一个部门的时候,那这个部门将默认为他的直属部门&#xff0c…

Compose 生命周期和副作用

文章目录 Compose 生命周期和副作用生命周期副作用APIDisposableEffectSIdeEffectLaunchedEffectrememberCoroutineScoperememberUpdatedStatesnapshotFlowproduceStatederivedStateOf Compose 生命周期和副作用 生命周期 OnActive:添加到视图树。即Composable被首…

2024年教育创新与人文艺术国际学术会议(ICEIHA 2024)

2024年教育创新与人文艺术国际学术会议(ICEIHA 2024) 2024 International Conference on Educational Innovation and Humanities and Arts 一、【会议简介】 2024年教育创新与人文艺术国际学术会议,将探讨教育创新与人文艺术的结合。 本次会议将汇集全球的专家学者…

python基础---面向对象相关知识

面向对象 可以把数据以及功能打包为一个整体 类: 名称属性(数据)方法 class Person:def __init__(self, name, age):self.age ageself.name namedef print_info:print(self.name, self.age)定义 #经典类 class Dog1:pass# 新式类 class Dog2(object):pass在python3里面这…

漏洞伴随App无时不在,该怎么办?

漏洞攻击、加密被破坏以及数据泄露是App面临的三大重要安全风险,无论开发者如何防范,攻击者往往会找到新的方法,并依靠最新的工具来破坏App安全性。 统计数据表明,大约82%的漏洞是在App程序代码中发现的。如果尽快发现…

实测幻方新出的超强AI大模型,中文能力对比GPT4.0不落下风

目前从网上的消息来看,DeepSeek中文综合能力(AlignBench)开源模型中最强,与GPT-4-Turbo,文心4.0等闭源模型在评测中处于同一梯队。 话不多说,我们开测! 1.首先我们来让他直接来一段逻辑推理【并…

Linux学习笔记:信号

信号 在Linux中什么是信号信号的产生方式硬件产生的信号软件产生的信号异常产生的信号 进程对信号的处理信号的保存信号方法更改函数signal信号处理的更改恢复默认信号忽略 信号的管理信号集 sigset_t对信号集的操作 信号的捕捉过程 在Linux中什么是信号 在 Linux 系统中&…

MATLAB添加自编写.m文件或.mat数据并永久全局调用方法

菜单栏选择设置路径,然后“添加并包含子文件夹”,在弹出窗口中找到目标文件夹即可。此方案可以永久地将文件夹加入MATLAB路径。 添加包含自编写.m文件的文件夹: 即可实现永久全局调用。

【Elasticsearch运维系列】Elasticsearch7.12.1启动指定版本JDK:你学废了吗?

一、背景 一套生ES集群,版本为7.12.1,近期频繁告警,频繁出现索引分片异常,索引状态异常,导致应用无法正常写入ES,另外,也经常出现节点掉问题。通过分析相关ES日志,显示和当前JAVA G…

vue 开发环境的搭建

一、整个流程: 安装nodejs >> 安装vue >> 安装vue-cli >> 初始化 webpack(生成代码) >> 安装依赖 >> 运行vue程序 二、详细安装流程: 1.安装nodejs 下载:https://nodejs.org/dist/v12.18.3/node-v12.18.3-x…

电商核心内容揭秘50:个性化广告与投放策略

相关系列文章 电商技术揭秘相关系列文章合集(1) 电商技术揭秘相关系列文章合集(2) 电商技术揭秘相关系列文章合集(3) 电商技术揭秘四十一:电商平台的营销系统浅析 电商技术揭秘四十二&#…

基于卷积神经网络的高光谱分类 CNN(上)

基于卷积神经网络的高光谱分类 CNN 混合光谱HybridSN传统的2-D CNN混合光谱3-D CNN 操作步骤前言(准备)获取数据以及引入基本的库函数导入相关的包 创建模型模型网络结构代码测试 混合光谱HybridSN 传统的2-D CNN 传统的2-D CNN方法在处理HSI时往往只考…

密码口令初步

一,弱口令(ctfhub) 1.打开环境,发送到bp的instruder板块,一般id默认为admin,也可以用bp找出来,这里就是 2.先clear ,再把password等号后面添加进来(add)&am…

通过 Java 操作 redis -- list 列表基本命令

目录 使用命令 lpush,lrange,rpush 使用命令 lpop 和 rpop 使用命令 blpop,brpop 使用命令 llen 关于 redis list 列表类型的相关命令推荐看Redis - list 列表 要想通过 Java 操作 redis,首先要连接上 redis 服务器&#xff…

记一次java进程频繁挂掉问题排查修复

前言 最近业务部门有个java服务进程会突然无缘无故的挂掉,然后这个服务会产生一堆类似hs_err_pid19287.log这样的日志。业务部门负责人就把hs_err_pidxxx的日志发给我,让我帮忙看下问题。本文就来回顾一下,我是如何帮业务部门进行问题排查 …