私はkineticjsを使用してスライダーを作成しています。このスライダーでは、ハンドルを動的に追加して、ハンドルを増やすことができます。重要なのは、ハンドルが互いに交差してはならないということです。ランクの順序が同じであることが重要だからです。
順番が高いオブジェクトのx値が、順番が1つ低いオブジェクトよりも低いかどうかをチェックするものを作成しました。5つのハンドルを作成した場合、最後のハンドルは完璧に機能します。4日から左に落とすと4日から右にうまく収まります。しかし、3番目の左側に4番目を配置すると、そこに移動し、4番目がそれを行う代わりに5番目が3番目のすぐ近くに配置されます。
どのようにそれが起こることができますか?この問題の解決策はありますか?
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はランク順の信頼性がありません)。
私のデザインの問題は、もしあなたが両方に当てはまる瞬間を持つことができるということです。その後、彼は常にifを実行し、それはあなたが常に望んでいることではありません。そこで、ハンドルが右か左かを計算し、別のハンドルを横切るかどうかを調べる関数を作成しました。面倒な説明とコードでごめんなさい。
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();
});