Question

我正在制作一个圆圈周围有许多项目的图表。对于每个项目，我有一个弧度，允许我把它放在正确的位置 - 但我有重叠，我想把项目展开，但让它们保持在原始位置附近（尽可能接近）。

为避免重叠，每个项目必须与任何相邻项目至少相差7度。圈子周围的所有物品总会有足够的空间 - 最多20个物品，每个物品可能有18度的分离（不会发生这种情况），但我很可能会在一个区域中聚集最多6或8个项目，可能还有多个聚类。

大多数情况下，我会有10到12件物品，但为了方便说明 - 让我说我有5个物品相隔1度：[1,2,3,4,5]。理想情况下，结果将是[349,356,3,10,17] - 每个项目与项目3保持不变的任何其他项目相差7度，但所有项目尽可能保持在原始位置附近。

当然，当我有20件物品出现时 - 我冒险将物品移到另一件物品上。举一个类似的例子：[340,1,2,3,4,5]。与上述相同 - 除了移动1到346将导致另一个重叠。

鉴于项目弧度的完整列表，有没有人知道一种方法来完成我想要做的事情？

我似乎无法弄清楚如何实现它。

Answer 1

我用不同的方法解决了你的问题。

这个想法是一次一个地向圆圈添加对象每个对象都定义了它周围的碰撞区域。

添加新对象时，会检查是否与现有对象发生冲突如果发生碰撞，新对象将添加到“碰撞组”中，其中包含需要相对位置调整的所有对象，以避免相互重叠。
如果未检测到重叠，则会创建仅包含新对象的新碰撞组。

接受一个新物体后，一个组将覆盖以其物体重心为中心的圆的一部分，并且足够宽以容纳所有物体而没有重叠。

每次碰撞组增长时，都会检查所有其他组是否有重叠，并与检测到的第一个交叉组合并。
结果组重复该过程，直到不再进行合并为止。

添加完所有对象后，将在每个组中计算位置调整以均匀分布对象。

查看小提琴here

var CollisionResolver = function (radius)
{
    this.radius = radius || 3.5; // degrees
    this.groups = [];
    this.collision = {};
    this.objects = {};
    this.num_obj = 0;
}

CollisionResolver.prototype = 
{
    // add an object to the circle
    add: function (obj)
    {
        function sort_group ()
        {
            group.elem.sort(function(a,b) {return a.pos>b.pos; });
            var middle = 0;
            for (var i = 0; i != group.elem.length ; i++) middle += group.elem[i].pos;
            middle /=  group.elem.length;
            var range = this.radius * group.elem.length;
            group.min = middle-range;
            group.max = middle+range;

            // see if the expanded group now overlaps another
            for (var g = 0 ; g != this.groups.length ; g++)
            {
                var group2 = this.groups[g];
                if (group2 == group) continue;
                for (var offset = 0 ; offset <720 ; offset += 360)
                {
                    if (  (group2.max+offset > group.min)
                       && (group2.min+offset < group.max))
                    {
                        // merge groups
                        for (var i = 0 ; i != group2.elem.length ; i++)
                            group2.elem[i].pos += offset;
                        group.elem = group.elem.concat(group2.elem);
                        this.groups.splice (g, 1);

                        // try again with the merged group
                        sort_group.call (this,group);
                        return;
                    }
                }
            }
        }

        // store the object
        obj.id = this.num_obj;
        this.objects[this.num_obj++] = obj;

        // see if the object falls within a collision group
        for (var g in this.groups)
        {
            var group = this.groups[g];
            for (var offset = 0 ; offset <720 ; offset += 360)
            {
                if (  (obj.pos+offset+this.radius > group.min)
                   && (obj.pos+offset-this.radius < group.max))
                {
                    // insert the object into the collision group
                    obj.pos += offset;
                    group.elem.push (obj);
                    sort_group.call (this, group);
                    return;
                }
            }
        }

        // create a new singleton collision group
        var group = { 
            elem: [obj],
            min :obj.pos-this.radius,
            max :obj.pos+this.radius };
        this.groups.push (group);
    },

    resolve: function ()
    {
        // spread the objects inside each group
        var groups = this.groups;
        for (var i = 0 ; i != groups.length ; i++)
        {
            var group = groups[i];
            for (var o = 0 ; o != group.elem.length ; o++)
            {
                group.elem[o].pos = (group.min + (2*o+1) * this.radius + 360) % 360;
            }
        }

        // return the positions
        var res = [];
        for (var i = 0 ; i != this.num_obj ; i++) res.push (this.objects[i].pos);
        return res;
    }
}

function spread (positions, radius)
{
    var collider = new CollisionResolver (radius);

    // initialize object positions
    for (var i = 0; i != positions.length ; i++)
    {
        collider.add ({ pos:positions[i]} );
    }

    // resolve collisions
    return collider.resolve();  
}

边缘仍然有点粗糙（我不太确定360° - > 0过渡处理真的是万无一失），但它似乎在大多数情况下都能完成。我认为这足以证明概念。

此算法不强制要求原始位置和调整位置之间的最大（角度）距离。另一方面，只要有足够的空间将所有物体装入圆圈，它就保证不会重叠。

Answer 2

从您的商品中构建一个{item，itemAngle，itemDisplayAngle}数组最初将itemDisplayAngle设置为itemAngle 按itemAngle对数组进行排序然后循环穿过阵列，如果两个连续项目之间的距离小于7，如果没有拍摄房间，则将项目7向右移动。注意，距离必须是％360，如果角度+7> 1，你必须注意阵列的第一项。 360.
重复上述步骤，直到没有进行任何操作。

编辑：为了获得最小的差价，解决方案非常相似，只是稍微难以解释一下：如果差价<7，那么你必须将每个项目移动（7 - 当前价差）/ 2 。
但是当然你必须检查你可以，你现在可以在左边和右边移动物品。我认为如果你不能使用半展，你应该测试你是否可以向右移动项目，或者向左移动项目。这样您就可以获得最佳位置。

算法在靠近起始位置的圆圈周围传播项目

2 个答案: