自习室小程序的座位图是如何实现的（前端）

[YVAN7123]

如下图自习室的小程序图是如何实现的？
小程序的软件是无老板

我的猜想：
1. 用 canvas 纯画
2. 底图是图片， 上面加一个层， 将座位位置按照定位用 canvas 画上去。

有没有大佬知道啊？


https://imgur.com/qAgwcFM

[Razio]

https://echarts.apache.org/examples/zh/editor.html?c=geo-seatmap-flight
https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-lines

[YVAN7123]

@Razio #1 谢谢大佬 学习了

[shadowyue]

你乐意，用 html 画都行，就是个布局比较特殊的页面而已。

[darkengine]

@Razio 👍🏻 这个好丝滑，我还在想是不是用 konva 做的呢

[zoharSoul]

svg

[heftyMan]

v 站牛人还是多啊

[UnluckyNinja]

前端 2D 绘制就两个方案，位图就 canvas ，矢量图就 SVG ，看图里这个应该是 SVG ，布局本身应该是外面弄好再导入到页面里的，然后再单独实现头像、互动等功能。不需要什么库，SVG 浏览器原生支持的功能很丰富

[balaWgc]

@Razio 牛啊，echart 还从来没看过这个

[FightPig]

@Razio echartn 兢还有这个，学到了

[dcsuibian]

https://www.v2ex.com/t/1104640
常常忘了 ECharts 有多强大

[chneqi]

这种图用 svg 画，推荐个开源软件 inkscape ，画完把 svg 直接拷页面上，需要动态/绑事件的地方自己控制元素就是了。
画这种用 echarts 属于给自己下绊子，绕路不说。到时候某个效果不好实现，领导来找你，你就知道超出 echarts 配置项的东西搞起来有多蛋疼了

[YVAN7123]

@chneqi #11 感谢指导 ，svg 我学一下

[izoabr]

用 Konva 做过，这里有个电影院选座的示例
https://konvajs.org/docs/sandbox/Seats_Reservation.html

[YVAN7123]

@izoabr #13 学习了一下

[humbass]

这玩意最需要可视化编辑的