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

Question

我想在 html 页面上绘制二维平面图。

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

数据集

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

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

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

有什么图书馆可以推荐吗？

Answer 1

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

您的主要 SVG 元素是:

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

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

门洞是顶部的白色矩形。

替代方法是使用 PATH

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

我的建议:先画 5 个 RECTangle，然后学习 PATH 符号(绘制相同的 RECT 形状)

Overlays 是显示/隐藏(组)SVG 的“鼠标悬停”事件监听器，就像您使用 JavaScript 显示/隐藏 HTML 元素一样

首先在 JSFiddle 或 CodePen 中输入 SVG。
如果您使用 VS-Code，请添加 SVG 预览扩展:https://github.com/SimonSiefke/vscode-svg-preview

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

注意:您当前的数据集没有/显示坐标，因此绘图完全由您决定。