绘制基础表格

绘制基础表格

我们可以通过 Konva.js 实现一个基础表格

1. 基础参数配置

const rows = 20; // 表格行数
const cols = 10; // 表格列数
const cellHeight = 32; // 单元格高度（像素）
const cellWidth = 180; // 单元格宽度（像素）

我们暂定表格初始有 20 行、10 列，每列的宽度为 180px，每行高度为 32px。这些常量定义了表格的基本尺寸。完整的表格允许用户通过添加或拖拽等其他方式调整这些值。

2. Konva 初始化

const stage = new Konva.Stage({
  container: tableEleRef.current,
  width: cols * cellWidth, // 总宽度
  height: rows * cellHeight, // 总高度
});

Stage 是 Konva 的顶级容器，定义了 Canvas 的尺寸。总尺寸设置为所有单元格的总和。

3. 图层和单元格绘制

const layer = new Konva.Layer();

for (let x = 0; x < cols; x++) {
  for (let y = 0; y < rows; y++) {
    const cellRect = new Konva.Rect({
      x: x * cellWidth,
      y: y * cellHeight,
      width: cellWidth,
      height: cellHeight,
      stroke: "#ccc",
      strokeWidth: 1,
    });
    layer.add(cellRect);
  }
}

stage.add(layer);

我们创建一个图层（layer）作为表格的容器，通过双层循环遍历表格的行和列，使用 Konva.Rect 逐个绘制每个单元格。每个单元格的位置根据其行列索引精确计算，再通过设置边框样式来实现网格外观。最后将完成的图层添加到 Stage 中，即可在浏览器中呈现出一个完整的表格结构。

绘制过程如下:

flowchart TD
    A[开始循环] --> B[x = 0]
    B --> C{x < cols?}
    C -->|是| D[y = 0]
    C -->|否| E[结束循环]
    D --> F{y < rows?}
    F -->|是| G[创建单元格矩形]
    G --> H[添加到layer]
    H --> I[y++]
    I --> F
    F -->|否| J[x++]
    J --> C

总结

我们基于 Konva.js 实现了一个基础表格。但聪明的你会发现，当表格的行数、列数巨大时，此表格的渲染会卡顿严重。专栏中后续的章节我们会引入 虚拟表格 的概念并着手解决这个问题。