界面设计技巧 4 – 改进界面实现方法

    到目前为止,棋盘棋子的界面已经基本成型。下面我们实现一小部分代码,来看看这个界面设计方案是否可行,是否可以改进。
    以棋盘的初始化为例,在游戏开始时,只有两黑两白四颗子,摆在期盼最中间。实现这个操作的代码和执行结果如下图所示:

  

    代码中的子VI(Get All Chess.vi)中的代码,就是我们在第一节图8中看到的那段代码。它负责得到所有棋子的引用,并排列成二维数组。

    这段初始化的代码并不算复杂,但是我们还是可以从中看出一些问题:棋子的布局需要用两个数组才可表达清楚,这给编程增加了负担。造成这一状况的根本原因在于:每个位置上的棋子实际上有三个状态:黑、白、无;而我们选用的灯泡控件,只有两个值:真、假。用这两个值不足以完全表达棋子的状态,所以,要两个布尔类型才能确定一个棋子的状态。
    另外,棋盘只是一张背景图片,这样,判断鼠标在棋盘哪个位置上进行的点击,也比较繁琐。一旦棋盘挪动,代码也需要做相应改动。
    改进的方法,就是使用一个有更多值的控件来表示棋子。在我们的程序中,要求每个棋子位置有多个不同图片,这正好可以使用 Pict Ring  控件。Pict Ring 控件包含三个值:空白图片、黑色棋子图片、白色棋子图片。这样即便是没有棋子的位置,Pict Ring 控件还在,可以感知用户的鼠标点击事件。

    上面的代码还有一处不足,每个棋子都是一个独立的控件,造成界面控件太多,不好管理。对于更复杂的程序,比如围棋游戏,如果使用这种方式,界面上就有将近400个控件,这是不可接受的。
    改进的方法是使用数组控件,把所有的棋子组成一个数组。

    具体的实现步骤如下:
    首先创建一个经典风格的 Pict Ring 控件,添加三幅图片:空白、黑棋子和白棋子。棋子采用的都是png文件格式的图片,以实现透明和阴影效果。

在程序中,我们不希望看见 Pict Ring 控件的边框和背景。我们可以用透明画笔,把边框和背景画为透明。

    造一个二维数组用来放置棋子元素。由于界面上不希望看到这个数组的边框和背景,所以同样用透明画笔把它们画为透明。数组的标签、索引显示可以通过数组的右键菜单->显示一项进行隐藏。
    把棋子元素放置于数组中,并把数组拉成8×8大小,放置在棋盘上放。一个棋盘棋子控件就做好了。而这种做法又大大简化了编码的复杂度,比如同样是初始化设置,只要一个赋值语句就可完成:

《我和 LabVIEW》目录

Advertisements

6 thoughts on “界面设计技巧 4 – 改进界面实现方法

  1. Pict Ring 只能改变边框的大小,里面的图片是不会跟着调整的。所以一开始就要设计成适合的大小。

  2. LED灯做的棋子能用属性节点缩放,Pict Ring 控件是怎么缩放的?俺导入PNG图片后,只能固定大小,控件框缩小后棋子就看不全了。

  3. 再次表示感谢!没看你相片前,觉得能写出这样的东西的人,应该在40左右或许更年长,看了以后有些吃惊!确实了不起,向你学习!

  4. 不知道是版本的问题还是我自己没有把握要领,我用的是8.6的,不知道能否说得更详细一些!谢谢!

  5. 你的这本书,我看了很长时间,也了解到了不少东西,当然很多东西还需要更深的理解和实践,在这里谢谢你!关于上面用pict ring做chess这里,我试着做了一下,不知是我自己没有领会到,还是怎么回事,在隐藏三个图片的时候,却发现最终有一张的底边框怎么也隐藏不了,

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s