想在 html 上画出室内的座位分布图，有啥好的解决方案么？

[madpecker009]

如图所示，想要在后台实现添加座位的功能。需要让管理员在后台点点就能设置座位啥的。
设置完的座位还需要在小程序中展示出来，在小程序中点击哪个座位就能选中哪个座位进行预定。
后台是 fastadmin，纯 html+css+js 。前端展示用小程序。
关于这个大家有没有什么好的解决方案呢？

[whypool]

svg 就行

[TimPeake]

哈哈 很久之前也是好奇 电影院选座的那个页面该怎么做

[qa2080639]

fabric.js

[madpecker009]

@kidult 公司里的项目。。。 我要是自己做我就做这样的布局方式的了

[madpecker009]

@TimPeake 我想的就是 i 在网页上生成直角坐标系 那样排布座位。至于图中的那种房间轮廓就暂时么办法了

[xiangyuecn]

按照搞游戏开发的思路来搞，这种需求实现应该算是入门级的吧😂

[madpecker009]

@xiangyuecn 啊，，，不懂游戏开发，，，

[madpecker009]

@xiangyuecn 我打算用直角坐标系来搞了

[azcvcza]

能点选加交互的话，初级的数量不多的建议 SVG ；数量一多就要用 canvas，加自己检测鼠标坐标搞重绘

[lhx880619]

我做过 还可以 2d 转 3d 2d 用 canvas 库 pixi paper 等 2d 库都可以 3d 部分 threejs Babylon 都行

[madpecker009]

@lhx880619 用这样做的话 怎么存库呢、、、突然发现又有这个问题了

[wordsman]

draw.io ，画完以后保存为 HTML 就行

[asdjgfr]

数量不多就用 svg，开发方便，多的话找个 canvas 的库就行，api 也很简单，比如 pixi

[zepto]

我昨天刚想着自习室加个小程序，这个就出现了。。

[madpecker009]

@zepto 哈哈 或许这就是缘分吧

[pOOOOOr]

之前是我是用 SVG 画，可以预先定义几个图形，后台给 xy 坐标和类型就可以自由组合了，简单的 demo https://github.com/xhkz/react-seat-map/blob/master/src/index.js

[bojue]

IDC 行业拜访设备的绘制工具你可以参考一下： https://github.com/bojue/BaseMap

[bojue]

@bojue 摆放

[xiaoqiao24]

组合模式策略 将整个教室通过不同区域划分成每个独立模块，每个模块写个类独立管理，对于模块中的每个座位可以预先设定好位置标记，使用链表来维护，也方便后期增加