Javascript 如何在html中重新绘制或调整矩形的大小？
我想重新绘制并调整矩形的大小，该矩形用于检测对象。最初，我能够通过JSON文件获取数据，并能够基于JSON的x、y、width和height数据绘制矩形 现在我想重新绘制或调整它的大小。我该怎么做 方法：一旦用户按下编辑按钮，所有矩形边框将转换为虚线框，然后根据用户要求进行修改，用户可以访问任何特定的矩形&它可以调整大小或重新绘制。完成后，用户必须按下保存按钮，我们所做的任何新更改都会自动反映到具有新json数据的同一json文件中 用于绘制对象 Json文件格式：Javascript 如何在html中重新绘制或调整矩形的大小？,javascript,html,Javascript,Html,我想重新绘制并调整矩形的大小，该矩形用于检测对象。最初，我能够通过JSON文件获取数据，并能够基于JSON的x、y、width和height数据绘制矩形 现在我想重新绘制或调整它的大小。我该怎么做 方法：一旦用户按下编辑按钮，所有矩形边框将转换为虚线框，然后根据用户要求进行修改，用户可以访问任何特定的矩形&它可以调整大小或重新绘制。完成后，用户必须按下保存按钮，我们所做的任何新更改都会自动反映到具有新json数据的同一json文件中 用于绘制对象 Json文件格式： { "Frame_c
{
"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,
}
<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>
单击按钮发送JSON大小
新尺寸
var_main=document.getElementById（“main”）；
变量_大小={
“宽度”：“200px”，
“高度”：“200px”，
“边框”：“2倍纯色灰色”
};
函数newSize（）{
_main.style.width=\u size.width
_main.style.height=\u size.height
}