|
【开源】在迪文屏上定制一个柱状图控件
首先说一下，为啥要定制一个柱状图控件呢？这是因为DGUS Tool中没有这样的现成控件，然后大家肯定会有这样的需求。因此我定制了一个柱状图控件，并开源给大家！ 注意:此实现原理不是采用简单的切图方式，切图方式是有局限性的，而且又麻烦。 视频演示效果：https://www.bilibili.com/video/BV18M4y1u7V1?share_source=copy_web
一、前言 1.本实验平台为迪文的EK043开发板，当然了，只需要稍微修改一下GUI工程中的背景图片尺寸，也可以用于其他的T5L迪文屏。 2.本项目是基于T5L迪文屏，采用C51开发方式。 3.定制的柱状图控件源代码被封装成了column_chart.c和column_chart.h文件，放在了FUNC_HANDLER文件夹下面，如果你没有定制的需求，请不要改动column_chart.c和.h文件中的任何代码，直接使用即可。 4.此柱状图的实现原理是通过一个基础图形控件来实现的，而非多个，支持的柱状图列数不受限制，每一列的颜色可单独设定。 5.柱状图控件代码已经高度封装，目的是为了尽量简化使用难度。 6.以后若还有空闲时间和机会，凡是我开源的迪文项目，都会以教程的方式开源给大家，宗旨是让大家可以在其中能够学到一个或者多个实用功能，而不是把代码写得过于复杂庞大，导致大家花费大量的时间去研究。
二、如何快速上手使用 2.1 GUI工程 就只有一个界面,如下图所示： 此界面上有1个基础图形控件和5个按钮,作用分别如下： - 基础图形控件：用来显示柱状图的
- 动画：点击时可让柱状图产生一个动画效果
- 样式：给柱状图换样式,有直线和抛物线俩种样式,点击可来回切换
- 颜色：点击之后,可以不断得更换柱状图中每一列的颜色
- 减号：让柱状图中每一列的高度都降低1个像素
- 加号：让柱状图中每一列的高度都增加1个像素
2.2 C51代码 1. 首先定义一个柱状图控件对象，如下代码所示： - <font size="3" face="宋体">COLUMN_CHART chart; //定义一个柱状图控件</font>
2. 然后写一个函数来初始化柱状图控件的参数，如下代码所示： - void column_chart_init()
- {
- u8 i;
-
- chart.vp = START_WIN_CHART_VP;//基础图形控件的VP地址
- chart.start_x = 70;//柱状图中第一列的左下角x坐标
- chart.start_y = 204;//柱状图中第一列的左下角y坐标
- chart.x_offset = 42;//柱状图中每一列之间的x轴间隔
- chart.column_width = 26;//柱状图中每一列的宽度
- chart.column_num = 9;//共9列,即一,二,三,....,九
- for(i=0;i<chart.column_num;i++)//模拟柱状图的数据
- {
- chart.columns.height = i*60+10;//每一列的高度
- chart.columns.color = 0xF800+i*200;//每一列的颜色
- }
- column_chart_draw(&chart);//开始绘制到迪文屏幕上
- }
只要在main函数中调用column_chart_init此函数，即可以在迪文屏上看到一个多彩的柱状图。 更多的细节请看附件中的源代码。
备注说明：如需源码，请参考此链接：http://inforum.dwin.com.cn:20080/forum.php?mod=viewthread&tid=4103&_dsign=6bf57c69
| 
|Archiver|手机版|小黑屋|迪文科技论坛
( 京ICP备05033781号-1 )
发表于 2024-1-9 15:56:47
发表于 2025-12-7 19:14:58