GuiLite开源GUI学习（三）：自带的例程

GuiLite项目地址

例程

基础示例

创建了一个display和surface，然后调用draw_pixel，其余基本是算法的编写，没有使用GuiLite.h的其它方法。

Hello3D

Hello3Ddonut

Hello3DWave

HelloCircle

HelloPendulum

钟摆（Pendulum）的效果，主要是画矩形和写字。

HelloParticle

粒子效果（particle），主要是字体和算法代码。

中级示例

button控件、字体、位图的使用。主要使用了

void c_theme::add_font/add_color/add_bitmap;
void c_theme::get_font/get_color/get_bitmap;
// 比如：
// 使用GuiLiteToolKit生成了一个名为_Microsoft_YaHei_UI_24.cpp的字体文件，其中有_Microsoft_YaHei_UI_24的字体变量，那么可以通过如下操作向主题中添加此字体：
c_theme::add_font(FONT_CUSTOM1, &_Microsoft_YaHei_UI_24);
// 需要使用时，再使用FONT_CUSTOM1取出：
c_word::draw_string(&surface, const char *s, c_theme::get_font(FONT_CUSTOM1),...);
// 位图也是一样的
c_theme::add_bitmap(BITMAP_CUSTOM1, &BITMAP_INFO);
c_bitmap::draw_bitmap(..., c_theme::get_bitmap(BITMAP_CUSTOM1), ...);

HelloNoTouch

button和label的创建，on_touch,on_clicked的构建

自定义了一个组件c_myUI，继承自c_wnd，然后重写on_init_children和on_paint：

class c_myUI : public c_wnd
{
	virtual void on_init_children()
	{
		//在connect中会被调用，此处为button组件设置click回调函数
        (get_wnd_ptr(ID_BUTTON1))->set_on_click((WND_CALLBACK)&c_myUI::on_clicked);
	}
	virtual void on_paint(void)
	{
		//show_window会调用此函数，根据实际情况编写
	}
	void on_clicked(int ctrl_id, int param) {
		static int sum1, sum2, sum3;
		c_button* button = (c_button*)get_wnd_ptr(ctrl_id);
		switch (ctrl_id)
		{
		case ID_BUTTON1:
			sprintf(str1, "%d", ++sum1);
			button->set_str(str1);
			break;
		}
		button->show_window();
	}
};
//外部接口，在单片机中的按键中进行调用，on_touch会调用on_clicked
extern "C" void sendTouch2HelloNoTouch(int x, int y, bool is_down)
{
	is_down ? s_myUI.on_touch(x, y, TOUCH_DOWN) : s_myUI.on_touch(x, y, TOUCH_UP);
}

定义如下实例：

static c_myUI s_myUI;	//继承自c_wnd，作为根结点
static c_label s_label1, s_label2, s_label3;	//3个label控件
static c_button s_button1, s_button2, s_button3;	//3个button控件
// s_myUI的子节点
static WND_TREE s_myUI_children[] =
{
	//p_wnd,	id,		 , string  ,x, y, w, h, p_wnd_tree_next
	// 这些不是父子关系，而是兄弟姐妹关系，关键看connect中的load_child_wnd函数
	{&s_label1, ID_LABEL1, "a: <<", 20, 20, 80, 40, NULL},
	{&s_label2, ID_LABEL2, "d: >>", 20, 100, 80, 40, NULL},
	{&s_label3, ID_LABEL3, "s: click", 20, 180, 80, 40, NULL},

	{&s_button1, ID_BUTTON1, "0", 130, 20, 80, 40, NULL},
	{&s_button2, ID_BUTTON2, "0", 130, 100, 80, 40, NULL},
	{&s_button3, ID_BUTTON3, "0", 130, 180, 80, 40, NULL},
    //为什么要有下面一行，原因在load_child_wnd(WND_TREE *p_child_tree)中
	{ NULL,0,0,0,0,0,0 }
};

逻辑代码：

// m_surface = s_surface，s_myUI是c_wnd控件，设置其所属的surface
s_myUI.set_surface(s_surface);

s_myUI.show_window();

connect中调用了重要的函数为：load_child_wnd(p_child_tree)和on_init_children()，load_child_wnd(p_child_tree)中会继续调其它兄弟结点（不是子节点）的connect函数。

HelloScroll/HelloSlide/HelloWave/HelloWigdets

HelloLayers

还是只创建了一个surface，只不过这个surface有两个layer，通过show_layer(..., z_order)显示某个layer。

但是效果出不来。

找到原因了，应该是堆不够，每个layer都拥有自己得fb。

又一个点：

// c_surface的构造函数
c_surface(width, height, color_bytes, max_zorder = Z_ORDER_LEVEL_0, c_rect overlpa_rect = c_rect()) : ..., m_is_active(false), ...
{
    (overlpa_rect == c_rect()) ? set_surface(max_zorder, c_rect(0, 0, width - 1, height - 1)) : set_surface(max_zorder, overlpa_rect);
}
// 注意到下面这句话，它的作用是什么呢？
overlpa_rect == c_rect();
// 这个刚开始没注意到，后来才发现是C++的一个语法，在c_rect中：
int operator==(const c_rect& rect) const
{
    return (m_left == rect.m_left) && (m_top == rect.m_top) && (m_right == rect.m_right) && (m_bottom == rect.m_bottom);
}
//所以作用是：判断传入的矩形overlpa_rect是否已经初始化，如果没有初始化，那么就用屏幕大小进行初始化，否则就用传进来的矩形进行赋值

HelloParticle

// 在线转换工具：http://www.mytju.com/classcode/tools/encode_utf8.asp
printf("祝GuiLite开发者：\n");
// \x：转义字符
// 一个汉字占3B、一个因为字母为1B，故5*3+7=22
// \xe7\xa5\x9d=祝、\x47=G、...
printf("\xe7\xa5\x9d\x47\x75\x69\x4c\x69\x74\x65\xe5\xbc\x80\xe5\x8f\x91\xe8\x80\x85\xef\xbc\x9a\n");

// 加载字体
c_theme::add_font(FONT_DEFAULT, &Microsoft_YaHei_28);
// GL_ARGB(0,0,0,0)是什么意思？，A代表Alpha，即透明度
c_word::draw_string(s_surface, Z_ORDER_LEVEL_0, "\xe7\xa5\x9d\x47\x75\x69\x4c\x69\x74\x65\xe5\xbc\x80\xe5\x8f\x91\xe8\x80\x85\xef\xbc\x9a", 10, 10, c_theme::get_font(FONT_DEFAULT), GL_RGB(255, 0, 0), GL_ARGB(0, 0, 0, 0));

HelloTimer

layers、Notouch、