PDF《问： 如何使 TouchPAD 显示图片背景为透明的？》

Copyright @

2015 ICP DAS Co.

, LTD. All Rights Reserved. -

1 - 分类/Classification ? tDS ? tGW ? PETL/tET/tPET ? DS/PDS/PPDS ? tM-752N ? I/O Card ? VXC Card ? VxComm ? Other (TouchPAD) 作者/Author Tammy 日期/Date 2015-08-31 编号/NO. FAQ022 问: 如何使 TouchPAD 显示图片背景为透明的? 答: 详细说明如下: 1.图片中的透明效果的实现,在TouchPAD 上是以不描绘指定的颜色,来显现透明的效果. 步骤 1: 在 "工具箱" 区,点选 "Picture" 项目并在控制画面设计区拉出一个适当大小的图框. 步骤 2: 在 "属性检视区", 点选 "Picture" 设定字段中的 " " 按钮来开启 "选择图片" 配置对话框. ? ? Copyright @

2015 ICP DAS Co., LTD. All Rights Reserved. -

2 - 步骤 3: 在 "选择图片" 配置对话框中,按 "加载…" 按钮来选取加载的图片,再勾选 "Mask Color" 后,选择白色.如下图箭号图片所示,白色是该图片的底色,当它被 Mask (屏蔽) 掉后,其白色区域 即变为透明.注意:只有 .bmp 档案才有支持透明,其它格式会因为图文件译码后的颜色值异动,而 造成无法正确的呈现透明效果. 步骤 4: 如下图所示,先把 Frame 的背景颜色设为紫色以方便观察.左方是没有 Mask 掉白色的;

右 方是 Mask 掉的.右方的实现了透明的效果. 透明 不透明 Copyright @

2015 ICP DAS Co., LTD. All Rights Reserved. -

3 - 步骤 5: 为了使透明效果更好,图片在汇入 HMIWorks 之前先使用任何图片编辑器处理一下,如下: 如下图:ICP DAS 的Logo. Mask Color 设为白色后如下.可以明显地看到虽有透明的效果,但效果并不好.在图形周围因为颜色 转换的缘故,会渐渐地从白色变成 Logo 的颜色,故周围虽然看起来像白色,但其实不是,故呈现非 平滑的情形. 先用任何图片编辑程序,将图形周围改为绿色 (这里以绿色做为 Mask Color 为例),则可以得到相当 程度的改善. Copyright @

2015 ICP DAS Co., LTD. All Rights Reserved. -

4 - 2. 透明图片加入图库(Libraries)的限制. 将Picture 组件的图片加入 "图库" 时,若要设定的 Mask Color 发生作用,必需限制只能一次一个 Picture 组件来加入图库.如下列,在一个 Picture 组件上用鼠标右键唤起的 popup menu,选取 "Add to library" 功能来加入图库. Copyright @

2015 ICP DAS Co., LTD. All Rights Reserved. -

5 - 若有超过一个 Picture 组件, 群组 (Group) 后再加入图库, 会使得透明显示不正常. (即使在 HMIWorks 中看起来是正常的,下载后也不会正常.) 如若以上例中的两个 Logo 为例: 原始的两张图. 各自设定 Mask Color,群组然后 加入图库. 下载到 TouchPAD 之后,可以看 见群组的图片加入图库后,会 造成透明显示不正常. Copyright @

2015 ICP DAS Co., LTD. All Rights Reserved. -

6 - 3. ObjectList (对象列表) 与透明 (Transparency) 在ObjectList 置入透明图片之后, 会因为为了实现透明的效果, 使得 ObjectList 在编译时多加入一张该 widget 的背景图.故会多耗费一张图片大小的内存空间.