广州大彩串口屏技术文档—圆形进度条的应用.pdfVIP

工程技术笔记—圆形进度条使用 1.1 概述 随着人们对人机交互体验越来越高，过去工程师认为比较复杂的环形 UI 界面，在串口 屏组态控件下都变得非常简单， 所有操作只需要一个指令即可完成显示。 常规的矩形进度条 已不能广泛适用于部分特殊应用场合，因此圆形进度条应运而生，为精美界面锦上添花。 1.2 操作 圆形进度条 利用的是 ICON 图标跟动画或者图标控件配合而成的一个进度条， 不是软件 界面上的直接进度条控件设置为圆形。 1.2.1 软件准备 需要使用最新版本软件，请上网下载。 1.2.2 素材准备 准备两张图片，用作进度条的前景图片，或者后景图片。 如图 1.1的是两张 PNG 圆环图片；一张前景图片一张背景图片，两张图片除了颜色不一 样外，其他都完全一样。 1.2.3 圆形图标生成 准备美工素材，生成一个 ICON 图标。 打开软件的工具，选择圆形图标生成，打开后软件界面如图 1.3所示。 点击生成图标，生成一个 ICON 文件。 选择进度条背景图片以及前景图片，设置过渡帧数、增长方向、起始角度、扫描度数以 及图标宽度。 工具参数说明： A. 图标宽度： ICON 图标的大小，建议以实际图片大小尺寸为准。 B. 过渡帧数： ICON 图标总共帧数，每一帧代表一个图片；每增加一帧，等于加了一张图片 到工程。 C. 增长方向：生成图标扫描方向，顺时针或者逆时针。 D. 起始角度： ICON 图标第一帧前景显示角度。 E. 扫描度数：可选择设置是否做成一个完整的圆。 F. 控件背景：可不设置，由界面上的背景来做背景。 G. 进度条背景：背景图片，必须跟前景图片大小位置完全一致，颜色可使用不同颜色，可 不设置。 H. 进度条前景：前景图片，图片必须跟前景图片大小位置完全一致。 I. 显示文字：生成的圆形进度条，带文字显示。 1.2.4 控件调试 在工程界面上放置一个图标控件，设置刚生成的 ICON 到控件上，如图 1.4所示 运行软件，进行模拟调试，具体控制指令参考软件指令助手，如图 1.5示。 注意：图标控件用法跟动画控件用法完全一样，也可以由动画控件控制。 效果图如图 1.6所示， 1为无文字圆环； 2为带文字圆环； 3为带文字带单位圆环。 1.2.5 其他形状应用 还有一些应用需要用到其他形状进度条，其操作方法跟圆形进度条用法一样，如椭圆、 矩形和其他多边形等。