【时间盒子】-【5.绘制闹钟】动态绘制钟表和数字时间

2024-09-05 19:44

本文主要是介绍【时间盒子】-【5.绘制闹钟】动态绘制钟表和数字时间,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Tips:

  • @Preview装饰器,支持组件可预览;

  • @Component装饰器,自定义组件;

  • Canvas组件的使用;

  • 使用RenderingContext在Canvas组件上绘制图形,请参考官方文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontext2d-V5

一、自定义闹钟组件

  1. 新建component目录用来存放自定义组件,在其下再新建ArkTS文件,命名为ClockArea.ets。

2.页面主要包括画布组件Canvas,点击画布切换显示时钟表盘或数字时间样式,对其属性设置及布局如下。

@State showClock: boolean = true; // 是否显示时钟
private renderContextSettings: RenderingContextSettings = new RenderingContextSettings(true);
private renderContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderContextSettings);
// 画布尺寸
private canvasSize: number = 252;
// 绘制间隔时间
private drawInterval: number = -1;
private clockRadius: number = this.canvasSize / 2 - 2;build() {Column() {Canvas(this.renderContext).width(this.canvasSize).aspectRatio(1).onClick(() => {this.showClock = !this.showClock;}).onReady(() => {if (this.drawInterval === -1) {// 开始绘制this.startDrawTask();}})}
}

 3.启动定时任务,每秒绘制一次闹钟,与时间同步秒针动态在走的效果。

/*** 启动定时绘制任务*/
private startDrawTask(): void {// console.log("开始绘制");this.renderContext.translate(this.canvasSize / 2, this.canvasSize / 2);this.drawClockArea()this.drawInterval = setInterval(() => {this.drawClockArea()}, 1000);
}

4.定义绘制闹钟区域的方法drawClockArea

/*** 绘制闹钟区域*/
private drawClockArea(): void {// console.log("绘制时区");let date = new Date();let hour = date.getHours();let minute = date.getMinutes();let second = date.getSeconds();this.renderContext.clearRect(-this.canvasSize,-this.canvasSize / 2,this.canvasSize * 2,this.canvasSize);if (this.showClock) {this.drawClockPan();this.drawClockHands(30 * (hour > 12 ? hour - 12 : hour)+ minute / 12 * 6,BaseConstant.HOUR_HAND_IMAGE_URL);this.drawClockHands(minute * 6, BaseConstant.MINUTE_HAND_IMAGE_URL);this.drawClockHands(second * 6, BaseConstant.SECOND_HAND_IMAGE_URL);} else {// 回显数字时间this.drawTimeHHMMSS(hour, minute, second);}
}

5.定义绘制闹钟的表盘的方法drawClockPan,其实就是一张表盘时刻的背景图。

/*** 绘制表盘*/
private drawClockPan(): void {let imgWidth = this.clockRadius * 2;let secondImg = new ImageBitmap(BaseConstant.CLOCK_PAN_IMAGE_URL);this.renderContext.beginPath();this.renderContext.drawImage(secondImg,-this.clockRadius,-this.clockRadius,imgWidth, imgWidth);this.renderContext.restore();
}

6.定义绘制表针的方法drawClockHands,包括时针、分针和秒针,每个针对应一个图片。

/*** 绘制表针:时针、分针、秒针*/
private drawClockHands(degree: number, handImgRes: string): void {let imgWidth = 10;let handImg = new ImageBitmap(handImgRes);let theta = (degree + 180) * Math.PI / 180;this.renderContext.save();this.renderContext.rotate(theta);this.renderContext.beginPath();this.renderContext.drawImage(handImg,-imgWidth / 2,-this.clockRadius,imgWidth,this.clockRadius * 2);this.renderContext.restore();
}

7.定义绘制数字时间的方法,时间的显示格式为24小时制HH:MM:SS。

/*** 绘制数字时间HH:MM:SS*/
private drawTimeHHMMSS(hour: number, minute: number, second: number): void {let hh = hour > 9 ? hour.toString() : "0" + hour;let mm = minute > 9 ? minute.toString() : "0" + minute;let ss = second > 9 ? second.toString() : "0" + second;let time = `${hh}:${mm}:${ss}`;this.renderContext.save();this.renderContext.font = SizeUtil.getPx($r("app.float.clock_time_font_size")) + "px";this.renderContext.beginPath();this.renderContext.textAlign = "center";this.renderContext.fillText(time, 0, 0);this.renderContext.restore();
}

到此,会发现以上代码缺少2个重要的类文件,分别是BaseConstant.ets和SizeUtil.ets,以及资源文件float.json的参数定义。

 

二、定义常量类文件BaseConstant.ets

新建目录constants,在其下新建ArkTS文件BaseConstant.ets。程序中的常量可以定义在这个类文件中,比如:图片路径等。

export class BaseConstant {static readonly CLOCK_PAN_IMAGE_URL: string = "images/icon_clock_pan.png";static readonly HOUR_HAND_IMAGE_URL: string = "images/icon_hour_hand.png";static readonly MINUTE_HAND_IMAGE_URL: string = "images/icon_minute_hand.png";static readonly SECOND_HAND_IMAGE_URL: string = "images/icon_second_hand.png";
}

三、定义单位转换类文件SizeUtil.ets

新建目录utils,在其下新建ArkTS文件SizeUtil.ets。为什么要封装这个单位转换公共类,可参考我的帖子:https://developer.huawei.com/consumer/cn/forum/topic/0208151714177357329?fid=0101587866109860105

import display from '@ohos.display';
import { GlobalContext } from './GlobalContext';let context = getContext(this);
const DESIGN_WIDTH = 360; // 设计稿宽度
const DESIGN_HEIGHT = 780; // 设计稿高度/*** 尺寸适配工具类*/
export default class SizeUtil {/*** 尺寸适配* @param value 设计稿尺寸*/static adaptSize(value: number): number {let deviceDisplay = GlobalContext.getContext().getObject("globalDisplay") as display.Display;let widthScale = deviceDisplay.width / DESIGN_WIDTH;let virtualHeight = DESIGN_HEIGHT * widthScale;let designDim = Math.sqrt(DESIGN_WIDTH * DESIGN_WIDTH + DESIGN_HEIGHT * DESIGN_HEIGHT);let virtualDim = Math.sqrt(deviceDisplay.width * deviceDisplay.width + virtualHeight * virtualHeight);return virtualDim * value / designDim; // 放缩后长度}/*** 获取px* @param value 设计稿尺寸*/static getPx(value: Resource): number {console.log("context:", context);let beforeVp = context.resourceManager.getNumber(value.id);return SizeUtil.adaptSize(beforeVp);}/*** 获取vp* @param value 设计稿尺寸*/static getVp(value: Resource): number {let beforeVp = context.resourceManager.getNumber(value.id);return px2vp(SizeUtil.adaptSize(beforeVp));}/*** 获取fp* @param value 设计稿尺寸*/static getFp(value: Resource): number {let beforeFp = context.resourceManager.getNumber(value.id);return px2fp(SizeUtil.adaptSize(beforeFp));}
}

四、定义全局上下文类文件GlobalContext.ets

在utils目录下新建ArkTS文件GlobalContext.ets。

/*** 全局上下文*/
export class GlobalContext {private constructor() {}private static instance: GlobalContext;private objects = new Map<string, Object>();/*** 获取全局上下文*/public static getContext(): GlobalContext {if (!GlobalContext.instance) {GlobalContext.instance = new GlobalContext();}return GlobalContext.instance;}/*** 获取对象*/getObject(name: string): Object | undefined {return this.objects.get(name);}/*** 设置对象*/setObject(key: string, objectClass: Object): void {this.objects.set(key, objectClass);}
}

五、资源文件float.json

在文件中定义常用的数值变量,比如:显示数字时间的字体大小。

{"name": "clock_time_font_size","value": "50"
},

请查阅官方文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/resource-usage-0000001820880417

六、图片文件

新建images目录,在其下添加已设计好的表盘、时针、分针和秒针的图片。

 (图片素材见文章顶部的附件)

七、运行效果

注意:需要在真机上才可见秒针走动的效果,及点击切换显示数字时钟。

 ​​​​​​

这篇关于【时间盒子】-【5.绘制闹钟】动态绘制钟表和数字时间的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1139885

相关文章

服务器集群同步时间手记

1.时间服务器配置(必须root用户) (1)检查ntp是否安装 [root@node1 桌面]# rpm -qa|grep ntpntp-4.2.6p5-10.el6.centos.x86_64fontpackages-filesystem-1.41-1.1.el6.noarchntpdate-4.2.6p5-10.el6.centos.x86_64 (2)修改ntp配置文件 [r

从去中心化到智能化:Web3如何与AI共同塑造数字生态

在数字时代的演进中,Web3和人工智能(AI)正成为塑造未来互联网的两大核心力量。Web3的去中心化理念与AI的智能化技术,正相互交织,共同推动数字生态的变革。本文将探讨Web3与AI的融合如何改变数字世界,并展望这一新兴组合如何重塑我们的在线体验。 Web3的去中心化愿景 Web3代表了互联网的第三代发展,它基于去中心化的区块链技术,旨在创建一个开放、透明且用户主导的数字生态。不同于传统

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始,按照书籍的划分,第10章开始就进入保护模式(Protected Mode)部分了,感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断(Interrupt)的设计,中断的几种方式:外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用: 为了更好的利用处理器的性能。协同快速和慢速设备一起工作

动态规划---打家劫舍

题目: 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。 给定一个代表每个房屋存放金额的非负整数数组,计算你 不触动警报装置的情况下 ,一夜之内能够偷窃到的最高金额。 思路: 动态规划五部曲: 1.确定dp数组及含义 dp数组是一维数组,dp[i]代表

usaco 1.2 Name That Number(数字字母转化)

巧妙的利用code[b[0]-'A'] 将字符ABC...Z转换为数字 需要注意的是重新开一个数组 c [ ] 存储字符串 应人为的在末尾附上 ‘ \ 0 ’ 详见代码: /*ID: who jayLANG: C++TASK: namenum*/#include<stdio.h>#include<string.h>int main(){FILE *fin = fopen (

【WebGPU Unleashed】1.1 绘制三角形

一部2024新的WebGPU教程,作者Shi Yan。内容很好,翻译过来与大家共享,内容上会有改动,加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ,关注公众号【sky的数孪技术】,技术交流、源码下载请添加微信号:digital_twin123 在 3D 渲染领域,三角形是最基本的绘制元素。在这里,我们将学习如何绘制单个三角形。接下来我们将制作一个简单的着色器来定义三角形内的像素

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

代码随想录冲冲冲 Day39 动态规划Part7

198. 打家劫舍 dp数组的意义是在第i位的时候偷的最大钱数是多少 如果nums的size为0 总价值当然就是0 如果nums的size为1 总价值是nums[0] 遍历顺序就是从小到大遍历 之后是递推公式 对于dp[i]的最大价值来说有两种可能 1.偷第i个 那么最大价值就是dp[i-2]+nums[i] 2.不偷第i个 那么价值就是dp[i-1] 之后取这两个的最大值就是d

MiniGPT-3D, 首个高效的3D点云大语言模型,仅需一张RTX3090显卡,训练一天时间,已开源

项目主页:https://tangyuan96.github.io/minigpt_3d_project_page/ 代码:https://github.com/TangYuan96/MiniGPT-3D 论文:https://arxiv.org/pdf/2405.01413 MiniGPT-3D在多个任务上取得了SoTA,被ACM MM2024接收,只拥有47.8M的可训练参数,在一张RTX

批处理以当前时间为文件名创建文件

批处理以当前时间为文件名创建文件 批处理创建空文件 有时候,需要创建以当前时间命名的文件,手动输入当然可以,但是有更省心的方法吗? 假设我是 windows 操作系统,打开命令行。 输入以下命令试试: echo %date:~0,4%_%date:~5,2%_%date:~8,2%_%time:~0,2%_%time:~3,2%_%time:~6,2% 输出类似: 2019_06