배열의 다른 객체간에 배열의 객체를 유지하는 방법 (캔버스 슬라이더)

Question

더 많은 핸들을 얻기 위해 더 많은 핸들을 동적으로 추가 할 수있는 kineticjs 슬라이더를 만들고 있습니다. 중요한 점은 핸들이 서로 교차하지 않을 수도 있다는 것입니다. 왜냐하면 순위의 순서는 여전히 동일해야하기 때문입니다.

높은 순서의 개체가 낮은 순서의 개체보다 낮은 x 값을 갖는지 확인했습니다. 핸들 5 개를 만들면 마지막 핸들이 완벽하게 작동합니다. 4 위부터 왼쪽으로 떨어 뜨리면 4 위에서 오른쪽으로 치울 것입니다. 그러나 3 위 왼쪽에 4 위를 놓으면 바로 그곳으로 갈 것이고 5 위는 4 위가 대신 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은 순위 순서에 신뢰할 수 없습니다).

내 디자인의 문제점은 두 가지 모두에 사실이있는 순간을 가질 수 있다는 것입니다. 그렇다면 그는 항상 당신이 원하는 것이 아니라, 항상 그렇습니다. 그래서 핸들이 오른쪽 또는 왼쪽으로 이동 한 다음 다른 핸들을 가로 지르는지를 계산하는 함수를 만들었습니다. 지저분한 설명과 코드를 유감스럽게 생각합니다.

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(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; 
    }