时间戳

首页 > 解决方案 > 如何在 html 中重绘或调整矩形的大小？

javascript - 如何在 html 中重绘或调整矩形的大小？

问题描述

我想重绘并调整为检测对象而绘制的矩形。最初我能够通过 JSON 文件获取数据，并能够根据 JSON 的 x、y、宽度和高度数据绘制矩形。

现在我想重绘或调整它的大小。我怎样才能做到这一点？

方法：一旦用户按下编辑按钮，所有矩形边界框将转换为虚线框，稍后根据用户要求，用户可以访问任何特定的矩形，并且可以调整大小或重新绘制。一旦完成，用户必须按下保存按钮以及我们所做的任何新更改都会自动反映到具有新 Json 数据的相同 json 文件中。

这是绘制对象的小提琴。

json文件格式：

{
    "Frame_count":1,
    output:[
        {
        "Objects_classname":"car1",
            "x_val":82.9883,
            "y_val":197.56245,
            "width":316.03088,
            "height":197.45451
        },

        {
        "Objects_classname":"car2",
            "x_val":522.4823,
            "y_val":170.47263,
            "width":64.66687,
            "height":61.78085
        },

        ],
        "Total_objects_detected":2,
},
{
    "Frame_count":2,
    output:[
        {
        "Objects_classname":"car1",
            "x_val":78.9991,
            "y_val":189.48058,
            "width":327.41028,
            "height":198.80226
        },

        {
        "Objects_classname":"car2",
            "x_val":506.45404,
            "y_val":170.87161,
            "width":67.57983,
            "height":52.28577
        },

        ],
        "Total_objects_detected":2,
}

在图像中，您会看到行人周围的矩形框

标签： javascripthtml

解决方案

尝试

<html>
<body>
<div id="main" style="width:100px;height:100px;border:2px solid gray"></div>
<p>Click the button to send JSON Size</p>
<button type="button" onclick="newSize()">new size</button>
<script>
  var _main = document.getElementById("main");
  var _size = {
        "width": "200px",
        "height": "200px",
        "border" : "2px solid gray"
      };
  function newSize() {
    _main.style.width = _size.width
    _main.style.height = _size.height
  }
</script>
</body>
</html>

推荐阅读