Konva.js 多维表格系统：高性能实现指南

原创热心市民小岳 2025-11-05 08:30 重庆

点击关注公众号，技术干货及时达！

Konva.js 多维表格系统基于「Konva.js」实现的高性能「多维表格系统」，支持大规模渲染、分组管理、筛选与排序等复杂功能，旨在构建类似腾讯文档 / 飞书多维表格的交互体验。

目录一、项目概述

二、功能清单

三、核心架构设计

四、模块说明

五、关键机制

六、实现过程

七、性能优化

八、扩展

九、结语

一、项目概述本项目使用「Konva.js」实现一个高性能的二维/多维表格系统，支持：

大规模表格渲染（行列可达数百万级）

按分组管理的数据展示

多维度筛选与排序

支持图片、文本、状态标签等多类型单元格

响应式布局与虚拟滚动优化

该系统适用于「任务管理」「资源调度」「项目需求规划」等复杂表格场景。

二、功能清单

功能模块

描述

表格渲染

基于 Konva Layer + Group 分层渲染，实现单元格、边框、背景高效绘制

分组管理

支持按分类分组显示，组可展开/折叠

筛选功能

支持多列字段条件过滤（文本、数值、状态）

排序功能

支持单列与多列排序逻辑

单元格类型

文本、图片、状态标签、自定义渲染器

交互操作

选中、框选、多选、悬浮提示、滚动同步

虚拟滚动优化

仅渲染视口内元素，提升渲染性能

动态布局

自适应行高、列宽及容器尺寸变化

批量更新机制

使用 requestAnimationFrame 实现批量绘制，避免重复渲染

三、核心架构设计

## 🎯 主控制器
- **table**
  - 图层系统
    - `backgroundLayer` - 背景层
    - `bodyLayer` - 主体层  
    - `featureLayer` - 特性层
  - 分组系统
    - `topLeft Group` - 左上冻结区域
    - `topRight Group` - 右上冻结区域
    - `bottomLeft Group` - 左下冻结区域
    - `bottomRight Group` - 右下冻结区域
  - 数据管理
    - **LinearRowsManager**
      - `linearRows: ILinearRow[]` - 线性行数据
      - `buildLinearRows()` - 构建行数据
      - `toggleGroup()` - 切换分组状态
  - 布局系统
    - **CellLayout** (抽象基类)
      - `GroupTabLayout` - 分组行布局
      - `RecordRowLayout` - 数据行布局
      - `AddRowLayout` - 添加行布局
      - `BlankRowLayout` - 空白行布局
      - `headerLayout` - 表头布局
  - 工具类
    - **VirtualTableHelpers**
      - `getItemMetadata()` - 获取项目元数据
      - `findNearestItem()` - 查找最近项目
      - `...` - 其他辅助方法
  - 事件处理
    - `setupEvents()` - 初始化事件
    - `scroll()` - 滚动处理
    - `handleCellClick()` - 单元格点击
    - `...` - 其他事件

四、模块说明1. Renderer 模块负责表格的可视化渲染逻辑：

使用 Konva.Layer 管理背景层、内容层、交互层

每一行或一组单元格使用 Konva.Group 表示

支持增量渲染与批量更新

通过矩阵坐标快速定位渲染区域

2. Model 模块提供数据源抽象

支持筛选、排序、分组聚合与动态更新

通过观察者模式与渲染层同步数据变更

3. Controller 模块监听用户输入事件（鼠标、滚动、拖拽）

控制渲染队列与更新节奏

管理当前选中状态与焦点单元格

与 Model 层进行数据同步

五、关键机制1. 分组渲染（Group Rendering）每个分组独立使用一个 Konva.Group

折叠后仅渲染组头

展开时批量加载子节点

支持懒加载以优化性能

2. 虚拟滚动（Virtual Scrolling）计算可视区域内应渲染的行列

减少内存占用与重绘次数

支持横向与纵向滚动同步

3. 批量绘制（Batch Draw）

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
private _waitingForDraw = false;
private animQueue: Function[] = [];

public batchDraw() {
  if (!this._waitingForDraw) {
    this._waitingForDraw = true;
    requestAnimationFrame(() => {
      this.animQueue.forEach(fn => fn());
      this.animQueue = [];
      this._waitingForDraw = false;
    });
  }
}

六、实现过程1. konva.js实现一个简单的表格绘制但是这样太过于简单了如果行列数量巨大且需要扩展显示卡顿的比较严重。

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
   // 绘制表格
    for (let row = 0; row < 10; row++) {
      for (let col = 0; col < 10; col++) {
        // 创建每个单元格
        const rect = new Konva.Rect({
          x: col * cellSize,
          y: row * cellSize,
          width: cellSize,
          height: cellSize,
          fill: 'lightgrey',
          stroke: 'black',
          strokeWidth: 1
        });

        // 将矩形添加到图层
        layer.add(rect);
      }
    }

2.使用辅助类 VirtualTableHelpers 这个类中提供了一系列的函数，如下图。通过offsetY和offsetX 以及 rowHeight colWidth 我们可以计算出当前可视区域应该渲染哪些row 和 column。

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
  getVisibleRowRange(frozenRowsHeight: number): { start: number; end: number } {
    const rowCount = this.linearRowsManager.getRowCount();
    const viewportHeight = this.visibleHeight - frozenRowsHeight - this.scrollBarSize;
    //  使用二分查找找到起始行（O(log n)）
    const startRow = VirtualTableHelpers.getRowStartIndexForOffset({
      itemType: "row",
      rowHeight: this.getRowHeight,
      columnWidth: this.getColumnWidth,
      rowCount: rowCount,
      columnCount: this.cols,
      instanceProps: this.instanceProps,
      offset: this.scrollY
    });
    // 基于起始行计算结束行（增量计算）
    const endRow = VirtualTableHelpers.getRowStopIndexForStartIndex({
      startIndex: Math.max(this.frozenRows, startRow),
      rowCount: rowCount,
      rowHeight: this.getRowHeight,
      columnWidth: this.getColumnWidth,
      scrollTop: this.scrollY,
      containerHeight: viewportHeight,
      instanceProps: this.instanceProps
    });
    // 添加缓冲区（预渲染上下各 2 行）
    const buffer = 2;
    return {
      start: Math.max(this.frozenRows, startRow - buffer),
      end: Math.min(rowCount - 1, endRow + buffer)
    };
  }

   getVisibleColRange(frozenColsWidth: number): { start: number; end: number } {
    const viewportWidth = this.visibleWidth - frozenColsWidth - this.scrollBarSize;
    const startCol = VirtualTableHelpers.getColumnStartIndexForOffset({
      itemType: "column",
      rowHeight: this.getRowHeight,
      columnWidth: this.getColumnWidth,
      rowCount: this.rows,
      columnCount: this.cols,
      instanceProps: this.instanceProps,
      offset: this.scrollX
    });

    const endCol = VirtualTableHelpers.getColumnStopIndexForStartIndex({
      startIndex: Math.max(this.frozenCols, startCol),
      rowHeight: this.getRowHeight,
      columnWidth: this.getColumnWidth,
      instanceProps: this.instanceProps,
      containerWidth: viewportWidth,
      scrollLeft: this.scrollX,
      columnCount: this.cols
    });

    const buffer = 2;
    return {
      start: Math.max(this.frozenCols, startCol - buffer),
      end: Math.min(this.cols - 1, endCol + buffer)
    };
  }

      //   渲染一下即可看到效果
      // 渲染单元格 - 从 leftPadding 开始
    for (let row = visibleRows.start; row <= visibleRows.end; row++) {
      const height = this.getRowHeight(row);

      if (currentY + height >= frozenRowsHeight &&
        currentY <= this.visibleHeight - this.scrollBarSize) {
        let currentX = this.leftPadding;
        for (let col = 0; col < this.frozenCols; col++) {
          const width = this.getColumnWidth(col);
          const cell = this.createCell(row, col, currentX, currentY, width, height);
          this.groups.bottomLeft.add(cell);
          currentX += width;
        }
      }

      currentY += height;
    }
  }

填充一点数据即可到这里一个高性能的表格也就成了但是我们是要实现多维表格还有段距离。

3. 画布分层以及兼容冻结行列。（相对有点难度 ）使用 bodyLayer更新不那么频繁且渲染成本较高，渲染静态表格数据。使用featureLayer渲染用户选区，横纵滚动条，高亮等等用户交互。

为什么这样做： bodyLayer更新不那么频繁且渲染成本较高，featureLayer更新渲染非常频繁，bodyLayer不受影响。

我们定义一个Canvas类专门处理画布，首先创建画布

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
  setupLayers() {
    this.backgroundLayer = new Konva.Layer({ name: 'backgroundLayer' });
    this.bodyLayer = new Konva.Layer({ name: 'bodyLayer' });
    this.featureLayer = new Konva.Layer({ name: 'featureLayer' });

    this.stage.add(this.backgroundLayer, this.bodyLayer, this.featureLayer);
   }

接下来就是处理冻结行列，冻结行列我计划分成四块区域｜或者说四个组来渲染，如图，区域｜组可以使用layer｜ group来划分，这里我采用konva.group来划分，因为官网说了不建议过多的layer

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
  // 创建四个分组
  this.groups = {
topLeft: new Konva.Group(),
topRight: new Konva.Group(),
bottomLeft: new Konva.Group(),
bottomRight: new Konva.Group(),
};

  this.bodyLayer.add(...Object.values(this.groups))

裁剪一下实现冻结的效果
setClipping() {
  const frozenColsWidth = this.core.getFrozenColsWidth() + 1;
  const frozenRowsHeight = this.core.getFrozenRowsHeight();

  // 为每个Group设置裁剪
  this.groups.topRight.clipFunc((ctx) => {
ctx.rect(
frozenColsWidth,
  0,
  this.visibleWidth - frozenColsWidth,
frozenRowsHeight
);
});

  this.groups.bottomLeft.clipFunc((ctx) => {
ctx.rect(
  0,
frozenRowsHeight,
frozenColsWidth,
  this.visibleHeight - frozenRowsHeight
);
});

  this.groups.bottomRight.clipFunc((ctx) => {
ctx.rect(
frozenColsWidth,
frozenRowsHeight,
  this.visibleWidth - frozenColsWidth,
  this.visibleHeight - frozenRowsHeight
);
});
}

ounter(lineounter(lineounter(line
定义好嵌套数据格式
1 通过每一个嵌套数据，一组一组的渲染，对于需要结合可视区域渲染来说稍有难度。
2.不要被嵌套给影响还是一行一行的渲染，分组头我也按照行来渲染只不过需要控制行缩进

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
  //
renderBottomRight() {
console.time('renderBottomRight');
  const frozenColsWidth = this.getFrozenColsWidth();
  const frozenRowsHeight = this.getFrozenRowsHeight();

  const visibleRows = this.getVisibleRowRange(frozenRowsHeight);
  if (visibleRows.start > visibleRows.end) {
console.timeEnd('renderBottomRight');
  return;
}

  const visibleCols = this.getVisibleColRange(frozenColsWidth);
  if (visibleCols.start > visibleCols.end) {
console.timeEnd('renderBottomRight');
  return;
}

  // 先绘制背景
  this.renderLevel1GroupBackgrounds(visibleRows, frozenColsWidth, frozenRowsHeight, 'bottomRight');
  this.renderLevel2GroupBackgrounds(visibleRows, frozenColsWidth, frozenRowsHeight, 'bottomRight');

  const colPositions = this.preCalculateColPositions(visibleCols, frozenColsWidth);

let currentY = frozenRowsHeight - this.scrollY;
  for (let row = this.frozenRows; row < visibleRows.start; row++) {
currentY += this.getRowHeight(row);
}

  for (let row = visibleRows.start; row <= visibleRows.end; row++) {
  const height = this.getRowHeight(row);

  for (let i = 0, col = visibleCols.start; col <= visibleCols.end; col++, i++) {
  const width = this.getColumnWidth(col);
  const x = colPositions[i];

  const cell = this.createCell(row, col, x, currentY, width, height);
  this.groups.bottomRight.add(cell);
}

currentY += height;
}

console.timeEnd('renderBottomRight');
}

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
export enum CellType {
  Record = 'Record',
  GroupTab = 'GroupTab',
  AddRow = 'AddRow',
  BlankRow = 'BlankRow',
  Header = 'Header'
}

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
export abstract class CellLayout {
  protected ctx: CanvasRenderingContext2D;
  protected x: number = 0;
  protected y: number = 0;
  protected width: number = 0;
  protected height: number = 0;

  setPosition(x: number, y: number, width: number, height: number) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}

  abstract render(row: ILinearRow, col: number, isFirstCol: boolean, isLastCol: boolean): Konva.Group;
}

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
class GroupTabLayout extends CellLayout {
  render(row: ILinearRow, col: number, isFirstCol: boolean, isLastCol: boolean): Konva.Group {
  const group = new Konva.Group({ x: this.x, y: this.y });
  const groupRow = row as ILinearRowGroup;
  const depth = row.depth;

  const bgColor = this.getGroupBackground(depth);
  const indentOffset = depth * 20; // 根据层级缩进

  if (isFirstCol) {
// 第一列:展开/折叠图标和分组标题
  const bgRect = new Konva.Rect({
    x: indentOffset,
    y: 0,
    width: this.width - indentOffset,
    height: this.height,
    fill: bgColor,
    stroke: '#e0e0e0',
    strokeWidth: 0.5
});

// 只有非最后一层的分组才显示展开/折叠图标
  const showExpandIcon = groupRow.children && groupRow.children.some(child =>
child.type === CellType.GroupTab
);

  const icon = new Konva.Text({
    x: indentOffset + 15,
    y: this.height / 2,
    text: showExpandIcon ? (groupRow.expanded ? '▼' : '▶') : '',
    fontSize: 8,
    fill: '#4a5568',
    listening: showExpandIcon
});

  const titleText = new Konva.Text({
    x: indentOffset + (showExpandIcon ? 30 : 15),
    y: this.height / 2 - 5,
    text: `${groupRow.groupTitle} (${groupRow.recordCount})`,
    fontSize: 8,
    fill: '#2d3748',
    fontWeight: 'bold'
});

  if (showExpandIcon) {
bgRect.on('click', () => {
bgRect.fire('toggleGroup', { groupId: groupRow.groupId });
});
icon.on('click', () => {
icon.fire('toggleGroup', { groupId: groupRow.groupId });
});
}

group.add(bgRect, icon, titleText);
} else if (col === 1) {
// 第二列:分组字段信息
  const bgRect = new Konva.Rect({
    width: this.width,
    height: this.height,
    fill: bgColor,
    stroke: '#e0e0e0',
    strokeWidth: 0.5
});

  const fieldLabel = new Konva.Text({
    x: 10,
    y: 6,
    text: `${this.getGroupFieldLabel(depth)}: ${groupRow.groupField}`,
    fontSize: 7,
    fill: '#718096'
});

  const valueLabel = new Konva.Text({
    x: 10,
    y: this.height / 2 + 2,
    text: groupRow.groupTitle,
    fontSize: 13,
    fontWeight: 'bold',
    fill: '#2d3748'
});

group.add(bgRect, fieldLabel);
} else {
// 其他列:空背景
  const bgRect = new Konva.Rect({
    width: this.width,
    height: this.height,
    fill: bgColor,
    stroke: '#e0e0e0',
    strokeWidth: 0.5
});
group.add(bgRect);
}

  return group;
}

  private getGroupBackground(depth: number): string {
// const colors = ['#f7fafc', '#edf2f7', '#e2e8f0', '#cbd5e0'];
  const colors = ['#FFF', '#F5F5F5', '#FFF', '#cbd5e0'];
  return colors[Math.min(depth, colors.length - 1)];
}

  private getGroupFieldLabel(depth: number): string {
  const labels = ['一级分组', '二级分组', '三级分组'];
  return labels[Math.min(depth, labels.length - 1)] || '分组';
}

}

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
  this.linearRowsManager = new LinearRowsManager(this.data);
  this.linearRowsManager.buildLinearRows(); // 初始无分组

  // 初始化布局渲染器
  this.groupTabLayout = new GroupTabLayout();
  this.recordRowLayout = new RecordRowLayout(
  this.data,
  this.colsConfig
);
  this.addRowLayout = new AddRowLayout();
  this.blankRowLayout = new BlankRowLayout();
  this.headerLayout = new headerLayout(this.iconManager, this.columns);

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
// cacl(40)
  if (textContext && textContext.includes('cacl')) {
  this.alloyWorker.cookie.exportStaion(Math.random() * 10 >= 5 ? 40 : 39).then((result) => {
  const groups = this.groups.bottomRight.find(`#${row}-${col}`) as Group[];
  if (groups.length) {
  const textNode = groups[0].children[1] as Konva.Text;
textNode.text(result);
}
})
textContext = '计算中...';
}

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line
export class SelectionNodeManager {
public topRect: Konva.Rect;
public rightRect: Konva.Rect;
public bottomRect: Konva.Rect;
public leftRect: Konva.Rect;
public selectionBorder: Konva.Rect;
public activeCellBorder: Konva.Rect;

  constructor() {
  const fillConfig = {
    fill: "rgba(0, 123, 255, 0.1)",
    visible: false,
    listening: false,
};

this.topRect = new Konva.Rect(fillConfig);
this.rightRect = new Konva.Rect(fillConfig);
this.bottomRect = new Konva.Rect(fillConfig);
this.leftRect = new Konva.Rect(fillConfig);

this.selectionBorder = new ThinBorderRect({
    fill: "transparent",
    stroke: "#1e6fff",
    strokeWidth: 1,
    visible: false,
    listening: false,
}) as any;

this.activeCellBorder = new Konva.Rect({
    fill: "transparent",
    stroke: "#1e6fff",
    strokeWidth: 2,
    visible: false,
    listening: false,
});
}

  update({
selectionX,
selectionY,
selectionWidth,
selectionHeight,
activeCellX,
activeCellY,
activeCellWidth,
activeCellHeight
}) {
// 计算相对位置
  const relX = activeCellX - selectionX;
  const relY = activeCellY - selectionY;

// 1. 上方区域
this.topRect.setAttrs({
    x: selectionX,
    y: selectionY,
    width: selectionWidth,
    height: relY,
    visible: relY > 0
});

// 2. 右侧区域
  const rightWidth = selectionWidth - (relX + activeCellWidth);
this.rightRect.setAttrs({
    x: activeCellX + activeCellWidth,
    y: activeCellY,
    width: rightWidth,
    height: activeCellHeight,
    visible: rightWidth > 0
});

// 3. 下方区域
  const bottomHeight = selectionHeight - (relY + activeCellHeight);
this.bottomRect.setAttrs({
    x: selectionX,
    y: activeCellY + activeCellHeight,
    width: selectionWidth,
    height: bottomHeight,
    visible: bottomHeight > 0
});

// 4. 左侧区域
this.leftRect.setAttrs({
    x: selectionX,
    y: activeCellY,
    width: relX,
    height: activeCellHeight,
    visible: relX > 0
});

// 5. 整体边框
this.selectionBorder.setAttrs({
    x: selectionX,
    y: selectionY,
    width: selectionWidth,
    height: selectionHeight,
    visible: true
});

// 6. 活动单元格边框
this.activeCellBorder.setAttrs({
    x: activeCellX + 1,
    y: activeCellY + 1,
    width: activeCellWidth - 1,
    height: activeCellHeight - 1,
    visible: true
});
}

  hide() {
this.topRect.visible(false);
this.rightRect.visible(false);
this.bottomRect.visible(false);
this.leftRect.visible(false);
this.selectionBorder.visible(false);
this.activeCellBorder.visible(false);
}
}

Fish AI Reader

FishAI

联系邮箱 441953276@qq.com

相关标签