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

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

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

有没有大佬知道啊？


https://imgur.com/qAgwcFM
2977 次点击
所在节点    JavaScript
15 条回复
Razio
149 天前
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
149 天前
@Razio #1 谢谢大佬 学习了
shadowyue
149 天前
你乐意，用 html 画都行，就是个布局比较特殊的页面而已。
darkengine
149 天前
@Razio 👍🏻 这个好丝滑，我还在想是不是用 konva 做的呢
zoharSoul
149 天前
svg
heftyMan
149 天前
v 站牛人还是多啊
UnluckyNinja
149 天前
前端 2D 绘制就两个方案，位图就 canvas ，矢量图就 SVG ，看图里这个应该是 SVG ，布局本身应该是外面弄好再导入到页面里的，然后再单独实现头像、互动等功能。不需要什么库，SVG 浏览器原生支持的功能很丰富
balaWgc
149 天前
@Razio 牛啊，echart 还从来没看过这个
FightPig
149 天前
@Razio echartn 兢还有这个，学到了
dcsuibian
149 天前
https://ex.noerr.eu.org/t/1104640
常常忘了 ECharts 有多强大
chneqi
149 天前
这种图用 svg 画，推荐个开源软件 inkscape ，画完把 svg 直接拷页面上，需要动态/绑事件的地方自己控制元素就是了。
画这种用 echarts 属于给自己下绊子，绕路不说。到时候某个效果不好实现，领导来找你，你就知道超出 echarts 配置项的东西搞起来有多蛋疼了
YVAN7123
149 天前
@chneqi #11 感谢指导 ，svg 我学一下
izoabr
148 天前
用 Konva 做过，这里有个电影院选座的示例
https://konvajs.org/docs/sandbox/Seats_Reservation.html
YVAN7123
148 天前
@izoabr #13 学习了一下
humbass
142 天前
这玩意最需要可视化编辑的

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1116418

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX