KingSCADA实现按钮点击效果

哈喽,你好啊,我是雷工!

在做SCADA项目的时候,按钮是不可缺少的功能,但软件自带的按钮太丑,已经无法满足现如今客户对界面美观度的要求。
这时候就需要UI小姐姐设计美观大气的SCADA界面,但UI设计的按钮切图放到程序中只是图片素材,当添加了按钮功能时,虽然能实现按钮功能,但没有任何点击效果;
当遇到有需要连锁条件才能点击的按钮时,操作员无法区分是有连锁点击了没反应,还是系统界面卡死了导致的没点击成功,这时候有点击效果就能很好的区分这种问题。
本篇介绍一种实现按钮点击效果的方法,以下为操作过程。

一、效果演示:

1、当无点击效果时:
样例功能点击按钮时弹出对应弹窗,点击时无任何效果

在这里插入图片描述

2、当有点击效果时:
当点击按钮时,按钮有个缩小的点击效果。

在这里插入图片描述

二、实现步骤:

1、在KingSCADA的画面编辑器界面添加图像控件;

在这里插入图片描述

2、将UI设计好的按钮素材导入资源管理,并添加到界面。

在这里插入图片描述

3、将按钮素材拷贝成两个,设置成一大一小中心对齐:

在这里插入图片描述

4、将按钮图片的【MemberAccess】属性设置为【true】,需要在脚本内对该对象进行操作时需设置成true;

在这里插入图片描述

5、编辑按钮按下弹起脚本:

左键按下脚本:

Image185.Visible=false;
Image186.Visible=true;

左键弹起脚本:

Image185.Visible=true;
Image186.Visible=false;

6、编辑完效果脚本在接着编辑功能脚本

在这里插入图片描述

7、然后具有点击效果的按钮功能就做好了,特别简单。

三、后记

其实实现思路很简单,就是在点击时有个缩小的变化,实现该变化通过两个图片叠加,控制两个图片的显隐实现缩小放大的点击效果。
同样的思路还可以实现点击时颜色变化效果,点击时跑马灯效果,点击时波纹效果等等。
当然SCADA更讲究的是美观大气实用,太花里胡哨的效果也用不上。
这虽然是一个小功能介绍,但一个项目整体的好坏,除了漂亮美观,还要考虑到操作工实用性,细节决定品质。

廊坊·高楼
2023-12-24

相关推荐

  1. 【CSS节流】实现防止按钮重复

    2024-02-12 04:38:01       66 阅读
  2. 如何实现vue按钮进行图片浏览 ?

    2024-02-12 04:38:01       123 阅读
  3. 实用Python定时Chrome网页按钮

    2024-02-12 04:38:01       55 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-12 04:38:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-12 04:38:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-02-12 04:38:01       82 阅读
  4. Python语言-面向对象

    2024-02-12 04:38:01       91 阅读

热门阅读

  1. 1103: 地盘划分(New Online Judge)

    2024-02-12 04:38:01       46 阅读
  2. kubeadm部署k8s集群

    2024-02-12 04:38:01       52 阅读
  3. Codeforces Round 924 (Div. 2)

    2024-02-12 04:38:01       54 阅读
  4. linux赋予普通用户权限

    2024-02-12 04:38:01       55 阅读
  5. Linux 禁用/启用 交换分区

    2024-02-12 04:38:01       60 阅读
  6. vue3-应用规模化-单文件组件

    2024-02-12 04:38:01       50 阅读
  7. Dockerfile命令

    2024-02-12 04:38:01       50 阅读
  8. 解锁 SpringBoot 强大配置功能

    2024-02-12 04:38:01       45 阅读
  9. vector基本用法(可变长数组)

    2024-02-12 04:38:01       43 阅读
  10. Docker-CE 国内源国内镜像

    2024-02-12 04:38:01       61 阅读
  11. Debezium发布历史121

    2024-02-12 04:38:01       55 阅读