TWaver3D 编辑器的使用(二)—— 定制模板module
在TWaver3D编辑器的设计中,借助于ModuleManager实现了模块(module)的动态加载,这样用户可以自定义扩展3D模板,用于增加可编辑对象,提高编辑器能力。那么如何来扩展这些模板呢,让我来带领大家认识一下Editor的动态module应用机制。
在TWaver3D产品包中,发布出两个模板模块,分别命名为room和equipment。
这两个模块分别完成房间模型,设备模型的模板置入,Editor加载了这两个模块之后,就会出现下面的模型分组,用户可以从分组中拖拽出自己期望的模型对象到编辑场景中去,实现3D场景的可视化编辑。
但是在实际应用的时候,用户需要用更多的模型模板来做场景编辑,例如新的设备,新的房型等,这时能不能由用户进行模型模板的扩展呢?
例如客户需要向设备上添加一个信号灯对象,那么如何把这种模型模板添加到TWaver的3D编辑器中?
首先,用户需要打开IDE环境,创建一个module文件。(以FlashBuilder为例)
我们将之命名为Signal.mxml,
然后,需要在开发工程中引入必要的开发包,TWaver提供3个必要的包,分别是TWaver.swc, TWaver3D.swc和 EditorLib.swc。
这样我们就可以按照Editor的动态模块机制来进行自己的扩展了。
下面我们就来开始自己扩展一个模块,用于向Editor中注入信号灯模型。
第一要求实现EditorLib中定义的一个接口IResources。向我们生成的Signal.mxml文件头中添加implements=”module.IResources”
1 |
<?xml version= "1.0" encoding= "utf-8" ?>
|
2 |
<mx:Module xmlns:fx= "http://ns.adobe.com/mxml/2009"
|
3 |
xmlns:mx= "library://ns.adobe.com/flex/mx" layout= "absolute" implements = "module.IResources" >
|
4 |
5 |
</mx:Module> |
IResources的定义如下
01 |
public interface IResources{
|
02 |
//初始化函数。模块被加载后,自己需要执行的初始化动作
|
03 |
function init(): void ;
|
04 |
//模块名
|
05 |
function getName():String;
|
06 |
07 |
function getInfo():String;
|
08 |
//模型需要的贴图集合,以key-value的映射方式进行存储
|
09 |
function getImages():Object;
|
10 |
//模块中包含的全部的模型对象的描述
|
11 |
function getItems():Array;
|
12 |
//。
|
13 |
function exportClasses():Array;
|
14 |
} |
然后我们来做实现代码
01 |
<?xml version= "1.0" encoding= "utf-8" ?>
|
02 |
<mx:Module xmlns:fx= "http://ns.adobe.com/mxml/2009"
|
03 |
xmlns:mx= "library://ns.adobe.com/flex/mx" layout= "absolute" width= "400" height= "300" implements = "module.IResources" >
|
04 |
<fx:Declarations>
|
05 |
<!-- Place non-visual elements (e.g., services, value objects) here -->
|
06 |
</fx:Declarations>
|
07 |
<fx:Script>
|
08 |
<![CDATA[
|
09 |
import extentdata.SignalData;
|
10 |
import extentdata.XYData;
|
11 |
12 |
import module.ResourcesConsts;
|
13 |
import module.ResourcesItem;
|
14 |
[Embed(source= "demo/images/signal.png" )]
|
15 |
public static const SignalIcon:Class;
|
16 |
public function init(): void
|
17 |
{
|
18 |
}
|
19 |
public function getName():String
|
20 |
{
|
21 |
return "信号灯资源包" ;
|
22 |
}
|
23 |
public function exportClasses():Array{
|
24 |
return [extentdata.SignalData];
|
25 |
}
|
26 |
public function getImages():Object
|
27 |
{
|
28 |
var classInfo:XML=describeType(Signal);
|
29 |
var imageMap:Object= new Object();
|
30 |
for each (var c:XML in classInfo..constant)
|
31 |
{
|
32 |
var name:String=c. @name ;
|
33 |
imageMap[name]=Signal[name];
|
34 |
}
|
35 |
return imageMap;
|
36 |
}
|
37 |
public function getXYItems():Array
|
38 |
{
|
39 |
var array:Array= new Array();
|
40 |
var item:ResourcesItem= new ResourcesItem();
|
41 |
//用于在Editor的属性表中绑定模型对象的属性,可以无限增加
|
42 |
item.addModelProperty( "width" , "直径" );
|
43 |
item.addModelProperty( "altitude" , "深度" );
|
44 |
//指明信号灯对象默认的大小
|
45 |
item.length= 15 ;
|
46 |
item.width= 15 ;
|
47 |
item.height= 15 ;
|
48 |
//填充的信号灯模型所属的分组名
|
49 |
item.category= "信号灯" ;
|
50 |
//在模型模板分组中用来表示信号灯的图片
|
51 |
item.icon= "SignalIcon" ;
|
52 |
//在模型模板分组中,信号灯对象的tooltip
|
53 |
item.tooltip= "信号灯" ;
|
54 |
item.name = item.tooltip;
|
55 |
//用来表示模型对象的数据类型
|
56 |
item.clazz = extentdata.SignalData;
|
57 |
//需要通过Editor进行配置的client property,可以无限增加
|
58 |
item.addClientProperty( "bid" , "BID" );
|
59 |
//声明模型对象在xy平面上进行操作
|
60 |
item.type=ResourcesConsts.TYPE_XY;
|
61 |
array.push(item);
|
62 |
return array;
|
63 |
}
|
64 |
public function getItems():Array
|
65 |
{
|
66 |
var array:Array= new Array();
|
67 |
array=array.concat(getXYItems());
|
68 |
return array;
|
69 |
}
|
70 |
]]>
|
71 |
</fx:Script>
|
72 |
</mx:Module> |
然后我们就可以在IDE下编译我们写的这个新module了,打包称为Signal.swf。接着把这个swf文件放在Editor.swf的同目录下,就可以直接加载了。
加载成功之后,就会在模型模板库中看到新添加的信号灯对象。
这时我们就可以直接在编辑器中使用信号灯,向原有模型中添加了信号灯对象了。
让我们来看看添加信号等前后的不同
–>
添加完信号灯,就可以将图纸保存出来。在监控系统中,加载这个图纸,通过程序可以找到信号灯对象,然后根据采集到的数据,动态修改信号灯的颜色,就可以实现实时显示监控信息了。
注:本文中用到的相关扩展文件可以在TWaver 3D产品下载包中获取,另外例子的完整代码可以从这里下载。
扩展module代码
转载于:https://my.oschina.net/monolog/blog/404777