数组中重叠的矩形
Overlapping rectangles in a array
我有一个矩形数组。我有另一个有重叠矩形的数组。我花了几个小时试图找出如何循环通过数组,并找到一个新的y-位置重叠的rec,我有一个大bug在我的脑海....
我只能在y轴上移动,因为x依赖于日期尺度。我真的很感激一些代码示例。这些矩形的大小不等。
数据的例子:"people": [
{ "firstName":"John" , "startDate":"2012-01-01", "endDate":"2014-01-01", "basketValue":"10"},
{ "firstName":"Anna" , "startDate":"2011-01-01", "endDate":"2013-04-01", "basketValue":"20" },
{ "firstName":"Victor" , "startDate":"2011-01-01", "endDate":"2013-04-01", "basketValue":"13" },
{ "firstName":"Tom" , "startDate":"2011-01-01", "endDate":"2012-07-01", "basketValue":"20" },
{ "firstName":"Santa" , "startDate":"2011-01-01", "endDate":"2012-12-24", "basketValue":"20" },
{ "firstName":"Peter" , "startDate":"2012-01-01", "endDate":"2012-02-21", "basketValue":"4" }
{ "firstName":"Carol" , "startDate":"2013-01-01", "endDate":"2013-07-05", "basketValue":"14" }
{ "firstName":"Sophie" , "startDate":"2012-09-01", "endDate":"2012-12-24", "basketValue":"8" }
]
while(loop){
//overlappingRects array with those that overlaps
newY= overlappingRects[0].y+overlappingRects[0].barHeight + newY;
log(newY);
//this my logic error arrRec holds all of the recs
for(j=0;j<arrRec.length;j++){
if(arrRec[j].Name!==overlappingRects[0].Name){
log(overlappingRects[0].Name + ' ' + arrRec[j].Name);
//How do I solve this that it not overlap with the other surounding rects
overlap = rectOverlap(overlappingRects[0],arrRec[j]);
if(overlap==false){
//check for date...
overlappingRects[0].y = arrRec[j].y;
overlappingRects[0].endY = overlappingRects[0].barHeight + overlappingRects[0].y;
arrRec[overlappingRects[0].key].y =overlappingRects[0].y;
arrRec[overlappingRects[0].key].endY=overlappingRects[0].endY;
overlappingRects.splice(0,1);
break;
}
}
}
}
if(overlappingRects.length==0 ){loop=false;}
}
我已经在我的dropbox上提供了一个文件,关于它的外观:-((不允许在这里分享)
https://www.dropbox.com/s/3gmp16ymf0j2kvm/canvas.png假设矩形是这样表示的:
{ "position": {"x": <x coord>, "y": <y coord>},
"width": <pixel value>,
"height": <pixel value>
}
算法应该很简单:
- 将矩形按左上角排序。
- 从第二个矩形开始,检查它是否与前一个矩形重叠
- 如果重叠,将矩形坐标的y值更改为移除重叠 所需的最小值
- 重复直到最后一个矩形位置固定。
重叠的测试很简单:previous.position.y + previous.height > current.position.y
你可以用类似的方法改变位置:current.position.y = previous.position.y + previous.height + gap
,其中gap为行间距的像素大小。
对我来说,你可以这样优化甘特图(对我来说它似乎是一个甘特图):
bar.sort(function(a,b) {
var y = (a.position.y - b.position.y);
return y?y:a.position.x - b.position.x;
});
for (i=1; i<bar.length; i++) {
bar[i].position.y = bar[i-1].position.y + bar[i-1].height + gap;
}
这是第一次尝试,这个算法的问题是每条线只有一个矩形。为了获得紧凑视图,我们需要考虑矩形的x位置。
我们可以把事情弄复杂一点:
var gap = {"x": 2, "y": 5};
bar.sort(function(a,b) {
var y = (a.position.y - b.position.y);
return y?y:a.position.x - b.position.x;
});
for (i=1; i<bar.length; i++) {
for (j = i-1; j>=0; j--) {
safe = {
"y": bar[j].position.y + bar[j].height + gap.y,
"x": bar[j].position.x + bar[j].width + gap.x
};
if (bar[i].position.y <= safe.y) { // the rects can overlap
if (bar[i].position.x <= safe.x) { // the rects do overlap
bar[i].position.y = safe.y;
}
}
}
}
免责声明:我还没有测试过代码,但它应该可以消除最终的语法错误和故障。
相关文章:
- 如何在映射数组中添加换行符
- javascript结合了数组和字典
- 需要帮助设置json数组
- 不能从angular2中的子组件指定父组件中的数组
- 使用JS将数组转换为json对象
- 数组在递归方法中设置为null
- knockoutjs可观察数组
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- 将数组从PHP传递到Javascript
- JavaScript数组排序(函数)用于对表行进行排序,而不是排序
- 在函数中添加数组元素的数值
- 无法通过数组映射绑定
- javascript中的数组出错
- 如何使用 node.js 比较两个 json 数组
- Javascript(Angular)从一个对象数组到第二个数组查找值
- 根据id将json数组组合为一个json数组
- 合并具有重叠值的数组
- 查找范围数组中的重叠部分,并使用新的分块范围构建一个新数组
- 是否有一种有效的方法来测试字符串是否包含非重叠子字符串以匹配正则表达式数组
- 数组中重叠的矩形