像售票员这样的互动平面图

Question

如何开发像售票员这样的交互式平面图，例如this？

Answer 1

我建议使用SVG在平面图中绘制形状。您可以将事件处理程序附加到SVG形状，以使它们响应单击和其他类型的事件。您还可以为元素指定类名以设置其样式，并更改样式，例如悬停时。 SVG与react很好地集成在一起，并且有很多tutorials一起使用它们。

另一个选择是使用HTML5画布绘制形状。那也行得通，但我认为这不适合这种情况，因为你不能缩放用画布渲染的图形。您仍然可以在SVG与画布上进行this比较，以了解它们针对不同需求的适用性的进一步信息。

您还很可能需要构建一个后端，以将平面图数据存储在数据库中并将其公开给前端。最好使用SQL数据库和RESTful API（将其公开给前端）来完成。

总而言之：前端最好使用React（如果应用很大，可能需要做redux）+ SVG图形，以及具有您想要的任何技术（例如node / express或python / django）+ SQL数据库的后端API来完成。 （例如PostgreSQL）。