如何用Delphi编写自己的可视化控件

2016-02-19 16:23 39 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - 编程语言 】

 可视化控件(Visual Component)实际上就是一个类(class),要编写一个类,可以直接在*.pas文件中编写。但是要编写控件,则必须使用包(package)。从File菜单中选择New,新建一个Package,这就是存放和安装控件用的包。然后单击Package窗口中的Add按钮,添加一个元件(Unit)。

  在弹出的对话框最上方选择New Component。因为一个控件的所有属性、方法、事件不可能都由自己编,所以就需要选择祖先类(或者叫做"父类"或"基类"),然后再在其上面添加自己的属性、方法、事件。在Ancestor type后的下拉框中选择所需的祖先类。由于编写可视化控件必须要画图,所以选择TGraphicControl作为祖先类。再在Class Name框中输入新控件(类)的名称,一般以"T"开头。Palette Page是用来选择新控件在Delphi的窗口中的控件页面名称,例如"Standard",这个可以自己取。在Unit File Name中添好新控件文件的路径及文件名,单击OK按钮。新的控件便加入了。现在可以为该控件编写代码了。

  下面以编写一个可以自定义图片的滚动条为例,说明编写可视化控件的方法。   按照上面的方法,选择TGraphicControl为祖先类,新控件的名称是TPigHorizontalScroller(小猪水平滚动条)。选择好文件路径和文件名后,单击OK按钮,开始编写代码。

  每一个控件,都会被创建(Create)和删除(Destroy),所以必须首先编写这两个过程。对于控件中的每一个过程,都必须在前面先定义,然后再在后面编写。定义的过程或属性有三种:一、在private后定义的是属于控件内部使用的,使用该控件的人无法看到;二、在protected后定义的一般是看不到的,只在别人使用该控件作为祖先类编写其它控件时才可见;三、在public后定义的只允许别人在程序中调用;四、在published后定义的可以在属性窗口(Object Inspector)中看到。由于创建和删除过程除了在编程过程中建立控件时自动执行外,还可能在程序运行过程中动态创建控件时被调用,所以把它定义在public后⑴。(该序号表示次步骤在所附源程序中的代码的位置,下同)现在也许还不知到应该在这两个过程中编写什么,如何去编。我们在下面将会讲到。
   
  我们首先为这个控件添加一些属性。我们定义一个Max属性用于设置或读取滚动条的最大值。因为在程序中一般不直接使用属性,所以要定义一个变量,和该属性对应起来,一边修改或读取其值。因为它只在控件内部使用,所以我们把它定义在private后⑵。(一般与属性相关联的变量都以"F"开头,例如FMax)定义好变量后,再定义属性。这个属性需要再Object Inspector窗口中可见,所以把它定义再published后⑶。定义的语法是:

  property 属性名:类型 read 读取该属性时对应的变量 write 写入该属性时对应的变量或过程

  其它的变量和属性也类似的定义(例如Min最小值、Value当前值等)。下面我们定义几个属性和变量,用于设置滚动条的图片(因为图片变量比较特殊,所以单独讲一下)。我们把LeftButtonUpPicture(向左按钮图片)、LeftButtonDownPicture(向左按钮按下图片)等定义为TBitmap类型(一定要定义相对应的变量)。

  大家一定注意到了,在所附的源程序中,定义这几个属性时,read后所指定的读取属性时对应的变量是F…,而write后指定的写入该属性时对应的不是一个变量,而是一个Set…之类的东西,这是一个自定义的过程。作为该功能的过程的定义为:

  procedure 过程名(Value: 被设置的属性的值的类型)

  因为执行写入该类属性的时候需要做其它的事情,所以不能光用一个变量来处理,应该用一个过程来处理。这中过程一般定义在protected后。在该类过程中,使用一个在⑷处这样一个语句来给TBitmap类型的变量来赋值,这是由于该类型的变量不能直接赋值而采用的。

  定义完这些TBitmap类型的变量的属性后,上面讲的create过程和destroy过程中就需要编写代码了。因为TBitmap也是一个类,所以在create过程中必须创建⑸,在destroy过程中必须释放掉(free)⑹。这里⑺所指的inherited语句是用于指明该过程是从祖先类类中继承来的。(这个一定不能掉)。

  因为我们编写的是可视化控件,所以必须在控件上画图。我们这个控件的祖先类TGraphicControl中封装有一个Canvas(画布)对象,我们可以直接使用它来画图。如果你对画布的使用还不太熟悉,最好去找一本书来看一看。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/bianchengyuyan/)

  下面要做的工作就是画图了。如何在控件上画图呢?祖先类TGraphicControl中有一个Paint事件,当控件需要重画时便会自动触发。我们现在要做的就是要为这个事件编写一段程序。首先在protected后定义一个Canvas对象。由于它是祖先类中已有的,所以不需要加任何说明⑻。我们将使用这个对象来画图。接着,就要定义一个Paint过程,编写绘制控件的代码。先在public后定义Paint过程。由于它是由祖先类触发的,而不是由用户调用的,所以后面必须加上override,否则,该控件将会由于Paint过程永远不会被调用而不成为可视化控件⑼。下面我们就来编写Paint过程的代码⑽。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/bianchengyuyan/)

  该文章所附的源程序的Paint过程中的T_Height等变量是用来保存滚动条中按钮、滑块等的大小的,这部分程序和普通的Application中的程序差别不大,大部分都是对画布进行操作,相信大家一看就明白。值得注意的是下面对FAutoSize变量的判断⑾,FAutoSize是和该控件的属性AutoSize相关联的布尔型变量,是用来设置这个控件的大小是否随图片的大小而变化的。注意,在控件的代码中,一般都不直接调用属性,而是使用与其相对应的的变量。

  程序编到这里,就算是终于给自己的新控件做了一个外型了,不过它还不能滚动。现在我们来编写鼠标事件,让我们能够操纵它。鼠标事件的过程的定义和Paint过程很相似,只是后面要加上参数说明⑿,鼠标事件分为MouseDown、MouseMove和MouseUp三个,在定义后面都要加上override。接下来在后面编写它的代码。注意:这里的鼠标事件是Mouse…,而不是通常的OnMouse…。可是在⒀处的定义是干什么用的呢?这里的事件定义,都是给用户使用的,也就是说,当使用该控件时,会在Object Inspector中的Event页面中显示出来。

  这些鼠标事件的代码也非常简单,判断鼠标的坐标,在画布上画出相应的图片等,并同时触发相应的事件。值得注意的是,在调用自定义事件时,都要先用⒁处的这样一个语句来判断用户是否已经为该事件编写代码。这一点非常重要,否则会调用出错。

  大家注意到了,刚才所调用的事件都是自定义的,定义的方法也很简单,和定义属性差不多,只是类型时TNotifyEvent罢了。   

  TNotifyEvent是默认事件,其定义为:

  TNotifyEvent = procedure(Sender: TObject)

  如果你要定义另外形式的事件,就必须这样:先在type后编写

  事件类型名称 = procedure(参?gt;:类型)

  例如:

  TCustomEvent = procedure(a: Integer; b:String);

  然后在public后定义:

   事件名称:事件类型名称

  例如:

  AnEvent: TCustomEvent;

  看完这些,这整个程序你应该理解了吧。如果编译或运行出错,注意检查以下几点:

  1、create和destroy过程中是否有inherited语句;
  2、TBitmap类型的变量create和free了没有;
  3、过程前有没有控件名,例如:TPigHorizontalScroller.MoseMove

  判断鼠标是否进入或离开控件的方法:

  定义如下的过程:

  procedure MouseEnter(var Msg: TMessage); message CM_MOUSEENTER;
  procedure MouseLeave(var Msg: TMessage); message CM_MOUSELEAVE;

  再在下面编写代码就行了。这个方法用于编写三态按钮很有用。

来源:https://www.tulaoshi.com/n/20160219/1611908.html

延伸阅读
虽然如今好的配色方案已经唾手可得,但想为数据可视化找到合适的配色方案,难度仍然不小。因信息图的独特属性,在保证色彩具有清晰辨识度的同时,还必须满足丰富而不凌乱的配色要求。不过即使你对色彩不敏感,用了今天这篇干货提到的3个技巧,也能轻松制作出好看的信息图。 在信息图方面,事情甚至更加棘手,因为我们要通过上千种各不相同的数...
可视化数据信息图是将一些复杂的数据以图形化形式展示出来,信息图的视觉呈现要求很高的,如果设计不好,还不如直接看Excel表格了。所以设计可视化信息图是非常考验设计师们的能力。 如果没有设计过信息图的同学,建议还是多看点别人的作品,今天设计达人网整理了31张来自Dribbble上的设计精美的可视化数据信息图,我想这些一定能给你带来创作...
本文主要就书法字体在设计中的得当应用与信息可视化研究这两个主题进行分享。 1.浅谈书法在视觉设计中的应用 毛笔书写汉字是一种个性、抽象的中国传统文化艺术。它通过简洁的线条,演绎出魅力无穷的视觉艺术形象,表现出丰富的内涵,极具表现力和感染力。汉字通过毛 笔的书写,不单是把字写出来,更重要的是将精神和意境传达出来,使文字具有...
人的思考过程,是一个奇妙的过程,思维在脑海里流窜,横冲直撞又反复纠缠,最后扭成一团麻。所以常常会有人抱怨,脑袋里很乱,想不出头绪。这是因为,大部分人的思考过程都是杂乱无序的,没有逻辑的,最后也没法形成有效的沉淀,更无法找到清晰的结论。那么本文要讲述的,就是怎样把思维进行可视化的规整,最终系统化的沉淀下来,找到其中有价...
本文作者Barnabas Nagy ,译者@C7210。Barnabas是一名拥有六年从业经验的UX设计师、信息架构师,其对用户体验设计的交付提出一点:你的合作伙伴未必会看懂你的交付。 为了让自己的设计能够让人更容易理解,交付一个优秀可视化的成果是一个不错的选择。 在实际的用户体验设计工作当中,作为设计师,我们的一些产出在信息呈现方式及沟通效果等...

经验教程

442

收藏

62
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部