热心市民小岳

1.技术栈说明 载体：此部分的代码在React Next都可以轻松迁移转换。 表格插件：利用konva实现，协作提示相关使用多层layer来展示。 服务端：Nest.js 也集合成了socket.io

开篇 表格本身使用konva绘制，浮层我不使用konva.layer来实现了，而是使用dom来实现，是因为考虑到交互复杂性。 🧑‍涉及到的插件 效果对比 前面时腾讯文档的，后面是自己实现的。 实现过程

上一篇文章实现了日历视图，布局和功能相对简单一点，所以核心功能我用了一个class去实现。甘特图功能和布局相对复杂一点，且为了后续扩展，这块要将功能细化。可能开源的代码并不能够直接参与到你们的实际项目

canvas库 konva 实现腾讯文档 [日历视图] - canvas大部分用于画图设计之类的功能，大厂用 canvas 用于业务实现，新颖性。 - 大厂的这些用于商用的功能实现都不开源，自我

先贴一张实现的效果图 老规矩先进行功能分析和准备工作 这块功能我实现的不多，主要就是拖动新增座位和已占用座位拖动到未占用座位，放大缩小图层。如右键功能，定义座位中心点，所有已占用座位向中心点靠齐，忽视

首先进行功能分析和 dom 结构分析 采用了 canvas 渲染 ( 如果不是 canvas 渲染 那就没必要去实现... )，多画布结构，一个layer用于静态数据展示，另外一个 layer 用于频