多标签排列避免重叠算法
0
悬赏园豆：100
[待解决问题]
如图所示，页面里需要排版很多标签，但是很多标签重叠在一起，看起来很混乱(图A)
我想让标签的分布变成图B的样子，可以旋转一定角度并且不出现重叠；
或者干脆忽略一部分标签不显示(图C)，
请问要达到图B或图C的效果，应该怎么计算标签的位置和旋转角度来排列它们，又怎么计算哪一个标签应该被忽略不显示呢？
重叠的定义：
避免重叠后的效果：
所有回答(2)
0
好复杂呀！我只是想了想两个元素碰撞的情况，想用移动的方式解决。后面的我就无能为力了……
//碰撞检测
function collision(dragEl, hitEl){
let x1 = 0;
let y1 = 0;
let x2 = 0;
let y2 = 0;
let distance = [];
let dragRight = dragEl.getBoundingClientRect().right;
let hitLeft = hitEl.getBoundingClientRect().left;
let dragBottom = dragEl.getBoundingClientRect().bottom;
let hitTop = hitEl.getBoundingClientRect().top;
let dragLeft = dragEl.getBoundingClientRect().left;
let hitRight = hitEl.getBoundingClientRect().right;
let dragTop = dragEl.getBoundingClientRect().top;
let hitBottom = hitEl.getBoundingClientRect().bottom;
if(dragRight >= hitLeft){
x1 = dragRight - hitLeft;
distance.push(x1);
}
if(dragBottom >= hitTop){
y1 = dragBottom - hitTop;
distance.push(y1);
}
if(dragLeft <= hitRight){
x2 = hitRight - dragLeft;
distance.push(x2);
}
if(dragTop <= hitBottom){
y2 = hitBottom - dragTop;
distance.push(y2);
}
if(distance.length === 0){
//没碰撞
return false;
}
//判断横向移动
if(distance[0] < distance[2]){
//dragEl 向左移动 distance[0] + 1 的长度
}else{
//dragEl 向右移动 distance[2] + 1 的长度
}
//判断纵向移动
if(distance[1] < distance[3]){
//dragEl 向上移动 distance[1] + 1 的长度
}else{
//dragEl 向下移动 distance[3] + 1 的长度
}
}谢谢你这么晚了还如此详细的解答，我之前搜过很多资料，都是关于这方面的理论，但是代码实现似乎没发现
@逐影: 别客气，我看到你的问题就想了想。我还没在工作中遇到这么难的问题呢，大神们可能没把代码贡献出来吧。祝你早日攻克难关！
0
这是要在这道题中找到解决方法吗 ，弱弱的想问你遇到的需求是什么
假设在地图里有很多坐标点，XX大厦，XX广场，XX饭店等等，要在地图上显示它们的名称以及基本信息，这样它们的坐标或者信息展示框难免会重叠，影响阅读
