2.1场景树(Scenegraph)概念解读

2月24日修改
本文讨论了VTable中场景树(Scenegraph)的相关知识,包括概念解读、与BaseTable类的关系、相关源码位置、数据结构内部概念等内容。关键要点包括:
1.
场景树概念:是将表格配置转化为渲染场景的载体,是层次化图形组织结构,更新时性能更高,节点构成动态表格系统,核心设计理念是高效组织和渲染复杂图形界面。
2.
BaseTable与Scenegraph关系:Scenegraph是BaseTable核心组件,前者控制表格交互和渲染,后者负责基本配置管理和整体逻辑,管理前者生命周期,二者相互依赖。
3.
相关源码位置:package/vtable/src/core/BaseTable.ts是场景树核心类定义文件;scenegraph/group-creater/progress/proxy.ts是VTable应对大数据量渲染挑战的核心性能优化模块。
4.
数据结构概念:场景树主要构成元素是组-列-单元格-图元;Stage是场景树顶层容器和渲染环境;group是场景树重要部分,管理不同内容;图元是基础渲染元素;ProgressProxy是VTable性能优化核心。
5.
设计理念:Scenegraph模块用场景树负责表格场景节点创建与更新,按特定组织顺序构建场景树结构。
SceneGraph概念的理解
在 VTable 中,配置管理者BaseTable,通过创建 Scenegraph 实例,将表格的配置转化为具体的渲染场景。
而Scenegraph(场景树) 正是这个转化的载体。场景树是一个比较抽象的概念,在我的理解里,场景树可以理解成一个层次化的图形组织结构、一个精密设计的蓝图、能够将抽象的配置转换为具体的可交互、可渲染的图表节点网络。正如它的名字,这种树结构,由于更新时不需要重新计算要绘制的图形,只需要对相应的场景树节点进行属性更新,会有更高的性能。
在场景树每个节点( Group 和各种图形元素如 Rect、Text、Icon)都是一个"图形单元",节点之间存在父子、层级关系,每个节点可以有自己的属性和行为。这些节点相互嵌套、关联,共同构成了一个完整的、可动态更新的表格系统,整个树的变化会即时反映在最终的渲染结果上,就像组织架构的调整会影响整体运作。
场景树的核心设计理念在于它提供了一种结构化、可管理、高效的方式来组织和渲染复杂的图形界面。
BaseTable类和Scenegraph 类的关系
可以观察到:在package/vtabvtable/src/core/BaseTable.ts中声明了 BaseTable 基类(VTable中具体表格类的父类),在 BaseTable 基类构造函数中有:
//省略其余代码
class BaseTable {
constructor() {
// 创建 Scenegraph 实例,并传入 BaseTable 实例
this.scenegraph = new Scenegraph(this);
}
release(){
// 图标注销时清理场景树
this.scenegraph = null;
}
}
BaseTable 实例(this)作为参数传递给 Scenegraph 构造函数,创建了 Scenegraph 实例。
而在package/vtabvtable/src/scenegraph/scenegraph.ts内,Scenegraph的构造函数也注册了