纯血鸿蒙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个方法

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

【Kotlin】Java三目运算转成 kotlin 表达

这行代码会直接计算 array.size 1 的布尔值,并将其赋值给 result。在 Kotlin 中,不需要使用三元操作符,因为条件表达式本身就返回一个布尔值 java 中三木运算: int [] array new int[]{1, 2, 3, 4, 5}; boolean test array &g…

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

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

vue-video-play使用之播放hls格式视频

开发准备 vue-video-player和videojs-contrib-hls npm i vue-video-player npm i videojs-contrib-hls引入 import { videoPlayer } from vue-video-player import videojs-contrib-hls使用 <videoPlayerv-elseid"jsVideo"ref"videoPlayer":playsinl…

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

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

基于微信小程序的网上购物系统的设计与实现

基于微信小程序的网上购物系统的设计与实现 “Design and Implementation of an Online Shopping System based on WeChat Mini Program” 完整下载链接:基于微信小程序的网上购物系统的设计与实现 文章目录 基于微信小程序的网上购物系统的设计与实现摘要第一章 绪论1.1 研究…

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

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

【算法刷题day46】Leetcode:139. 单词拆分

文章目录 Leetcode 139. 单词拆分解题思路代码总结 草稿图网站 java的Deque Leetcode 139. 单词拆分 题目&#xff1a;139. 单词拆分 解析&#xff1a;代码随想录解析 解题思路 只使用了一种方法&#xff0c; 用集合记录wordDict&#xff0c;定义一个valid数组&#xff08;初…

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

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

Compose 生命周期和副作用

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

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

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

超越视觉极限:深度学习图像超分辨率算法清单【第二部分】

超越视觉极限&#xff1a;深度学习图像超分辨率算法清单【第二部分】 简介2017年 - SRGAN (Super-Resolution Generative Adversarial Network)2017年 - DRRN (Deep Recursive Residual Network)2018年 - ESRGAN (Enhanced Super-Resolution Generative Adversarial Networks)2…

Socks5代理IP可以运用到哪些应用场景?

在网络技术快速发展的今天&#xff0c;Socks5代理和HTTP代理已成为两种常见的代理服务类型。它们在很多方面都有应用&#xff0c;但Socks5代理以其独特的特点和更加广泛的应用场景而受到青睐。在深入探讨Socks5代理的应用场景之前&#xff0c;让我们首先区分Socks5代理和HTTP代…

JavaScript中的数组方法

push() 功能&#xff1a;在数组的末尾添加一个或多个元素&#xff0c;并返回新数组的长度。 示例代码&#xff1a; let fruits [apple, banana]; let length fruits.push(orange); console.log(fruits); // 输出&#xff1a;[apple, banana, orange] console.log(length); //…

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面临的三大重要安全风险&#xff0c;无论开发者如何防范&#xff0c;攻击者往往会找到新的方法&#xff0c;并依靠最新的工具来破坏App安全性。 统计数据表明&#xff0c;大约82&#xff05;的漏洞是在App程序代码中发现的。如果尽快发现…

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

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

Linux学习笔记:信号

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

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

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