鸿蒙应用框架开发【简单时钟】 UI框架

简单时钟

介绍

本示例通过使用@ohos.display接口以及Canvas组件来实现一个简单的时钟应用。

效果预览

使用说明

1.界面通过setInterval实现周期性实时刷新时间，使用Canvas绘制时钟，指针旋转角度通过计算得出。

例如："2 * Math.PI / 60 * second"是秒针旋转的角度。

具体实现

本示例展示简单时钟的方法主要封装在Index中，源码参考:[Index.ets] 。

/** Copyright (c) 2022 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**     http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/
import { display } from '@kit.ArkUI';
import Logger from '../utils/Logger';
import DrawClock from '../utils/DrawClock';
import CommonConstants from '../common/CommonConstants';const HEIGHT_ADD: number = CommonConstants.HEIGHT_ADD; // 表盘下面需要绘制时间，canvas高度是宽度加150
const TAG: string = 'Index';@Entry
@Component
struct Clock {@State canvasWidth: number = CommonConstants.DEFAULT_WATCH_SIZE; // 300是表盘默认大小private settings: RenderingContextSettings = new RenderingContextSettings(true);private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);private radius: number = CommonConstants.DEFAULT_WATCH_RADIUS; // 默认表盘半径private intervalId: number = 0;private drawClock: DrawClock = new DrawClock();updateTime = () => {this.context.clearRect(0, 0, this.canvasWidth, this.canvasWidth + HEIGHT_ADD);let nowTime = new Date();let hour = nowTime.getHours();let minute = nowTime.getMinutes();let second = nowTime.getSeconds();let time = `${this.fillTime(hour)}:${this.fillTime(minute)}:${this.fillTime(second)}`;this.drawClock.drawClock(this.context, this.radius, this.canvasWidth, hour, minute, second, time)this.context.translate(-this.radius, -this.radius);}fillTime(time: number) {return time < CommonConstants.NUMBER_TEN ? `0${time}` : `${time}`;}onPageShow(): void {this.updateTime();this.intervalId = setInterval(this.updateTime, CommonConstants.INTERVAL_TIME)}onPageHide() {clearInterval(this.intervalId);}aboutToAppear() {this.getSize();}// 获取设备宽高计算表盘大小async getSize() {let mDisplay = display.getDefaultDisplaySync();Logger.info(TAG, `getDefaultDisplay mDisplay = ${JSON.stringify(mDisplay)}`);this.canvasWidth = px2vp(mDisplay.width > mDisplay.height ? mDisplay.height * CommonConstants.CONVERSION_RATE :mDisplay.width * CommonConstants.CONVERSION_RATE);this.radius = this.canvasWidth / CommonConstants.NUMBER_TWO;}build() {Stack({ alignContent: Alignment.Center }) {Canvas(this.context).padding({ top: $r('app.float.canvas_padding_top') }).width(this.canvasWidth).height(this.canvasWidth + HEIGHT_ADD).onReady(() => {this.updateTime();this.intervalId = setInterval(this.updateTime, CommonConstants.INTERVAL_TIME);})}.width(CommonConstants.FULL_PERCENTAGE).height(CommonConstants.FULL_PERCENTAGE)}
}

设置表盘大小：通过Index中的display.getDefaultDisplay()方法来获取设备宽高计算表盘大小；
获取当前时间：调用updateTime函数，执行new Date().getHours()、new Date().getMinutes()、new Date().getSeconds()获取当前时间。
绘制表盘内容：通过CanvasRenderingContext2D来画表盘背景、时针、分针、秒针、圆心以及表盘下方文本；
启动时钟：添加setInterval定时器，每隔1s执行一次updateTime函数。

以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解；想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到！
下面是鸿蒙的完整学习路线，展示如下：