我正在使用 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();
});