如何使用javascript绘制建筑物一层的平面图

Question

我想在 html 页面上绘制 2D 平面图。

我有一个如下所示的数据集。

数据集

{
  floor:{
    "id" : 2,
     rooms:[
       {
        "id" : 21,
        "x"  : 0.0,
        "y"  : 0.0,
        "height" : 15,
        "weight" : 20 
       }
       .
       .
       .
     ]
  }
}

我想要一个类似于下图的计划

我想在悬停在房间上时添加工具提示。

有可以推荐的图书馆吗？

Answer 1

无需库，自己绘制SVG形状，值得投资。

您的主要 SVG 元素是：

• RECTangles：https : //developer.mozilla.org/en-US/docs/Web/SVG/Element/rect

• 组：https : //developer.mozilla.org/en-US/docs/Web/SVG/Element/g

门洞是层叠在顶部的白色矩形。

替代方法是使用路径

• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path

我的建议：先画 5 个 RECTangles，然后学习 PATH 符号（绘制相同的 RECT 形状）

覆盖是显示/隐藏（组）SVG 的“鼠标悬停”事件侦听器，就像您使用 JavaScript 显示/隐藏 HTML 元素一样

从在 JSFiddle 或 CodePen 中输入 SVG 开始。
如果使用 VS-Code，请添加 SVG Preview 扩展：https : //github.com/SimonSiefke/vscode-svg-preview

您将在一个小时内获得初稿。

注意：您当前的数据集没有/显示坐标，因此绘制完全取决于您。