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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 462 days ago, the information mentioned may be changed or developed.

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

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

有没有大佬知道啊？

https://imgur.com/qAgwcFM

小程序

座位图

canvas

15 replies • 2025-03-13 18:51:12 +08:00

Razio

Mar 6, 2025

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

Mar 6, 2025

@Razio #1 谢谢大佬学习了

shadowyue

Mar 6, 2025

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

darkengine

Mar 6, 2025

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

zoharSoul

Mar 6, 2025

svg

heftyMan

Mar 6, 2025

v 站牛人还是多啊

UnluckyNinja

Mar 6, 2025

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

balaWgc

Mar 6, 2025

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

FightPig

Mar 6, 2025

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

dcsuibian

Mar 6, 2025

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

chneqi

Mar 7, 2025

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

YVAN7123

Mar 7, 2025

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

izoabr

Mar 7, 2025

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

YVAN7123

Mar 7, 2025

@izoabr #13 学习了一下

humbass

Mar 13, 2025

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