当前位置:首页>鸿蒙APP>鸿蒙南向带屏应用换logo图片的过程记录

鸿蒙南向带屏应用换logo图片的过程记录

  • 2026-10-19 23:32:28
鸿蒙南向带屏应用换logo图片的过程记录
摘要:本文以通晓开发板为例,记录了替换Logo图片显示的过程,供鸿蒙南向初学者参考。
带屏的板子(本文仍然以通晓RK2206开发板为例,后续如不说明,本号的文章都以通晓开发板为例),界面会显示应用和设备的状态,公司名称和logo等信息,一般来说都要对板子默认的图片进行替换,尤其是需要对LOGO图进行替换,本文记录下替换LOGO图的过程,供各位聪明帅气的看官们参考。
第一步:准备图片:
南向和北向不同的地方在于,南向的图片在C语言的代码中的存在形式,是一个数组,相当于是对于要显示的图片的每个像素的颜色,用十六进制的数字进行了记录。然后再通过我们自己编写的驱动代码把每个数据点逐个“画”到屏幕上。
我们需要先把png/jpg/bmp等格式的图片,转换为C语言的数组。通晓开发板自带了转换工具,也可以从网上自行下载转换的资源。
先看下板子上老师们编写的例子,展示的界面如下图:
我们需要替换的就是xx教育这几个字,以及他的logo图。要替换图片,我们得知道图片所占据的像缩点,如自带的xx教育的图片,长宽分别是177*58,当然也需要知道整个屏幕的大小,才能更好的规划我们的界面元素的摆布,使之更美观,因本文仅作LOGO图的替换,暂不涉及整体排布。
我准备的图片如下,一个180*90的图:
打开转换工具,填写参数,如下图:
注意最大宽度和高度,要按照图片实际的宽和高填写。
其他参数根据实际需要填写,也可参考图上的,填好后点击保存,即可生成一个xx.c的文件,其中是一个C语言的数组。
第二部:修改图片文件(picture.c)
把生成的xxx.c文件中的数组,copy到代码中保存图片信息的文件中,如例子中所用的picture.c,该文件中有多个图片(如wifi状态显示的图标等)。我们找到Logo对应的数组,进行替换。由于数组都特别长,因此替换起来不是很方便,我在验证阶段,就直接多复制一份,然后把新复制进来的数组名称,修改为需要显示的:

img_logo

而把之前的修改个名称,如

img_logo111,

就可以进行调试,等调试完成后,再删除掉旧的即可。

第三步:修改显示图片的长宽值,由于我们的新图标是180*90,如果还是177*58,则显示会有失真,因此我们需要把显示的宽高也修改为180*90。
其中参数的含义分别是:

x: 图片显示的起始横坐标位置

y: 图片显示的起始纵坐标位置

length: 图片的长度(宽度方向的像素数)

width: 图片的宽度(高度方向的像素数)

pic: 指向图片数据数组的指针

我们修改为(0,180,90)

第四步:验证结果,见证奇迹的时刻到了:

编译并烧录镜像到通晓开发板,结果如下,

我们可以看到,图片上半部分已经正常显示,绿色的半圆也没有变形,但下半部分要显示的文字,却没有正常显示出来,反而是乱码,关于文字的显示,又是另外一种方法,后文将继续总结输出,欢迎关注~

最新文章

随机文章