首页新闻找找看学习计划

多标签排列避免重叠算法

0
悬赏园豆:100 [待解决问题]

如图所示,页面里需要排版很多标签,但是很多标签重叠在一起,看起来很混乱(图A)

我想让标签的分布变成图B的样子,可以旋转一定角度并且不出现重叠;
或者干脆忽略一部分标签不显示(图C),

请问要达到图B或图C的效果,应该怎么计算标签的位置和旋转角度来排列它们,又怎么计算哪一个标签应该被忽略不显示呢?

重叠的定义:

避免重叠后的效果:

逐影的主页 逐影 | 小虾三级 | 园豆:998
提问于:2019-12-19 19:10
< >
分享
所有回答(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 的长度
    }
}
zanetti | 园豆:154 (初学一级) | 2019-12-20 01:49

谢谢你这么晚了还如此详细的解答,我之前搜过很多资料,都是关于这方面的理论,但是代码实现似乎没发现

支持(0) 反对(0) 逐影 | 园豆:998 (小虾三级) | 2019-12-20 09:51

@逐影: 别客气,我看到你的问题就想了想。我还没在工作中遇到这么难的问题呢,大神们可能没把代码贡献出来吧。祝你早日攻克难关!

支持(0) 反对(0) zanetti | 园豆:154 (初学一级) | 2019-12-21 00:16
0

这是要在这道题中找到解决方法吗 ,弱弱的想问你遇到的需求是什么

亲吻冰封火焰 | 园豆:243 (菜鸟二级) | 2019-12-23 17:22

假设在地图里有很多坐标点,XX大厦,XX广场,XX饭店等等,要在地图上显示它们的名称以及基本信息,这样它们的坐标或者信息展示框难免会重叠,影响阅读

支持(0) 反对(0) 逐影 | 园豆:998 (小虾三级) | 2019-12-23 18:37
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册