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

[madpecker009]

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

[respect11]

前端 table

后端存 x,y 位置

[yaphets666]

曲线框架啥的可以用 canvas 画.座位啥的就图片,字体图标.选座可以每个座位定个 ID,也可以二维数组.
现成的方案可以去搜索下 电影院选座前端实现

[cernard]

这个教室好高级……就是多人学习间开门容易打到观景台同学的屁股。F9 个 F10 的双人桌适合情侣或者偷吃东西。

[learningman]

每个位置一对象，存自己的大小 xy 和 uuid

[madpecker009]

@cernard 啊，这。。。太草了

[madpecker009]

@yaphets666 已经在看着了。。。

[madpecker009]

@learningman 那么需要在小程序里面怎么展示呢........

[fox0001]

用不用 canvas 都不是问题。

1 ）定义座位类型。比如单人桌、双人桌

2 ）定义教室。记录教室大小。可以是 div 、canvas 等

3 ）把座位复制到教室。重点是记录作为与教室的相对坐标。html 元素的 offset，可以获取 height 和 width

4 ）保存数据。
新建的座位与教室有关联
座位记录与教室的相对坐标
新建的座位赋予 ID，根据其类型判断可否预订

5 ）展现。
教室是底层，座位 position:absolute;z-index:10，然后根据坐标摆放。

用户点击可预订的座位，获取座位 ID 做处理。

已预订的座位要显示标识


大概就这样吧

[huifer]

openlayers

[a719114136]

和电影院的选座页面差不多吧，找到个类似的，不知道有没有用 https://github.com/houzisbw/MeiTuanCinemaSmartChoose

[christin]

这不是巧了么 我们公司有个项目和这个差不多 用 svg 做的

[christin]

@christin 需要的话可以详细讨论一下 不过不是我做的 我可以帮你看看代码

[madpecker009]

@christin 真的吗 太感谢啦 该咋联系你呢

[freakxx]

你可以直接做成是一个二维表，

不同的东西，无非就是 1 * 1, 2 * 2 这样规格不同，把格子直接锁定就好，

[liukangxu]

既然座位有编号（ A1-A5 、B1-B5……），直接存编号和用户的映射就好了，没必要再用坐标对座位编码

[lff0305]

raphaeljs, 完全能搞定，就是自己要写代码

[yzlnew]

关键词 floor planner html

[yzlnew]

比如这个可以学习下 https://github.com/pkozul/ha-floorplan

[kidult]

无人自习室吧，又是一片红海

[kidult]

@madpecker009 如果是自己想做，可以交流一下