如何检查给定的非凸区域是否与给定矩形完全重叠
How to check if a given nonconvex area completely overlaps given rectangle
是否有任何定义明确的算法来检查给定的非凸区域是否与给定矩形完全重叠?两种形状都由折线定义,因此我们正在进行矢量几何。我不想要碰撞检测,只想要完全重叠。
故事如下:我们有一个SVG画布,用户可以在上面放置矩形,可能旋转。画布上存在基本的图层系统(每个矩形都在它自己的图层上)。请求如下:删除一个被其他重叠矩形完全挡在视线之外的矩形。因此,给定矩形以外的矩形形成非凸区域,也可能是非连续的。
目标编程语言是PHP,但欢迎任何语言的解决方案。
您可能需要查看一些空间拓扑套件(例如具有各种端口的 JTS http://www.vividsolutions.com/jts/jtshome.htm)
您可以在多个几何上进行联合/相交等操作,在您的情况下,如果您将复杂的多边形与矩形并集,则结果应该是原始多边形,否则矩形将"偷看"某处。
这并不微妙,但您可以检查对象的任何点是否位于矩形的边界内,如果有的话,它不会完全覆盖它。
我不知道
旋转矩形时会发生什么......但这是我的第一个,我很有可能离得很远。由于这是针对SVG的,所以我正在使用javascript。如果有用,将其移植到 PHP 应该相对简单。
(function(win) {
function Rectangle(el) {
this.element = el;
this._area = ''
Rectangle.instances.push(this);
}
Rectangle.instances = [];
Rectangle.largest = function() {
var areas = Rectangle.collect('area');
var largest_area = Math.max.apply(Math, areas);
return Rectangle.instances[areas.indexOf(largest_area)]
}
Rectangle.collect = function(prop) {
var props = [], m;
for (var i=0, l = Rectangle.instances.length; i<l; i++) {
if (m = Rectangle.instances[i][prop]) {
var val = (typeof m === 'function') ? m.call(Rectangle.instances[i]) : m;
props.push(val);
}
}
return props;
}
Rectangle.prototype.area = function() {
if (!this._area) { this._area = this.element.width * this.element.height; }
return this._area;
}
Rectangle.prototype.overlaps = function(r) {
var origin_inside = r.element.x <= this.element.x && r.element.y <= this.element.y,
ends_inside_x = r.element.x + r.element.width >= this.element.x + this.element.width,
ends_inside_y = r.element.y + r.element.height >= this.element.y + this.element.height;
return origin_inside && ends_inside_x && ends_inside_y
}
rect1 = new Rectangle({width:10, height: 20, x:10, y:30});
rect2 = new Rectangle({width:5, height: 30, x:20, y:40});
rect3 = new Rectangle({width:5, height: 1, x:12, y:31});
console.log(rect2.overlaps(rect1)) //false
console.log(Rectangle.largest().overlaps(rect2)) //false
console.log(rect2.overlaps(rect2)) //true
console.log(rect3.overlaps(rect1)) //true
//to use this with actual SVG elements,
var svgCanvas = document.getElementById('svgElementId');
var ctx = svgCanvas.contentDocument
svgr1 = new Rectangle(ctx.getElementById('rect1'))
svgr2 = new Rectangle(ctx.getElementById('rect2'))
console.log(svgr1.overlaps(svgr2)) //true
})(this);
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 如何检测是否有溢出
- jQuery中是否内置了任何字符串格式化函数
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 测试索引值是否等于某个数字的倍数
- Javascript 检查范围是否重叠
- 检查两个或多个 DOM 元素是否重叠
- 正在检测Html元素是否与另一个Html元件重叠
- 如何检查给定的非凸区域是否与给定矩形完全重叠
- JavaScript 检查时间范围是否重叠
- 是否可以使jQuery单击事件触发播放声音重叠的函数
- 确定一个节点是否与另一个节点重叠
- 是否有可能使整个img可点击,即使它通过z-index与另一个元素重叠
- 测试一个点是否与画布上的一个字符重叠
- 如何检测一个元素是否被另一个元素覆盖/重叠
- 我怎么知道两条线是否重叠?
- 检查时间范围是否重叠,如果为真则触发错误
- 是否有一种有效的方法来测试字符串是否包含非重叠子字符串以匹配正则表达式数组
- 检测元素边界是否与父元素边界重叠