工程技术笔记-如何在串口屏上实现艺术字文本显示V1.0

dcolour2013

Technical     Note

file:///C:/Users/DC/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif

修订历史

版本	日期	原因
V1.0	2016/01/06	创建文档

销售与服务

广州大彩光电科技有限公司    电 话：020-82186683-601       传 真：020-22059566          Email：hmi@gz-dc.com（公共服务） 网  站：www.gz-dc.com    地 址：广州天河区车陂大岗路14号业顺大厦401-410、507室    官网零售淘宝店：https://gz-dc.taobao.com

目
录

1.适用范围... 1

2. 开发环境版本... 2

3. 功能概述... 3

4. 技术实现... 4

4.1
准备好艺术字体... 4

4.2
生产艺术字图标ICON.. 4

4.3
软件界面设置艺术字... 6

1. 适用范围

文档适合经济型、基本型、物联型、86盒系列等串口屏产品。

2. 开发环境版本1.
VisualTFT软件版本：V3.0.0.636 及以上；

版本查看：打开VisualTFT，点击帮助->关于VisualTFT可以查看当前软件版本号；

最新版本可登陆www.gz-dc.com进行下载

file:///C:/Users/DC/AppData/Local/Temp/msohtmlclip1/01/clip_image003.jpg

2. 串口屏硬件版本：V2.22.649.XXX及以上。

版本查看：(1) 查看屏幕背面版本号贴纸。

(2) VisualTFT与屏幕联机成功后，右下角显示的版本号。

3. 功能概述

在一些特殊场合，串口屏和电脑自带的字体（宋体、雅黑、黑体等）无法满足用户需求，为了使美工图片和字体更加协调一致，用户可以使用美工图片来制作一个个字符，例如数码管字体、带背景图字体、发光字体等等。

该功能主要使用串口屏内部的组态控件：图标控件。用户预先做好所有艺术字图片后，然后通过图标生成工具，将所有的艺术字合成一个ICON文件，然后文本控件调用这个ICON文件，实现艺术字显示效果。

例如：用户单片发送数字123，串口屏内部解析后，就自动调用123对应的艺术字图片，操作简单方便。

4. 技术实现4.1
准备好艺术字体

美工人员预先设计好对应的0-9、a-z、A-Z和标点符号等图片，图片像素大小按照屏幕实际显示所需设计，如下图 4.1所示，所有图片像素为11*20。

file:///C:/Users/DC/AppData/Local/Temp/msohtmlclip1/01/clip_image005.jpg

图 4.1
艺术字图片

若界面UI中，同一类的艺术字需要用到不同大小显示，则美工设计时按照最大字号

进行图片大小设计。软件自带的图标生成器支持图片的大小缩放。

4.2
生产艺术字图标ICON

1.
打开图标生成器。打开VisualTFT软件，点击工具，选择“图标生成”，如图 4.2所示。

file:///C:/Users/DC/AppData/Local/Temp/msohtmlclip1/01/clip_image007.jpg

图 4.2
打开图标生成器

2.
添加艺术字图片。点击“增加帧”，将预先准备好的艺术字图片全部导入进去，如图 4.3所示。

file:///C:/Users/DC/AppData/Local/Temp/msohtmlclip1/01/clip_image009.jpg

图 4.3
添加艺术字图片

3.
生成艺术字ICON图标。用户导入进去的艺术字图片宽和高均为原始大小显示，用户也可以进行宽度和高度的微调，如图 4.4所示。注意：低分辨的图片调至高分率会导致图片模糊。图片排列的顺序（从左到右，从上到下）为帧的次序，用户可以任意拖动进行位置调整，最后点击“生成图标”。新的艺术字图标文件如图 4.5所示。

用户也可以点击打开图标文件，检查生产的图标文件是否正确。

特别说明：

艺术字的排列顺序必须严格按照如下规约：【0-9】、【: . * - + ? /】、【A~Z】和【a~z】,否则会导致显示错误。

file:///C:/Users/DC/AppData/Local/Temp/msohtmlclip1/01/clip_image010.giffile:///C:/Users/DC/AppData/Local/Temp/msohtmlclip1/01/clip_image011.giffile:///C:/Users/DC/AppData/Local/Temp/msohtmlclip1/01/clip_image013.jpg

图 4.4
生成艺术字ICON图标

file:///C:/Users/DC/AppData/Local/Temp/msohtmlclip1/01/clip_image015.jpg

图 4.5
艺术字图标ICON文件

4.3
软件界面设置艺术字

1.
放置1个文本控件。任意新建一个工程，建立1个画面，导入背景图，然后放置一个文本控件，如图 4.6所示。

file:///C:/Users/DC/AppData/Local/Temp/msohtmlclip1/01/clip_image017.jpg

图 4.6
放置1个文本控件

2.
设置艺术字属性。文本控件高度设置为20，保持与原始图片高度一致(若文本控件高度超过图片本身大小，将会显示拉伸模糊)，文本初始化值15.5，选择艺术字，导入预先做好的艺术字ICON文件，居中对齐，如图 4.7所示。

file:///C:/Users/DC/AppData/Local/Temp/msohtmlclip1/01/clip_image019.jpg

图 4.7
设置艺术字

3.
编译并运行虚拟串口屏。编译无误后，运行虚拟串口屏查看结果，如图 4.8所示。

file:///C:/Users/DC/AppData/Local/Temp/msohtmlclip1/01/clip_image021.jpg

图 4.8
运行虚拟串口屏查看结果

4.
指令助手调试显示。打开指令助手，使用虚拟串口联机好虚拟串口屏（具体操作可以参考文档《指令助手与虚拟串口屏联机调试》），输入画面ID、文本ID和文本123，屏幕上自动调用123显示，如图 4.9所示。

file:///C:/Users/DC/AppData/Local/Temp/msohtmlclip1/01/clip_image023.jpg

图 4.9
指令助手调试显示

5.
所有操作完毕。

liuyimao485813

非常不错，谢谢分享。

xiaoyi19891213

xsvsdfdsfdsfdsfdsfsdf

行胜于言

ziji xie ana a a