fltk介绍.doc

FLTK介绍
1.1FLTK简介
FLTK，如同其名字所表达的：The Fast Light Tool Kit发音为"fulltick"，FLTK是一种使用C++开发的GUI工具包，它可以应用于Unix,Linux,MS-Windows95/98/NT/2000 和MacOS操作系统平台，相对于其它的许多图形接口开发工具包（如MFC、GTK、QT等），一个轻量级的GUI开发库。但这轻量级并不代表功能的羸弱，相反，FLTK在具有基本的GUI功能之外，还拥有一些特殊的功能，比如跨平台、内置OpenGL功能、速度更快、尺寸更小、协议宽松等。它兼容xforms图形库（unix/linux下的一个C语言图形库)，所以可以用来开发模块化的程序，同时也可以使用面向对象开发程序，使用起来非常方便。另外，由于fltk使用cmake，所以可以方便的使用cmake生成makefile，然后再进行编译，使得编译库也非常方便。它具有体积很小、速度比较快，且有着更好的移植性。当然，缺点也是有的，比如对于复杂的界面构件支持不够，资源支持的不足等。
FLTK产生于NeXT环境，发展于X-window环境，所以对图形加速的支持必然是选择OpenGL。FLTK使用Fl_Gl_Window这个类将OpenGL的基本功能囊括其中，只要在Fl_Gl_Window的draw()里glbegin/glend即可，基本的设置工作FLTK全都做好了FLTK基于LGPL，对使用者的要求非常宽松，所以开发者不需要担心其项目的隐形问题。
FLTK功能简介
(1)提供丰富的跨平台的GUI构件(Widget)。有按钮，菜单，窗口等，近六十个。
(2)支持OpenGL，提供Fl_GL_Window ，支持OpenGL相关的操作。
(3)提供界面设计工具FLUID ，非常方便进行界面的设计。
(4)良好的跨平台移植性。
(5)支持多种C++编译器，Gcc，BC，VC等等。
(6)灵活性。FLTK本身可以定制，以满足不同的需要。这使得 FLTK 在嵌入式开发上有着极大的竞争力。
GUI构件
FLTK的底层只提供一套完整的画点、画线功能，另外附带了字体的显示功能，但FLTK对字体的支持还很粗糙，尤其对于非英文字符集而言。在基本的点、线功能基础上，FLTK完全自己实现了一套界面，比如Button、Label、Edit、Tab等，全部都是由基本的点线画出。底层之上是一套以Fl_开头的类，代表了各种GUI构件，比如Window、Button、Input等，使用起来很是容易。所有的界面构件都是画出来的，这些界面类的共同特点是轻量型、都拥有一个draw()，只要在draw()里 实现自己的绘画动作即可。
事件模型
对于FLTK而言，使用的是最直接的方法：while(1){}。每个界面类都有一个handleint event)，只要继承这个成员函数，就可以在其中处理自己的事务，由于这样的事件方式，造成FLTK的刷新速度很快，事件反应迅速。FLTK的事件采用了最原始的函数指针方式。
跨平台
可以在UNIX/Linux(X11)，Microsoft Windows和MacOS X平台运行。
OPENGL集成
FLTK产生于NeXT环境，发展于X-window环境，所以对图形加速的支持必然是选择OpenGL。FLTK 使用GlWindow这个类将OpenGL的基本功能囊括其中，只要在GlWindow的draw()里glbegin/glend即可。
FLTK的使用
（1）VC中使用FLTK
在Vc中无法直接使用FLTK，需要下载FLTK的源文件编译之后再进行一些简单的设置，设置步骤如下：
1. 打开Project->Settings->Link,添加以下库文件:
wsock32.lib opengl32.lib glu32.lib fltk.lib fltkgl.lib [fltk.lib fltkgl.lib 需要自己编译FLTK源文件生成,直接打开源文件下的visualc目录下的工程文件就可以编译]
2.在Project->Settings->Link的PROJECT OPTIONS中 添加 /nodefaultlib:"LIBCD"，如果你要生成release版本的那么是/nodefaultlib:"LIBC"
3.在Tools->Options->Directories, 选择 include files添加路径如
C:\Program Files\fltk [对照自己的修改]
4.在Tools->Options->Directories,选择library files设定为如下所示
C:\Program Files\fltk\lib [对照自己的修改]
5.Project->Settings->C/C++中的category选择C++ Language
6.在Project->Settings->C/C++,的PROJECT OPTIONS添加:
/I"c:\program files\fltk" [对照修改]，此处不修改也可以编译
（2）在KDevelop中使用FLTK
作为跨平台的一种轻量级的GUI Tools，在Linux下得到更为广泛的使用，所以我们使用Linux下的最常用的Kdevelop也能很方便使用它。下面简述需要注意的配置步骤：
1.我们建立C++工程后，需要修改的配置都在菜单[项目]-->[选项]'[连接器选项]中修改
2.在[库]中选定 X11和Xext，根据自己的需要还需要选定 math等库
3.在[附加库]那里输入 -L/usr/X11R6/lib -lfltk
4.如果开发OpenGL应用需要 在附加库中输入 -lfltk_gl -lglut 指定连接库。
提示：因为我使用的Linux为RedHat 8,为选择中文环境，所以配置说明也是中文，英文版本可能有所不同，对照修改即可。
1.2 搭建FLTK开发环境
安装FLTK很简单，我们只需要下载它的源文件，解压缩到目录下，在Linux下我们只需要输入make，编译完成然后make install就头文件安装到/usr/include/FL目录下。库文件就在/usr/lib下，也可以自己编译之后把这些文件复制到这些目录，或者不需要复制，只在编译连接的时候指定路径。在window下可以使用VC，BC打开相应目录下的工程文件编译即可。
1.21 windows下搭建FLTK开发环境
第一步:下载FLTK 源码包
FLTK官网:http://www.fltk.org/
下载后解压缩到C盘根目录下,命名为FLTK
进到C:\FLTK\ide\visualc目录下,找到fltk.dsw
用Visual C++6.0打开项目，然后选择【组建】>全部重建，就开始编译了。
编译完成后关闭Visual C++6.0
第二步:添加FTLK 库文件
(1)重新打开Visual C++6.0,新建一个Win32 Application项目,命名为FLTK，然后再新建一个hello.cxx文件
(2)建立好之后选择工程】->【设置】-->选择“连接”选项卡-->“分类”下拉框选择输入，
在对象/库模块添加：
fltkd.lib fltkgld.lib comctl32.lib wsock32.lib opengl32.lib glu32.lib
还要在忽略库中添加：LIBCD libcd.lib
(3)之后选择"C/C++"选项卡,"分类”下拉框选择：code generation,在"use run-time library"
中选择"Multi-threaded DLL"最后确定。
(4)选择【工具】>【选项】>“目录”选项卡
在“目录”下拉框中选择"Include Files"后新增一项C:\FLTK(导入头文件)
(5)在“目录”下拉框中选择"Library Files"后新增一项C:\FLTK(导入类库)
(6)编译运行hello.cxx
1.22ubuntu下搭建FLTK开发环境
第一步：配置基础开发环境GCC
xhy@xhy-desktop:~$sudo apt-get install build-essential
第二步：安装QT开发环境
xhy@xhy-desktop:~$sudo apt-get install qt4-dev-tools qt4-doc qt4-qtconfig qt4-demos
qt4-designer
第三步：下载FLTK 源码包
FLTK官网:http://www.fltk.org/
下载后解压缩：
xhy@xhy-desktop:~$sudo tar zxvf FLTK.tar.gz
第四步：编译安装FLTK
xhy@xhy-desktop:~$cd FLTK
xhy@xhy-desktop:~$make
xhy@xhy-desktop:~$sudo make install
第五步：测试环境
写一个简单的FLTK程序
#include
#include
#include
int mainint argc, char **argv)
{
Fl_Window *window = new Fl_Window(300,180);
Fl_Box *box = new Fl_Box(20,40,260,100,"Hello, World!");
box->box(FL_UP_BOX);
box->labelsize(36);
box->labelfont(FL_BOLD+FL_ITALIC);
box->labeltype(F L_SHADOW_LABEL);
window->end();
window->show(argc, argv);
return Fl::run();
}
包含了需要的头文件后，该程序创建了一个窗口
Fl_Window *window = new Fl_Window(300,180);
还创建了一个box类，标签是“Hello World!”
Fl_Box *box = new Fl_Box(20,40,260,100,"Hello,World!");
下一步，我们设置了box的类型，大小，字体和标签的类型
box->box(FL_UP_BOX);
box->labelsize(36);
1.3FLTK构件简介
FLTK作为GUI开发包，包含了常用的图形用户接口需要的一些构件视觉表现非常丰富，如下两图所示：

常用按钮构件
按钮名称
头文件
按钮名称
头文件
Fl_Button
Fl_Button.H
Fl_Check_Button
Fl_Check_Button.H
Fl_Light_Button
Fl_Light_Button.H
Fl_Repeat_Button
Fl_Repeat_Button.H
Fl_Return_Button
Fl_Return_Button.H
Fl_Round_Button
Fl_Round_Button.H
对于具有Fl_Check_Button、Fl_Loght_Button和Fl_Round_Button当状态为off时value()=0，on时value()返回1。
处理按钮时间可以使用回调(callback)函数,参见后面的事件处理。
文本处理构件
构件名称
头文件
构件名称
头文件
Fl_Input
Fl_Input.H
Fl_Output
Fl_Output.H
Fl_Multiline_Input
Fl_Multiline_Input.H
Fl_Multiline_output
Fl_Multiline_output.H
设置和取得文本内容使用value();
如：
(new Fl_Input(x,y,width,height,"Label"))->value("Hello World!");
其他构件参见FLTK.org的文档说明。
写一个简单的FLTK程序
#include
#include
#include
int main(int argc, char **argv)
{
Fl_Window *window = new Fl_Window(300,180);
Fl_Box *box = new Fl_Box(20,40,260,100,"Hello, World!");
box->box(FLUP_BOX);
box->labelsize(36);
box->labelfont(FL_BOLD+FL_ITALIC);
box->labeltype(FL_SHADOW_LABEL);
window->end();
window->show(argc, argv);
return Fl::run();
}
包含了需要的头文件后，该程序创建了一个窗口
Fl_Window *window = new Fl_Window(300,180);
还创建了一个box类，标签是“Hello World!”
Fl_Box *box = new Fl_Box(20,40,260,100,"Hello,World!");
下一步，我们设置了box的类型，大小，字体和标签的类型
box->box(FL_UP_BOX);
box->labelsize(36);
box->labelfont(FL_BOLD+FL_ITALIC);
box->labeltype(FL_SHADOW_LABEL);
最后，我们显示该窗口并进入FLTK事件循环
window->end();
window->show(argc, argv);
return Fl::run();
运行该程序得到的界面如下，你能直接关闭该窗口退出，也可以按ESC键退出

1.4 FLTK事件处理
对于一般构件的如按钮，菜单等常用事件的处理一般可以使用回调函数实现，回调函数的原型是：
void XXX_callback( Fl_Widget *w,void *data)
{
//添加自己处理的内容
}
使用F1_Widget->callback(XXX_callback, data)注册回调函数
/***************************************************************
按钮事件例子
***************************************************/
#include
#include
#include
#include
void Btn01_cb(Fl_Widget *w, void *data)
{
((Fl_Button *)w)->label((char *)data);
fl_alert("Hello");
}
int main(int argc, char **argv)
{
char *buff ="Hello";
Fl_Window* w = new Fl_Window(272,144);
Fl_Button* Btn01 = new Fl_Button(85,50,105,25,"&Test callback");
Btn01->shortcut(FL_ALT+'t'); //定义按钮的快捷键
Btn01->callback((Fl_Callback*)Btn01_cb,buff); //调用处理函数buff作为参数
w->end();
w->show(argc, argv);
return Fl::run();
}
编译运行程序，鼠标点击按钮，按钮标签会发生改变，并且会弹出提示框。
通常的callback是当构件的value改变时调用，可以使用when()改变为其他事件发生调用回调函数，主要事件有以下事件
事件
说明
FL_WHEN_NERVER
从不调用回调函数
FL_WHEN_CHANGED
当构件值改变时调用
FL_WHEN_RELEASE
当释放按键或者鼠标并且构件值改变
FL_WHEN_RELEASE_ALWAYS
当释放按键或者鼠标，即使构件值没有改变
FL_WHEN_ENTER_KEY
按下Enter键并且构件值改变
FL_WHEN_ENTER_KEY_ALWAYS
按下Enter键，即使构件值没有改变
通过使用F1_Widget->when(FL_WHEN_XXXX)来改变回调事件。
#include
#include
#include
#include
void Btn01_cb(Fl_Widget *w, void *data)
{
fl_alert("Hello");
}
int main(int argc, char **argv)
{
char *buff = "Hello";
Fl_Window* w = new Fl_Window(272,144);
Fl_Button* Btn01 = new Fl_Button(85,50,105,25,"&Test callback");
Btn01->shortcut(FL_ALT+'t');
Btn01->callback((Fl_Callback*) Btn01_cb, buff);
Btn01->when(FL_WHEN_RELEASE_ALWAYS);
w->end();
w->show(argc, argv);
return Fl::run();
}
编译运行程序，在按钮上按下鼠标左键，移动到按钮外，松开鼠标按键，仍然会弹出对话框。
1.5 FLTK消息处理
在FLTK 中是通过Fl_Widegt::handle(),虚拟函数来处理系统的消息。我们可以查看Fltk的源代码来分析系统是怎样处理一些系统消息的，如按钮的消息处理
/*******************************************************
Fl_Button中处理消息的代码，省略了具体的处理代码
*******************************************************/
int Fl_Button::handle(int event) {
switch (event)
{
case FL_ENTER:
case FL_LEAVE: return 1;
case FL_PUSH: ……
case FL_DRAG: ……
case FL_RELEASE: ……
case FL_SHORTCUT: ……
case FL_FOCUS : ……
case FL_UNFOCUS : ……
case FL_KEYBOARD : ……
default:return 0;
}
}
可以看出了，系统的一些消息，都是在构件的handle()中进行处理的。
系统的主要消息有以下
鼠标事件消息
焦点事件消息
FL_PUSH
FL_ENTER
FL_DRAG
FL_LEAVE
FL_RELEASE
FL_FOCUS
FL_MOVE
FL_UNFOCUS
键盘事件消息
剪贴板事件消息
FL_KEYBOARD
FL_PASTE
FL_SHORTCUT
FL_SELECTIONCLEAR

构件事件消息
FL_DEACTIVATE
FL_ACTIVE
FL_HIDE
FL_SHOW
通过重载handle函数我们可扩充标准构件，下面是一个鼠标移动到上面就改变颜色的按钮的实现源代码。
#include
#include
#include
#include
class EnterButton : public Fl_Button
{
int handle(int e)
{
Switch (e)
{
case FL_ENTER:
color(FL_GREEN);
labelsize(18);
redraw();
return 1;
case FL_LEAVE:
color(FL_GRAY);
labelsize(18);
redraw();
return 1;
default: return Fl_Button::handle(e);
}
}
public:
EnterButton(int x, int y, int w, int h, const char *l):Fl_Button(x,y,w,h,l){}
};
static void cb(Fl_Widget* s, void *data)
{
fl_alert("Hello World!");
}
int main(int argc, char **argv)
{
Fl_Window* w = new Fl_Window(130, 50);
EnterButton *eBtn = new EnterButton(25,50,120,25,"HelloWorld");
eBtn->callback((Fl_Callback*)cb);
w->end();
w->show(argc, argv);
return Fl::run();
}
运行显示效果如图:

Linux下演示[截屏时鼠标没有取到]

1.6 OpenGL编程
在FLTK中很容易使用OpenGL进行图形编程的，我们只需要使用它的Fl_Gl_Window构件，重新定义一个派生于Fl_Gl_Window的类，重载draw()和handle()就可以。所需要的代码和步骤如下：
1.包含以下头文件
#include
#include
#include
2.定义一个子类，如下代码所示
class MYGLWindow : public Fl_Gl_Window
{
void draw(); //作图操作
void handle( int ); //消息事件处理
public:
MYGLWindow(int x,int y,int w,int h,const char *L) : Fl_Gl_Window(x,y,w,h,L){};
};
3.实现draw()事件
void MYGLWindow::draw() //作图
{
if(!valid())
{
//设置viewport窗口大小等等，例如：
/**********************************************
valid(1);
glLoadIdentity();
glViewport(0,0,w(),h());
***********************************************/
}
//添加使用OPENGL作图操作
};
4.事件处理实现
void MYGLWindow::handle( int event) // 事件处理
{
switch (event)
{
case FL_PUSH : //操作等
return 1;
case ……
}
}
注意：
1.编译时需要包含openGL32的库文件，名字在不同的平台名字稍微不同。
2.使用代替h>头文件，不要使用后者的头文件。
例子程序比较长，附在参考中。运行显示，弹出菜单后如图所示：

FLTK常用的控件和属性
2.1按钮
FLTK提供了很多类型的按钮
Fl_Button 普通按钮
Fl_Check_Button 带有选择框的按钮
Fl_Light_Button 带有指示灯的按钮
Fl_Repeat_Button
Fl_Return_Button 能被Enter激活的按钮
Fl_Round_Button 带有圆形选择框的按钮
每一个按钮都需要相应的头文件。
构造函数包含了控件的位置，大小和可选的标签
Fl_Button *button = new Fl_Button(x, y, width, height, "label");
Fl_Light_Button *lbutton = new Fl_Light_Button(x, y, width, height);
Fl_Round_Button *rbutton = new Fl_Round_Button(x, y, width, height, "label");
每一个按钮可以设置自己的类型用type(),通过这个设置，可以让一个按钮为
push button, toggle button, or radio button:
button->type(FL_NORMAL_BUTTON);lbutton->type(FL_TOGGLE_BUTTON);rbutton->type(FL_RADIO_BUTTON);对于toggle和radio按钮，value()函数返回当前的状态，开/关（0代表关，1代表开），set()和clear()分别用来设置和清除togglebutton的状态。Radio Button可以用setonly()打开，同组中的其他Radio button按钮将关闭。
2.2 文本
FLTK提供了几种文本控件来显示和接收文本信息
Fl_Input 输入单行的文本
Fl_Output 输出单行的文本
Fl_Multiline_Input 多行文本输入框
Fl_Multiline_Output 多行文本输出框
Fl_Text_Display 显示多行文本控件
Fl_Text_Editor 多行文本编辑控件
Fl_Help_View 显示HTML 文本控件
Fl_Output and Fl_Multiline_Output控件允许互相copy，但是不能改变
Value( )函数用来设置和得到显示的字符串
Fl_Input *input = new Fl_Input(x, y, width, height, "label");
input->value("Now is the time for all good men...");
这个字符串将被拷贝到该控件的存储空间内，当用value()设置后
Fl_Text_Display and Fl_Text_Editor用Fl_Text_Buffer来设置他的值，而不是一个简单的字符串。
Valuators 用来显示数字轨迹信息
Fl_Counter 带有箭头按钮的控件显示当前值
Fl_Dial 圆形手柄
Fl_Roller
Fl_Scrollbar 滚动条控件
Fl_Slider 带有手柄的滑块
Fl_Value_Slider 显示当前值的滑块
Figure 3-2: FLTK valuator widgets
value()函数得到和设置控件的当前值，minimum()和maximum()设置了控件的范围。
群Groups
Fl_Group控件被用来做一般的容器控件。除了单选按钮群以外，还被用来形成windows,tabs,scrolled windows等控件。以下是FLTK提供的群类。
Fl_Double_Window 一个双缓冲的窗口
Fl_Gl_Window 一个OpenGL的窗口类
Fl_Group 容器类的基类。能被用来包含所有的控件
Fl_Pack 将控件收集到一个群区域中
Fl_Scroll 滚动窗口区域
Fl_Tabs
Fl_Tile
Fl_Window
设置控件的位置和大小
控件的位置和大小在你创建的时候就已经设置了，你可以通过x(),y(),w(),h(),来得到改变大小和位置用position(),resize(),size()函数。
button->position(x, y);
group->resize(x, y, width, height);
window->size(width, height);
2.3 颜色
FLTK用一个32位的无符号整形存储颜色。它可能是256种颜色一个索引，也可能是一个24位的RGB颜色。调色板不是X或WIN32的colormap,它是有对应固定内容的调色板，以下是一些常用的颜色的符号定义：
FL_BLACK
FL_RED
FL_GREEN
FL_YELLOW
FL_BLUE
FL_MAGENTA
FL_CYAN
FL_WHITE
这些符号是FLTK控件默认的颜色，详细情况请参考Enumerations
FL_FOREGROUND_COLOR
FL_BACKGROUND_COLOR
FL_INACTIVE_COLOR
FL_SELECTION_COLOR
RGB颜色可以用fl_rgb_color()函数设置。
Fl_Color c = fl_rgb_color(80,170,255);
控件的颜色用color() 函数设置
button->color(FL_RED);
类似的，标签的颜色用labelcolor()函数设置
button->labelcolor(FL_WHITE);
2.4 Box类型
Fl_Boxtype的类型在中定义，可以用Fl_Widget::box()设置和得到。FL_NO_BOX意思是任何东西都不要画，但仍然是留在窗口上。Fl_FRAME类型只是画边框，中间不做任何改变。如图中蓝色的部分。
制作你自己的Boxtypes
你可以自己制作个性风格的boxtype.通过一个小函数，并将其加到boxtypes的列表中画图函数画图函数传递的参数控件的是box 的边界和背景颜色
void xyz_draw(int x, int y, int w, int h, Fl_Color c)
{
}
如一个简单的画图函数填充一个矩形，给定颜色并画一个黑色的外框
void xyz_draw(int x, int y, int w, int h, Fl_Color c)
{
fl_color(c);
fl_rectf(x, y, w, h);
fl_color(FL_BLACK);
fl_rect(x, y, w, h);
}
加入自定义的box类型
Fl::set_boxtype函数添加或取代特定的box类型
#define XYZ_BOX FL_FREE_BOXTYPEFl::set_boxtype(XYZ_BOX,xyz_draw,1,1,2,2);
最后4个参数是偏移量，当画该box时，x,y,w,h会减去相应的偏移量。
FLTK的画图函数
3.1 何时可以画图
什么时候可以画图，只有在几个地方可以执行画图代码。在其他地方调用该函数会出现未定义该行为的错误：
1．最常出现的地方是在虚拟函数Fl_Widget::draw()中。你的类需要继承一个Fl_Widget类，然后在自己的类中写draw()函数。
2．在写boxtype和labeltype函数中用到。
3．你可以调用Fl_Window::make_current()来增加控件的更新。用Fl_Widget::window()找到要更新的窗口。
3.2 FLTK的画图函数
调用这些画图函数之前，要包含头文件aw.H>
FLTK提供以下画图函数：
Boxes
Clipping
Colors
Line dashes and thickness
Fase Shapes
Complex Shapes
Text
Images
Overlay
Boxes
FLTK提供了三个函数来画box，主要用于画按钮和其他的UI控件。每一个函数都提供了box的左上角，宽，高等参数。
void fl_draw_box(Fl_Boxtype b, int x, int y, int w, int h, Fl_Color c);
该函数画了一个标准的box,box类行为b,颜色是c
void flframe(const char *s, int x, int y, int w, int h);
该函数画了一个边框，s是4个字母，A代表黑色，X代表白色，顺序是上，左，下，右。
void fl_frame2(const char *s, int x, int y, int w, int h);
与fl_frame 不同时s 代表的颜色的顺序，分别是下，右，上，左。
3.3 剪切
你可以限制你的画图行为在一个矩形之内，应用fl_push_clip(x,y,w,h),释放用fl_pop_clip.
该矩形用象素未单位，不会受变换矩阵的影响。另外，系统会提供更新窗口的剪切域，但是比一个简单的矩形要复杂的多。
void fl_clip(int x, int y, int w, int h)
void fl_push_clip(int x, int y, int w, int h)
用一个矩形剪切一个区域，并把这个区域压入堆栈。Fl_clip()不提倡，并将在以后的版本中去除该函数
void fl_push_no_clip()
压入一个空的剪切域到堆栈
void fl_pop_clip()
恢复剪切域，画图范围不再受矩形限制，fl_push_clip()一定要调用该函数。
int fl_clip_box(int x, int y, int w, int h,