当前位置： 首页 > news >正文

开源 Arkts 鸿蒙应用 开发（十六）自定义绘图控件--波形图

news 2025/8/16 9:32:39

 文章的目的为了记录使用Arkts 进行Harmony app 开发学习的经历。本职为嵌入式软件开发，公司安排开发app，临时学习，完成app的开发。开发流程和要点有些记忆模糊，赶紧记录，防止忘记。

 相关链接：

开源 Arkts 鸿蒙应用 开发（一）工程文件分析-CSDN博客

开源 Arkts 鸿蒙应用 开发（二）封装库.har制作和应用-CSDN博客

开源 Arkts 鸿蒙应用 开发（三）Arkts的介绍-CSDN博客

开源 Arkts 鸿蒙应用 开发（四）布局和常用控件-CSDN博客

开源 Arkts 鸿蒙应用 开发（五）控件组成和复杂控件-CSDN博客

开源 Arkts 鸿蒙应用 开发（六）数据持久--文件和首选项存储-CSDN博客

开源 Arkts 鸿蒙应用 开发（七）数据持久--sqlite关系数据库-CSDN博客

开源 Arkts 鸿蒙应用 开发（八）多媒体--相册和相机-CSDN博客

开源 Arkts 鸿蒙应用 开发（九）通讯--tcp客户端-CSDN博客

开源 Arkts 鸿蒙应用 开发（十）通讯--Http-CSDN博客

开源 Arkts 鸿蒙应用 开发（十一）证书和包名修改-CSDN博客

开源 Arkts 鸿蒙应用 开发（十二）传感器的使用-CSDN博客

开源 Arkts 鸿蒙应用 开发（十三）音频--MP3播放_arkts avplayer播放音频 mp3-CSDN博客

开源 Arkts 鸿蒙应用 开发（十四）线程--任务池(taskpool)-CSDN博客

开源 Arkts 鸿蒙应用 开发（十五）自定义绘图控件--仪表盘-CSDN博客

开源 Arkts 鸿蒙应用 开发（十六）自定义绘图控件--波形图-CSDN博客

 推荐链接：

开源 java android app 开发（一）开发环境的搭建-CSDN博客

开源 java android app 开发（二）工程文件结构-CSDN博客

开源 java android app 开发（三）GUI界面布局和常用组件-CSDN博客

开源 java android app 开发（四）GUI界面重要组件-CSDN博客

开源 java android app 开发（五）文件和数据库存储-CSDN博客

开源 java android app 开发（六）多媒体使用-CSDN博客

开源 java android app 开发（七）通讯之Tcp和Http-CSDN博客

开源 java android app 开发（八）通讯之Mqtt和Ble-CSDN博客

开源 java android app 开发（九）后台之线程和服务-CSDN博客

开源 java android app 开发（十）广播机制-CSDN博客

开源 java android app 开发（十一）调试、发布-CSDN博客

开源 java android app 开发（十二）封库.aar-CSDN博客

推荐链接：

开源C# .net mvc 开发（一）WEB搭建_c#部署web程序-CSDN博客

开源 C# .net mvc 开发（二）网站快速搭建_c#网站开发-CSDN博客

开源 C# .net mvc 开发（三）WEB内外网访问(VS发布、IIS配置网站、花生壳外网穿刺访问)_c# mvc 域名下不可訪問內網,內網下可以訪問域名-CSDN博客

开源 C# .net mvc 开发（四）工程结构、页面提交以及显示_c#工程结构-CSDN博客

开源 C# .net mvc 开发（五）常用代码快速开发_c# mvc开发-CSDN博客

本章内容主要演示了如何使自定义控件，通过画布实现一个心率监测应用，主要包含三个文件：Index.ets、HeartRate.ets和HeartRateGraph.ets。

1.工程结构

2.源码解析

3.演示效果

4.工程下载网址

一、工程结构,主要有标红部分4个文件

二、源码解析

2.1  Index.ets
这是应用的入口文件，主要功能：

创建一个简单的界面展示心率数据和心率图表

使用AppStorage存储心率数据

通过定时器模拟心率数据变化

代码如下：
 

import HeartRateGraph from '../uicomponents/HeartRateGraph';@Entry
@Component
struct Index {@State heartRate: number = 0;aboutToAppear() {// 初始化 AppStorage 中的 heartRateAppStorage.setOrCreate('heartRate', this.heartRate);// 定时更新setInterval(() => {this.heartRate = Math.floor(Math.random() * 60) + 60;AppStorage.setOrCreate('heartRate', this.heartRate);}, 1000);}build() {Column() {// 不需要传递 heartRate 参数HeartRateGraph({viewWidth: 360,viewHeight: 300}).width('100%').height(300)Text(`当前心率: ${this.heartRate} bpm`).fontSize(18)}}
}

2.2  HeartRate.ets
这是主要的心率展示页面：展示心率数据（最大值、最小值、平均值、当前值）

使用@StorageLink从AppStorage同步心率数据和窗口大小数据

通过@Watch装饰器监听数据变化

以下为代码：

/** Copyright (c) 2024 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, promptAction, window } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';import HeartRateGraph from '../uicomponents/HeartRateGraph';
const uiContext: UIContext | undefined = AppStorage.get('uiContext');
const HEIGHT_NAVIGATION_BAR = 64;
const HEIGHT_TOP_ROW = 40;
const MARGIN_HORIZONTAL = 60;
const HEART_RATE_TOO_LOW = 50;
const HEART_RATE_TOO_HIGH = 100;
const context: Context =uiContext!.getHostContext()!;@Component
export struct HeartRate {@StorageLink('heartRate') @Watch('onHeartRate') heartRate: number = 0;@StorageLink('windowSize') @Watch('onWindowSizeChange') windowSize: window.Size = {width: display.getDefaultDisplaySync().width,height: display.getDefaultDisplaySync().height};@State isFoldAble: boolean = false;@State foldStatus: number = 2;@State heartRateTop: number = 0;@State heartRateBottom: number = 0;@State heartRateAverage: number = 0;@State graphWidth: number = this.windowSize.width - this.getUIContext().vp2px(MARGIN_HORIZONTAL) * 2;@State graphHeight: number = this.windowSize.height - this.getUIContext().vp2px(HEIGHT_NAVIGATION_BAR) - this.getUIContext().vp2px(HEIGHT_TOP_ROW * 3);@State isConnect: boolean = false;private windowClass = (context as common.UIAbilityContext).windowStage.getMainWindowSync();onHeartRate(): void {this.heartRateTop = this.heartRateTop < this.heartRate ? this.heartRate : this.heartRateTop;this.heartRateBottom = (this.heartRateBottom === 0) ? this.heartRate :(this.heartRateBottom > this.heartRate) ? this.heartRate : this.heartRateBottom;this.heartRateAverage = (this.heartRateAverage + this.heartRate) / 2;}onWindowSizeChange(): void {this.graphWidth = this.windowSize.width - this.getUIContext().vp2px(MARGIN_HORIZONTAL) * 2;this.graphHeight = this.windowSize.height - this.getUIContext().vp2px(HEIGHT_NAVIGATION_BAR) - this.getUIContext().vp2px(HEIGHT_TOP_ROW * 3);}showWarningReminder(): boolean {return this.tooHigh() || this.tooLow();}tooHigh(): boolean {return this.heartRate > HEART_RATE_TOO_HIGH;}tooLow(): boolean {return this.heartRate < HEART_RATE_TOO_LOW;}setOrientation(orientation: number) {this.windowClass.setPreferredOrientation(orientation).then(() => {//Logger.info('setWindowOrientation Succeeded');}).catch((err: BusinessError) => {//Logger.error(`setWindowOrientation Failed. Cause:${JSON.stringify(err)}`);})this.windowClass.setWindowSystemBarEnable([]);}aboutToAppear() {this.setOrientation(window.Orientation.LANDSCAPE);let mWindow: window.Window | undefined;let windowStage: window.WindowStage | undefined;mWindow = windowStage?.getMainWindowSync();mWindow?.on('windowSizeChange', (size: window.Size) => {AppStorage.setOrCreate('windowSize', size);})this.isFoldAble = display.isFoldable();let foldStatus: display.FoldStatus = display.getFoldStatus();if (this.isFoldAble) {this.foldStatus = foldStatus;let callback: Callback<number> = () => {let data: display.FoldStatus = display.getFoldStatus();this.foldStatus = data;}display.on('change', callback);}}aboutToDisappear(): void {this.setOrientation(window.Orientation.PORTRAIT);}build() {NavDestination() {Row() {Row() {Image($r('app.media.heart_fill')).width(36).aspectRatio(1).margin({ left: 8 })Column() {Row() {Text(`${this.heartRateTop}`).fontColor(Color.Black).opacity(0.9).fontSize(26).fontWeight(FontWeight.Bold)Text($r('app.string.times_per_minute')).fontColor(Color.Black).opacity(0.6)}.width(90)Text($r('app.string.maximum_heart_rate')).fontColor(Color.Black).opacity(0.6).width(90)}.margin({ left: 30, right: 50 })Column() {Row() {Text(`${this.heartRateBottom}`).fontColor(Color.Black).opacity(0.9).fontSize(26).fontWeight(FontWeight.Bold)Text($r('app.string.times_per_minute')).fontColor(Color.Black).opacity(0.6)}.width(90)Text($r('app.string.minimum_heart_rate')).fontColor(Color.Black).opacity(0.6).width(90)}}.alignItems(VerticalAlign.Center).width(this.isFoldAble && this.foldStatus === 2 ? 345 : 360).height(90).backgroundColor(Color.White).borderRadius(12).margin({ right: 24 })Row() {Image($r('app.media.waveform_path_ecg_heart_fill')).width(36).aspectRatio(1).margin({ left: 8 })Column() {Row() {Text(`${Math.floor(this.heartRateAverage)}`).fontColor(Color.Black).opacity(0.9).fontSize(26).fontWeight(FontWeight.Bold)Text($r('app.string.times_per_minute')).fontColor(Color.Black).opacity(0.6)}.width(90)Text($r('app.string.mean_heart_rate')).fontColor(Color.Black).opacity(0.6).width(90)}.margin({ left: 30, right: 50 })Column() {Row() {Text(`${this.heartRate}`).fontColor(Color.Black).opacity(0.9).fontSize(26).fontWeight(FontWeight.Bold)Text($r('app.string.times_per_minute')).fontColor(Color.Black).opacity(0.6)}.width(90)Text($r('app.string.current_heart')).fontColor(Color.Black).opacity(0.6).width(90)}}.alignItems(VerticalAlign.Center).width(this.isFoldAble && this.foldStatus === 2 ? 345 : 360).height(90).backgroundColor(Color.White).borderRadius(12)}.width('100%').height(90).padding({ left: 60, right: 60 }).justifyContent(FlexAlign.SpaceBetween).margin({ bottom: 36 })HeartRateGraph({viewWidth: 756,viewHeight: 180})}.hideTitleBar(true).backgroundColor('#F5F5F5')}
}

2.3  HeartRateGraph.ets
这是心率图表组件，主要功能：绘制心率变化曲线图，显示坐标轴和时间轴，响应视图大小变化

使用CanvasRenderingContext2D进行绘图，绘制坐标轴、网格线和心率曲线

以下为代码：

import DateUtils from '../utils/DateUtils';
const uiContext: UIContext | undefined = AppStorage.get('uiContext');
const SIZE: number = 12;
const COORDINATE_SIZE: number = 5;
const LINE_WIDTH: number = uiContext!.px2vp(6);
const COLOR_LINE: string = '#FF0A59F7';
const MAX_HEART_RATE: number = 200;
const WIDTH_CHANGE_POINT: number = uiContext!.px2vp(900);const X_COORDINATE_TEXT_HEIGHT: number = uiContext!.px2vp(30);
const START_X: number = uiContext!.px2vp(40);
const PADDING_VERTICAL: number = uiContext!.px2vp(40);
const PADDING_HORIZONTAL: number = uiContext!.px2vp(40);// 在常量定义部分增加字体大小相关常量
const COORDINATE_FONT_SIZE: number = uiContext!.px2vp(18); // 坐标轴字体大小
const DATA_LABEL_FONT_SIZE: number = uiContext!.px2vp(16); // 数据标签字体大小
const TITLE_FONT_SIZE: number = uiContext!.px2vp(15);     // 标题字体大小@Component
export default struct HeartRateGraph {@StorageProp('heartRate') @Watch('onHeartRate') heartRate: number = 0;@Prop @Watch('onViewSizeChange') viewWidth: number;@Prop @Watch('onViewSizeChange') viewHeight: number;@State heartRateArr: Array<number> = [];@State timeArr: Array<string> = [];private settings: RenderingContextSettings = new RenderingContextSettings(true);private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);private mCoordinateLineEndX: number = 0;private mOffset: number = 0;private mHeightRatio: number = 0;private mHeartRateCoordinateArr: Array<number> = [];aboutToAppear(): void {this.calculateLayoutConfig();for (let i = 0; i < SIZE; i++) {this.heartRateArr[i] = 0;}for (let i = 0; i < SIZE; i++) {this.timeArr[i] = `--:--:--`;}}onHeartRate() {this.heartRateArr.push(this.heartRate);if (this.heartRateArr.length > SIZE) {this.heartRateArr.shift();}this.timeArr.push(DateUtils.format(new Date(), 'HH:mm:ss'));if (this.timeArr.length > SIZE) {this.timeArr.shift();}this.draw();}onViewSizeChange() {this.calculateLayoutConfig();}calculateLayoutConfig() {this.mCoordinateLineEndX = this.viewWidth - PADDING_HORIZONTAL;this.mOffset = (this.viewWidth - START_X - PADDING_HORIZONTAL * 2) / (SIZE - 1);this.mHeightRatio = (this.viewHeight - PADDING_VERTICAL * 2 - X_COORDINATE_TEXT_HEIGHT * 2) / MAX_HEART_RATE;let heartRateCoordinate: number = MAX_HEART_RATE / (COORDINATE_SIZE - 1);this.mHeartRateCoordinateArr =[0, heartRateCoordinate, heartRateCoordinate * 2, heartRateCoordinate * 3, heartRateCoordinate * 4];}draw() {this.context.clearRect(0, 0, this.viewWidth, this.viewHeight);this.drawCoordinate();this.drawHeartRateLine();}drawCoordinate() {// 修改坐标轴文字大小和样式this.context.font = `${COORDINATE_FONT_SIZE}px sans-serif`;this.context.fillStyle = '#333333'; // 使用更深的颜色提高可读性// 修改数据标签文字大小this.context.font = `${DATA_LABEL_FONT_SIZE}px sans-serif`;this.context.fillStyle = '#000000'; // 黑色提高对比度this.context.lineWidth = LINE_WIDTH / 3;this.context.font = '16px sans-serif';let path: Path2D = new Path2D();this.context.fillStyle = '#999999';for (let i = 0; i < COORDINATE_SIZE; i++) {let text = `${this.mHeartRateCoordinateArr[i]}bpm`;let offsetY = (this.viewHeight - PADDING_VERTICAL * 2 - X_COORDINATE_TEXT_HEIGHT * 2) / (COORDINATE_SIZE - 1);let x = 0;let y = this.viewHeight - PADDING_VERTICAL - X_COORDINATE_TEXT_HEIGHT * 2 - offsetY * i +this.context.measureText(text)?.height / 4;path.moveTo(x, y);this.context.fillText(text, x, y);this.context.stroke(path);}this.context.strokeStyle = '#1A000000';for (let i = 0; i < COORDINATE_SIZE; i++) {let offsetY = (this.viewHeight - PADDING_VERTICAL * 2 - X_COORDINATE_TEXT_HEIGHT * 2) / (COORDINATE_SIZE - 1);let x = START_X + PADDING_HORIZONTAL;let y = this.viewHeight - PADDING_VERTICAL - X_COORDINATE_TEXT_HEIGHT * 2 - offsetY * i;let path1: Path2D = new Path2D();path1.moveTo(x, y);path1.lineTo(this.mCoordinateLineEndX, y);this.context.stroke(path1);}this.context.fillStyle = '#999999';let path2: Path2D = new Path2D();for (let i = 0; i < SIZE; i++) {if (this.viewWidth <= WIDTH_CHANGE_POINT && i % 2 === 0) {continue;}let text = this.timeArr[i];let x = START_X + this.mOffset * i + PADDING_HORIZONTAL - this.context.measureText(text)?.width / 2;let y = this.viewHeight - PADDING_VERTICAL - X_COORDINATE_TEXT_HEIGHT;path2.moveTo(x, y);this.context.fillText(text, x, y);this.context.stroke(path2);}this.context.fillStyle = '#333333';let path3: Path2D = new Path2D();for (let i = 0; i < SIZE; i++) {if (this.viewWidth <= WIDTH_CHANGE_POINT && i % 2 === 0) {continue;}let text = `${this.heartRateArr[i]}bpm`;let x = START_X + this.mOffset * i + PADDING_HORIZONTAL - this.context.measureText(text)?.width / 2;let y = this.viewHeight - PADDING_VERTICAL;path2.moveTo(x, y);this.context.fillText(text, x, y);this.context.stroke(path3);}}drawHeartRateLine() {this.context.lineWidth = LINE_WIDTH;this.context.strokeStyle = COLOR_LINE;let path: Path2D = new Path2D();for (let i = 0; i < SIZE; i++) {let x = START_X + this.mOffset * i + PADDING_HORIZONTAL;let y =this.viewHeight - PADDING_VERTICAL - X_COORDINATE_TEXT_HEIGHT * 2 - this.heartRateArr[i] * this.mHeightRatio;if (i === 0) {path.moveTo(x, this.viewHeight - PADDING_VERTICAL - X_COORDINATE_TEXT_HEIGHT * 2);path.lineTo(x, y);} else {path.lineTo(x, y);}if (i === SIZE - 1) {path.lineTo(x, this.viewHeight - PADDING_VERTICAL - X_COORDINATE_TEXT_HEIGHT * 2);}}let gradient = this.context.createLinearGradient(0, PADDING_VERTICAL, 0,this.viewHeight - PADDING_VERTICAL - X_COORDINATE_TEXT_HEIGHT * 2);gradient.addColorStop(0.0, '#660A59F7');gradient.addColorStop(1.0, '#660A59F7');this.context.fillStyle = gradient;this.context.fill(path);this.context.stroke(path);this.context.clearRect(START_X + PADDING_HORIZONTAL - LINE_WIDTH / 2, 0, LINE_WIDTH,this.viewHeight - PADDING_VERTICAL - X_COORDINATE_TEXT_HEIGHT * 2 + LINE_WIDTH / 2);this.context.clearRect(this.viewWidth - PADDING_HORIZONTAL - LINE_WIDTH / 2, 0, LINE_WIDTH,this.viewHeight - PADDING_VERTICAL - X_COORDINATE_TEXT_HEIGHT * 2 + LINE_WIDTH / 2);}build() {Column() {// 添加图表标题Text('心率变化图').fontSize(TITLE_FONT_SIZE).fontWeight(FontWeight.Bold).fontColor('#333333').margin({ bottom: 10 });Canvas(this.context).width(this.viewWidth).height(this.viewHeight).onReady(() => {this.draw();})}}
}

2.4  DateUtils.ets时间格式化文件

以下为代码：


const MAX_LENGTH: number = 2;export default class DateUtils {public static format(date: Date, format: string = 'yyyy-MM-dd HH:mm:ss'): string {let year = date.getFullYear().toString();let month = (date.getMonth() + 1).toString().padStart(MAX_LENGTH, '0');let day = (date.getDate() + 1).toString().padStart(MAX_LENGTH, '0');let hour = (date.getHours() + 1).toString().padStart(MAX_LENGTH, '0');let minute = (date.getMinutes() + 1).toString().padStart(MAX_LENGTH, '0');let second = (date.getSeconds() + 1).toString().padStart(MAX_LENGTH, '0');let result = format.replace('yyyy', year);result = result.replace('MM', month);result = result.replace('dd', day);result = result.replace('HH', hour);result = result.replace('mm', minute);result = result.replace('ss', second);return result}
}

三、演示效果

四、项目源码下载网址：https://download.csdn.net/download/ajassi2000/91681323

http://www.lryc.cn/news/621996.html

相关文章：

  • 成品电池综合测试仪：一站式评估性能与安全
  • Flutter 以模块化方案 适配 HarmonyOS 的实现方法
  • 嵌入式学习日记（29）进程、线程
  • 一分钟了解EtherCAT 分支器
  • Web攻防-大模型应用LLM搭建接入第三方内容喂养AI插件安全WiKI库技术赋能
  • Linux操作系统从入门到实战（二十三）详细讲解进程虚拟地址空间
  • 【数据可视化-90】2023 年城镇居民人均收入可视化分析：Python + pyecharts打造炫酷暗黑主题大屏
  • Redis 知识点与应用场景
  • Web 开发 15
  • webrtc编译arm/arm64
  • C# 中的 string / StringBuilder / 值类型 / 引用类型 / CLR 总结
  • KNN算法：从电影分类到鸢尾花识别
  • 标准电子邮件地址格式（RFC 5322 里的 mailbox 语法）
  • 机器学习之PCA降维
  • 大模型系列——从训练到推理：网页数据在大语言模型中的新角色
  • Autosar之CanNm模块
  • ScanNet项目介绍
  • Rust 入门 泛型和特征-深入特征 (十五)
  • 从“写代码”到“定义需求”：AI编程工具如何重构软件开发的核心流程？
  • 【Mysql语句练习】
  • PCA降维全解析：从原理到实战
  • epoll发数据学习
  • Flink中的处理函数
  • 【完整源码+数据集+部署教程】小鼠行为识别系统源码和数据集：改进yolo11-RFAConv
  • JavaScript 原型机制详解：从概念到实战（附个人学习方法）
  • Flink中基于时间的合流--双流联结(join)
  • Java集合Map与Stream流：Map实现类特点、遍历方式、Stream流操作及Collections工具类方法
  • Transformer实战（11）——从零开始构建GPT模型
  • 【入门级-算法-6、排序算法：排序的基本概念冒泡排序】
  • 【100页PPT】数字化转型某著名企业集团信息化顶层规划方案（附下载方式）