Question

我有一个带矩形的数组。我有另一个数组与那些重叠的矩形。我花了好几个小时试图计算如何遍历数组并找到重叠rec的新y位置，我脑子里有一个很大的错误....

我只能在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;}

}

我在我的保管箱上提供了一个文件，看起来如何:-(（不允许在这里分享）

https://www.dropbox.com/s/3gmp16ymf0j2kvm/canvas.png

Answer 1

假设矩形表示为这个：

{ "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是行之间间隙的像素大小。

对我来说，你可以用这种方式优化甘特图（对我来说似乎是Gantt chart）：

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;
            }
        }
    }
}

免责声明：我没有对代码进行测试，但它应该可以解决最终的语法错误和故障。

数组中重叠的矩形

1 个答案: