Question

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

现在，我想重绘或调整其大小。我该怎么办？

方法：用户按下EDIT按钮后，所有矩形框都将转换为虚线框，随后根据用户要求，用户可以访问任何特定的矩形，并且可以调整大小或重新绘制矩形。按下保存按钮，我们所做的任何新更改都会自动反映到具有新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,
}

In image you see the rectangle boxes around pedestrian

Answer 1

尝试

<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>

如何在HTML中重新绘制矩形或调整矩形大小？

1 个答案: