Magic3D(MyGUI)简单使用

Magic3D的界面是基于MyGUI制作的，MyGUI的界面布局详细信息位于.layout文件中，.xml文件中是界面图标的详细信息。

1.添加按钮

添加按钮属于界面设计，应在.layout文件中添加相关信息，各个界面的.layout文件在Media文件夹下的子文件夹中。以点云界面布局(PointShopApp.layout)为例进行说明。添加按钮的方式有两种，一种是直接在相应的.layout文件中添加，另一种是通过 UI编辑器LayoutEditor添加。

1）直接在文件中添加

打开相应的.layout文件，在其中加入以下代码：

<Widget type="Button" skin="Button" position="15 405 60 60" align="Left Top" name="But_Clear"/>

type是加入的控件类型，Button是按钮控件类型，也有其他如ProgressBar进度条控件类型等；skin是对应控件上的皮肤，即图标名称，“Button”是MyGUI默认的按钮皮肤类型，也可定义自己的图标；position是添加控件的所在位置，前两个数字(15, 405)为控件在画布(界面)上的位置坐标，后两个数字(60, 60)为控件的大小；align为对齐方式，一般按钮的对齐方式均为Left Top；name为控件的名称。

注意：值得注意的是，在自定义图标时，skin，也就是图标名称，须在Magic.xml文件(皮肤信息文件)中声明，并和控件一一对应。

2)通过UI编辑器添加

上述界面为UI编辑器(LayoutEditor)的界面，通过file->load导入想要修改的界面，如下图所示。

上图就是导入PointShopApp.layout布局的界面，创建按钮大体需经过以下步骤：

在右侧Widgets选项卡中选择想要添加的控件类型；
然后在左侧的画布中选择位置画出控件即可；
perties选项卡可以设置相关属性，如名称，位置、大小等。

这种方式添加按钮比较方便快捷，不必准确计算按钮的位置坐标，方法一则需要计算出控件的位置坐标。添加完控件之后，在相应的.layout文件中会自动生成相应的代码。

2.为按钮添加图标

1）直接在文件中添加

皮肤信息的文件在Media/MyGUIResource/MagicSkin.xml文件中，在文件中添加如下格式的信息：

<Resource type="ResourceSkin" name="But_Home" size="86 86" texture="MagicSkin.png"><BasisSkin type="SubSkin" offset="0 0 86 86" align="Stretch"><State name="disabled" offset="86 1 86 86"/><State name="normal" offset="86 88 86 86"/><State name="highlighted" offset="86 175 86 86"/><State name="pushed" offset="86 262 86 86"/></BasisSkin>
</Resource>

有以下注意点：

需要将所添加的图片放置在Magic.xml所在同一路径下，texture即为所要添加的图片；
或者将图片放在Magic.xml所在同一路径的文件夹（文件夹名字须为英文）中，在texture后表明图标所在位置，如"texture = “”./Image/MagicSkin.png"；
name为皮肤名称，在界面创建按钮时，自定义的图标会对应到这里。

按钮的皮肤属性，一般需要激活以上四个属性，分别为disable、normal、highlighted、pushed。在Magic3D中，是将所有图标集成在一张大图片上，通过索引每个小图标的在大图片上的位置坐标来添加图标。offset代表小图标在大图片上的偏移量，前两个元素是小图标的位置坐标，后两个数字是小图标的尺寸大小；normal，代表按钮在正常情况下显示的图标；highlighted，代表鼠标放置在该按钮上显示的图标；pushed，代表按钮被按下时显示的图标；disabled，尚未理解该属性的含义。以上四种属性对应的图标呈渐变趋势，以此呈现出一种按钮被按下、聚焦的动态变化。

但在我们的项目中，可以不需要激活以上全部属性，激活normal和highlighted属性即可，如下：

<Resource type="ResourceSkin" name="But_FeatureAlignment" size="86 86" texture="feature.png"><BasisSkin type="SubSkin" offset="0 0 86 86" align="Stretch"><State name="normal" offset="0 0 86 86"/><State name="highlighted" offset="0 1 86 86"/></BasisSkin>
</Resource>

因为我们添加的图标是单张图标，不是集成大图片，所以偏移量为0，highlighted可以偏移1-2个单位，鼠标聚焦在按钮位置时，可以呈现出动态变化。

2）使用皮肤编辑器添加

以上为皮肤编辑器(SkinEditor)的界面，需要做以下配置：File->Settings->Folders->Add，将图片所在路径添加进来，保存，退出，再次打开皮肤编辑器，导入Magic.xml文件，在右侧Texture栏即可找到自己要添加的图片。

点击Create即可创建，Rename给皮肤命名，Texture为图标；States栏即可激活上述的相应属性，在Position可指定偏移量；Separators和Regions可不用配置。

hots\屏幕截图(6).png" alt=“屏幕截图(6)” style=“zoom:80%;” />

3.按钮链接到功能函数

通过以上过程可以在界面中创建按钮和相应的图标，接下来就是将按钮和对应的功能函数链接起来。

在Magic3D中，类名称后缀带有UI的是界面类，界面的呈现会在这个类里实现，不带UI的类是功能的具体实现。如PointShopAppUI类是将点云处理的界面呈现出来，而PointShopApp类是点云处理功能的具体实现。ModelManager类是模型管理类，包括点云、网格的导入与获取，在各个类中，处理的点云网格都是基于这个类里的点云网格。

1.资源文件的加载

我们在上边已经在.layout和.xml文件中分别添加了按钮和图标，接下来我们需要将这些资源加载进来并呈现，这些都在PointShopAppUI.cpp中的Setup()函数中：

MagicCore::ResourceManager::LoadResource("../../Media/PointShopApp", "FileSystem", "PointShopApp");
mRoot = MyGUI::LayoutManager::getInstance().loadLayout("PointShopApp.layout");

通过以上代码将所需资源加载进来。接下来就要将按钮和功能函数链接起来：

mRoot.at(0)->findWidget("But_FeatureAlign")->castType<MyGUI::Button>()->eventMouseButtonClick += MyGUI::newDelegate(this, &PointShopAppUI::PointCloudFeatureAlignment);

其中，

findWidget(“But_FeatureAlign”)，找到对应名称的Widget(小部件)；
castType MyGUI::Button()，指定Widget为按钮类型，eventMouseButtonClick为鼠标按钮单击(鼠标按下和抬起)事件；
MyGUI::newDelegate(this, &PointShopAppUI::PointCloudFeatureAlignment)，指定了链接到的对应的功能函数。PointCloudFeatureAlignment函数参数的定义有固定格式，这种格式取决于eventMouseButtonClick事件，可通过查看eventMouseButtonClick的定义来确定，这种事件对应的功能函数定义格式为
```
void PointShopAppUI::PointCloudFeatureAlignment(MyGUI::Widget* pSender)
```

2.功能函数的实现

然后在PointCloudFeatureAlignment函数中写出功能实现，如下：

void PointShopAppUI::PointCloudFeatureAlignment(MyGUI::Widget* pSender)
{PointShopApp* pointShop = dynamic_cast<PointShopApp*>(AppManager::Get()->GetApp("PointShopApp"));if (pointShop != NULL){pointShop->PointCloudFeatureAlignment(true);}
}

因为在Maic3D中，点云处理功能的具体实现是在PointShopApp.cpp中实现的，所以通过指针对象pointShop调用具体实现，分在PointShopApp.h和PointShopApp.cpp文件中定义功能函数的具体实现。

PointShopApp.cpp的具体实现如下：

void PointShopApp::PointCloudFeatureAlignment(bool isSubThread)
{if (!IsCommandAvaliable()){return;}if (isSubThread){mCommandType = ALIGNMENT;DoCommand(true);}else{/* 这里为功能函数的据题实现*/ModelManager::Get()->SetPointCloudInfo(NULL);ResetSelection();//可有可无，不影响最后效果的呈现mUpdatePointCloudRendering = true;//标志位为true就可实现渲染mpUI->SetPointCloudInfo(ModelManager::Get()->GetPointCloud()->GetPointCount());}}

这段函数可将具体实现加入子线程，是通过DoCommand(true)函数将实现推入子线程；mUpdatePointCloudRendering = true，此语句实现了点云的渲染，加在函数最后即可；mpUI->SetPointCloudInfo(ModelManager::Get()->GetPointCloud()->GetPointCount())，指明了点云具体个数。

BGL文档，常用点云网格函数[1]http://geometryhub.net/bgl/document