问题标签 [bounding-box]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
477 浏览

mysql - 如何计算包围一组mysql几何的边界框?

我有一个包含一组形状的 mysql 表。该表定义如下:

该表包含 24 个形状(记录)。每个形状在“ogc_geom”中都有定义该形状的多边形。

shapeid = 0 的“ogc_geom”示例如下:

如何计算包围所有形状的边界框?

0 投票
1 回答
6945 浏览

java - 使用有界框进行碰撞检测

我正在为班级做一个编程项目。我们正在编写游戏爆发,它由一个球、一个桨、四个边缘和砖块组成。球从不同的物体上反弹,当检测到碰撞时,每个物体都会对自己执行不同的操作。下面是我目前不起作用的代码。我正在尝试使用对象的位置(其中心点)来构造一个有界框和每个边缘的值(上、下、左、右)来计算框是否命中。我在脑海中想到,可能存在两种类型的碰撞,一种是拐角碰撞,另一种是一个物体撞到另一个物体中间的某个地方。如果可以,请查看我的代码并提供帮助。我不知道是否有更好的方法来做我想做的事情,但我目前没有

这是代码的一部分,用于检查能够与所有其他可能发生碰撞的对象发生碰撞的每个对象。它还会移动每个对象并计时游戏的时钟。

这是代码的一部分,用于确定一个对象是否与另一个对象发生碰撞,以及如果发生碰撞则要采取的适当措施。这段代码专门来自球对象,所以当它撞到砖块时执行的动作是 ySpeed 反转。

0 投票
4 回答
19566 浏览

javascript - 通过 JavaScript 计算旋转元素的边界框的 X、Y、高度和宽度

基本上我问这个问题的 JavaScript:Calculate Bounding box coordinates from a rotate rectangle

图表

在这种情况下:

  • iX = 旋转(蓝色)HTML 元素的宽度
  • iY = 旋转(蓝色)HTML 元素的高度
  • bx = 边界框的宽度(红色)
  • by = 边界框的高度(红色)
  • x = Bounding Box 的 X 坐标(红色)
  • y = Bounding Box 的 Y 坐标(红色)
  • iAngle/t = HTML 元素的旋转角度(蓝色;未显示,但在下面的代码中使用),仅供参考:在此示例中为 37 度(与示例无关)

如何通过 JavaScript 计算围绕旋转的 HTML 元素(给定其宽度、高度和旋转角度)的边界框(所有红色数字)的 X、Y、高度和宽度?一个棘手的问题是让旋转的 HTML 元素(蓝色框)的原始 X/Y 坐标以某种方式用作偏移量(这在下面的代码中没有表示)。这可能得看CSS3的transform-origin来确定中心点。

我有一个部分解决方案,但 X/Y 坐标的计算无法正常运行......

我觉得我很近,但又很远……

非常感谢您提供的任何帮助!

帮助非 JAVASCRIPTERS...

一旦 HTML 元素被旋转,浏览器会返回一个“矩阵变换”或“旋转矩阵”,看起来是这样的:rotate(Xdeg) = matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0); 有关更多信息,请参阅此页面

我有一种感觉,这将启发我们如何仅根据旋转元素(蓝色)的宽度、高度和角度来获取边界框(红色)的 X、Y。

新信息

嗯……有趣……

在此处输入图像描述

从 X/Y 角度来看,每个浏览器似乎处理旋转的方式不同!FF 完全无视它,IE & Opera 绘制边界框(但它的属性没有暴露,即:bx & by)和 Chrome & Safari 旋转矩形!除 FF 外,所有人都正确报告了 X/Y。所以... X/Y 问题似乎只存在于 FF!多么奇怪!

另外值得注意的是,对于旋转的 X/Y 而言,似乎$(document).ready(function () {...});触发得太早了(这是我最初的问题的一部分!)。我在 X/Y 询问调用之前直接旋转元素,$(document).ready(function () {...});但它们似乎直到一段时间后才更新(!?)。

当我有更多时间时,我会用这个例子折腾一个 jFiddle,但我使用的是“jquery-css-transform.js”的修改形式,所以我在 jFiddle 之前有一点点修补......

那么... 怎么了,FireFox?这不酷,伙计!

剧情变厚了……

嗯,FF12 似乎解决了 FF11 的问题,现在就像 IE 和 Opera 一样。但现在我又回到了 X/Y 的方位,但至少我想我现在知道为什么了……

似乎即使浏览器正确报告了旋转对象的 X/Y,但未旋转版本上仍然存在“幽灵”X/Y。似乎这是操作的顺序:

  • 从 X,Y 为 20,20 的未旋转元素开始
  • 旋转所述元素,导致 X,Y 报告为 15,35
  • 通过 JavaScript/CSS 将所述元素移动到 X,Y 10,10
  • 浏览器在逻辑上不旋转元素回到 20,20,移动到 10,10 然后重新旋转,导致 X,Y 为 5,25

所以...我希望元素在旋转后 10,10 处结束,但由于元素(看似)在移动后重新旋转,因此生成的 X,Y 与集合 X,Y 不同。

这是我的问题!所以我真正需要的是一个函数来获取所需的目标坐标 (10,10),并从那里向后工作以获得起始 X、Y 坐标,这将导致元素旋转到 10,10。至少我知道我现在的问题是什么,因为由于浏览器的内部工作原理,旋转元素似乎是 10=5!

0 投票
1 回答
1370 浏览

mongodb - 盒子地理空间查询中的猫鼬无法正常工作

简单的问题:
在nodejs上使用猫鼬进行地理空间查询的正确方法是什么?

复杂的故事:
我用带有空间索引的猫鼬创建了一个模式

然后我在表中插入了3个文件。我可以使用 mongo 客户端和 mongoose 检索这些db.mymodels.find({})文档MyModel.find({});

现在我尝试使用边界框进行地理空间查询。
mongo客户端工作正常

在框中只返回一个结果。
另一方面,Mongoose 返回所有三个结果

这个问题说你应该使用 find() 而不是 where,但是当我尝试用 where 替换 find 时,'need an area > 0' 我检查了一个错误,我的边界框格式正确,左下角然后右上角。

该怎么办?使用猫鼬使用边界框进行地理空间查询的正确方法是什么?

0 投票
1 回答
565 浏览

javascript - (未)旋转矩形上的点

我发现这个以/ (加上and )开头并计算旋转到/的优秀问题和答案。这个计算完美,但我想在相反的方向运行它;从/和开始,我想计算原始/和.xycenter x/ydegrees/radiansx'y'x'y'degrees/radiansxycenter x/y

或者,在 JavaScript/jQuery 中:

上面的数学/代码解决了图A中的情况;它根据/ (红圈)、(蓝星)和 的已知值计算目的地x'/ (绿圈)的位置。y'xycenter x/ydegrees/radians

但我需要数学/代码来解决图 B;我不仅可以找到目的地x/ y(绿色圆圈),还可以center x/y从起始x/ y(灰色圆圈,尽管可能不需要)、目的地x'/ y'(红色圆圈)和degrees/radians.

图 A 和 B

上面的代码将通过(感谢@andrew cooke 的答案,该答案已被他删除)解决了目的地x/ y(绿色圆圈) ,但为了做到这一点,我需要向其中输入目的地的位置(绿色星),这就是我目前缺少的计算,如下图 C 所示:iDegrees * -1center x/y

图C

那么......我如何找到给定的坐标?/ ?(绿色星)nA(角度)和x'/ y'(红色圆圈)?

0 投票
0 回答
302 浏览

javascript - Raphael.js - 使用自定义字体的 bbox 太大

我有一个问题,当我创建一个自定义字体的文本时,边界框太大了。当我使用标准字体时,一切都很好。任何人的想法?

我解决了!显然 raphael.js 无法检测到文本的宽度,当仅使用 @font-face 时。我必须用 Raphael.registerFont() 注册字体。

0 投票
1 回答
689 浏览

python - KML:从 Python 中的边界坐标计算范围

有了某个多边形的边界框坐标,Python 有没有办法计算 KML 文件中 LookAt 元素的理想范围值?

从边界坐标到范围的公式或一组公式已经非常有用。

0 投票
3 回答
518 浏览

php - 使用 PHP 旋转图像时创建的边界框中的黑色背景

我已经在互联网上搜索了这个问题的答案,但我似乎找不到有用的东西。当我将图像旋转 5 度时,该图像会在为容纳旋转而创建的边界图像内旋转。创建的图像是完全黑色的。

我正在尝试使边界框图像完全透明。我看过的其他一些网站和问题说这应该可行:

但是,这会产生:

产量

我该怎么做才能使黑色边界框透明?

谢谢!

0 投票
2 回答
1238 浏览

ios - 查找 CGPath 与 CGRect 相交的区域

我正在开发一个 iOS 应用程序,我需要能够看到屏幕范围内有多少 CGPath 以确保有足够的空间让用户仍然可以触摸。问题是,当形状在拐角处时,当路径在拐角处时,我通常会使用的所有方法(以及我能想到的所有尝试)都会失败。

这是一张照片:在此处输入图像描述

我如何计算屏幕上有多少该形状?

0 投票
2 回答
932 浏览

javascript - 如何划分有向边界框?

我正在编写代码,它将为二维的(不一定是凸的)多边形构建一个定向边界框(obb)树。

到目前为止,我能够通过找到它的凸包并在外壳上使用旋转卡尺来找到多边形的面积最小 obb。

下图就是一个例子。带有红线和红点的黄色填充多边形描绘了原始多边形。凸包用黑色线条显示为蓝色,而 obb 显示为紫色线条。

(编辑)根据要求:交互式版本- 仅在 chrome 中测试

现在我想扩展我的代码来构建一个 OBB 树,而不仅仅是一个 OBB。这意味着我必须切割多边形,并为多边形的每一半计算新的 OBB。

推荐的方法似乎是通过将 OBB 切成两半来切割多边形。但是,如果我将 obb 从其任一轴的中间切开,看起来我将不得不在多边形上创建新顶点(否则我如何找到该分区的凸包?)。

  1. 有没有办法避免添加这样的顶点?
  2. 如果没有,最简单的方法是什么(相对于实施难度)?什么是运行时效率最高的方式?