由于之前对3维附属2维对象和3维附属DOM对象的设计不太满意,由其是面向单场景多视图的架构时,会导致构造2维渲染的逻辑特别复杂。因此,我们构造了TuoObject2D对像来实现tuo-scene系统的2维渲染。在整个系统中,TuoObject2D是与Object3D平等的存在,TuoObject2D对象也能够独立的加入到TuoScene场景中。即通过TuoScene.add和TuoScene.remove来添加和移除。
每一个TuoObject2D对象必须实现一个自己的create函数,此函数返回一个如下架构的对象:
{
twoObject: Object, //two.js对象
dom: Object, //dom元素
project2D: Object, //TuoFunctionNode对象
}
TuoFunctionNode对象的apply函数是非常重要的,在这个函数中必须做2个事情,第一更新相应towObject中的坐标数据;第二,更新dom的位置。
create函数接收1个参数:view。这个参数由当前场景拥有的各个视图来传递给它。
TuoScene对TuoObject2D对象的反应
TuoScene只需要在两个场合下对TuoObject2D对象作出反应即可:
- 调用TuoScene.add函数添加TuoObject2D对象时,TuoScene会把当前的TuoObject2D对象存如object2DSet中。并发布如下格式的消息
{
type: 'tuoObject2DAdded',
payload: {
object: TuoObject2D
}
} - 调用TuoScene.remove函数移除TuoObject2D对象时,TuoScene会把指定的TuoObject2D对象从object2DSet中移除。并对该对象调用TuoObject2D.dispose()函数。
TuoView对TuoObject2D对象的反应
TuoView需要在3个场合下对TuoObject2D对象作出反应
- TuoView被创建后第一次调用render函数做渲染时。此时TuoView需要检查相关TuoScene中的object2DSet是否为空,如果不为空,则需要对每一个TuoObject2D对象调用wrapCreate函数,获取create函数的返回值,并将返回值的数据,按对应关系,添加到自己的twoScene, controlDiv和project2DRoot中去。
- 当收到相对应的TuoScene发布的tuoObject2DAdded消息时,应该调用该消息中TuoObject2D的wrapCreate函数,获取create函数的返回值,并将返回值的数据,按对应关系,添加到自己的twoScene, controlDiv和project2DRoot中去。
- 在自己的每一次render函数渲染中,需要按以下顺序分别执行渲染运算:1. 先调用一遍所有project2DRoot的子元素的apply函数;2. 渲染twoScene;