如何将数组中的对象保留在数组中的其他对象之间（画布滑块）

Question

我正在使用 kineticjs 制作一个滑块，您可以在其中动态添加更多句柄以获得更多句柄。重要的是把手不能相互交叉。因为重要的是排名顺序仍然相同。

我已经检查了顺序较高的对象是否具有比顺序较低的对象低的 x 值。如果我做了 5 个手柄，最后一个就完美了。如果我从 4 号开始把它放在左边，它会从 4 号开始很好地放在右边。但是，如果我将第 4 个放在第 3 个的左侧，它就会到那里，第 5 个将靠近第 3 个而不是第 4 个这样做。

这怎么可能发生？这个问题有解决办法吗？

container.addEventListener('mouseup', function(e) {
 handles = layer.getChildren();
        for(var m=handles.length; m--;)
        {
            if(m>0)
            {
                if (layer.get('#myRect'+m)[0].getAbsolutePosition().x < layer.get('#myRect'+(m-1))[0].getAbsolutePosition().x)
                {
                    handles[m].setX(layer.get('#myRect'+(m-1))[0].getAbsolutePosition().x + 15);
                }
            }
        }
        layer.draw();
        Update();
    }); 

我发现 layer.getChildren 非常混乱。每次他给这些对象另一个等级。 layer.get('#myRect'+(m-1))[0] 然而更可靠。我保留了 layer.getChildren 以供计数。

编辑：我发现当您将 layer.getChildren 推送到自制数组中时，当您仍然拥有数组选项时它更可靠（layer.getChildren 对于排名顺序不可靠）。

我的设计的问题在于，你可以有一个时刻，你可以同时满足这两个条件。然后他总是做如果那不是你一直想要的。所以我做了一个函数，它计算你的手柄是向右还是向左，然后查看它是否穿过另一个。抱歉解释和代码混乱。

var latestcoordinate = 0;
var newcoordinate = 0;

 container.addEventListener('mousedown', function(e) {
     latestcoordinate = 0;
for (var x = 0; x < array.length; x++) {

    latestcoordinate += parseInt(array[x].getAbsolutePosition().x);
}

 });


 container.addEventListener('mouseup', function(e) {
     newcoordinate = 0;
     for (var x2 = 0; x2 < array.length; x2++) {
        newcoordinate += parseInt(array[x2].getAbsolutePosition().x);
    }

        for(var m=array.length; m--;)
        {
            if(m<array.length-1 && newcoordinate < latestcoordinate)
            {
                if (array[m].getAbsolutePosition().x < array[m+1].getAbsolutePosition().x)
                {
                    array[m].setX(array[m+1].getAbsolutePosition().x + 15);
                }
            }
            if(m>0  && newcoordinate > latestcoordinate)
            {
                if (array[m].getAbsolutePosition().x > array[m-1].getAbsolutePosition().x)
                {
                    array[m].setX(array[m-1].getAbsolutePosition().x - 15);
                }
            }

        }
        layer.draw();
        Update();
    }); 

Answer 1

这不是解决方案，但我认为您想从 for 循环中添加一个转义或使其成为“for in”循环

    for(var m=handles.length; m--;)
    {
        if(m>0)  // <--- why isn't this clause in the for loop logic?
        {
            if (layer.get('#myRect'+m)[0].getAbsolutePosition().x < layer.get('#myRect'+(m-1))[0].getAbsolutePosition().x)
            {
                handles[m].setX(layer.get('#myRect'+(m-1))[0].getAbsolutePosition().x + 15);
            }
        }
        else
           break;
    }