# 组成结构

# 白板 Dom 节点结构图

通过实例化 WhiteBoard 后创建的 Dom 节点结构如下图：

# OutSideDiv 外层

实例化 WhiteBoard 并传入 width、height 参数后，会作用在 OutSideDiv，这是白板 SDK 中所创建的 Dom 节点的最外层。

// 创建一个占满容器的白板
const whiteBoard = new WhiteBoard('#wrap', {
  /** 宽度，选传，默认：100% */
  width: '100%',
  /** 高度，选传，默认：100% */
  height: '100%,
});

// 获取外层访问器
console.log(whiteBoard.$outSideDiv);

1
2
3
4
5
6
7
8
9
10

# ContentDiv 内容层

内容层负责控制白板的比例，是 OutSideDiv 的子元素，创建白板实例时，传入 contentProp 内容层比例，该配置接受一个 number 类型且大于 0 的值或 undefined，number 类型表示内容层的宽高比（w / h），当传入 undefined 时，内容层会占满外层，同时跟随外层的比例，当传入 1.77777（即16 / 9）时，内容层则固定为 16 : 9 的比例，同时容器尺寸改变时会自动调整。

// 创建一个宽高 500px，绘制区域为 16:9 的白板
const whiteBoard = new WhiteBoard('#wrap', {
  width: '500px',
  height: '500px',
  contentProp: 16 / 9,
});

// 获取内容层访问器
console.log(whiteBoard.$contentDiv);

1
2
3
4
5
6
7
8
9

# DocumentDiv 文档层

文档层负责存放 ppt 的 Dom 节点，是 ContentDiv 的子元素，宽高占满 ContentDiv，获取方式：whiteBoard.$documentDiv。

# CanvasDiv 画布层

画布层负责存放 HTMLCanvasElement 画布节点，是 ContentDiv 的子元素，宽高占满 ContentDiv，层级位于 DocumentDiv 上层，同时也是用于监听操作者的鼠标操作等行为，获取方式：whiteBoard.$canvasDiv。

# ComponentDiv 组件层

组件层负责存放白板的其他 Dom 节点，是 ContentDiv 的子元素，宽高占满 ContentDiv，层级位于 CanvasDiv 上层，当需要创建某些 Dom 节点到白板时，需要将这些 Dom 节点插入到 ComponentDiv 中，获取方式：whiteBoard.$componentDiv。

注意，组件层具有 css 的 pointer-events: none; 样式，默认会禁用掉所有的指针行为，如果插入的 Dom 节点需要指针行为需要在对应的节点中设置 pointer-events: auto;

# 层级关系

ComponentDiv > CanvasDiv > DocumentDiv

← 文件目录世界坐标系 →