Question

如何从调整大小的div中获取缩放坐标？我想要做的是在一个小图像上画一个正方形（例如：320x240）。告诉我绘制此正方形的数据集实际上从较大的图像中获取其坐标（例如：640x480）。我可能应该在小学时更加注意，因为这个公式可能有一个名字。

https://cdn.discordapp.com/attachments/265311809475444737/328765651176914944/video.mov

在视频链接中，您可以看到汽车并非总是装在盒子里。部分原因是人工智能还没有足够的训练，但你可以看到，当它确实看到一辆车时，盒子并不总是在它周围。直到它接近图像的左上角。

让我知道计算这个公式所需的公式名称就足够了：D或者指向这样做的javascript方法的链接会更好：D谢谢！

示例原点640x480图像上的正方形数据，其坐标和大小： {x:34,y:25,height:30,width:30}

如何获取显示图像的信息，例如320x240？ {x:?,y:?,height:?,width:?}

Answer 1

我认为这个公式的正确名称是三个规则：

var div={x:34,y:25,height:30,width:30};
var img={x:34,y:25,height:240,width:320}
var scale=Math.min(div.height/img.height,div.width/img.width);
img.heigth*=scale;
img.width*=scale;

Answer 2

这是对我有用的简化版本。

var redBox={x:34,y:25,height:30,width:30}
var div=$('#stream-element')
var displayHeight=div.height()
var displayWidth=div.width()
var originalHeight=480
var originalWidth=640

//get ratios                        
var widthRatio=displayWidth/originalWidth
var heightRatio=displayHeight/originalHeight

//get scaled coordinates
var newRedBoxX=redBox.x*widthRatio
var newRedBoxY=redBox.y*heightRatio
var newRedBoxWidth=redBox.width*widthRatio
var newRedBoxHeight=redBox.height*heightRatio

这是我实际使用它的地方。 https://github.com/moeiscool/Shinobi/commit/e88d977c5aff3cbd1beb848c3c7d0762c2a50ec3

如何从缩放的div中获取坐标？

2 个答案: