KineticJS dragBoundFunc 및 전환

Question

dragBoundFunc를 사용하는 경우 새 포인트로 어떻게 전환 할 수 있습니까?

rect = new Kinetic.Rect({ 
     x: 0, 
     y: 0, 
     width: 100, 
     height: 50, 
     id: 'yellow', 
     name: 'rect', 
     fill: 'yellow', 
     stroke: 'black', 
     strokeWidth: 4, 
     draggable: true, 
     dragBoundFunc : function(pos) { 
     return { 
      y : Math.round(pos.y/60)*60, 
      x : this.getX(), 
     } 
    } 
    }); 

가 어떻게이 RECT를 끌어 원활하게 전환 할 수 있습니다 :

이의 내가 이런 dragBoundFunc와 RECT있어 가정 해 봅시다?

편집 : 나는 지금까지 무엇을했는지와 함께 fiddle을 만들었습니다. 보시다시피 rect를 다른 것으로 드래그하면 매끄러운 전환이 수행되어 사용자에게 무슨 일이 일어나고 있는지에 대한 피드백을 제공합니다. 제가 원했던 것은 직각을 드래그 할 때 부드러운 전이의 피드백이었습니다. 즉, 이동 자체가 새로운 위치로의 급격한 이동 대신 전환이되는 것을 의미합니다.

Answer 1

아주 좋은 jsfiddle 지금까지 잘 구조화되어 있습니다. 그래서 당신이 원하는 것은 당신이 가지고있는 dragend 이벤트에 드래그 바인딩 기능 논리를 이동할 수 있습니다 :

dragBoundFunc: function (pos) { 
    return { 
     y: Math.round(pos.y/60) * 60, //<---- move the grid logic to a transition event to be fired on dragend 
     x: this.getX(), 
    } 
} 

당신은 수직 그리드의 움직임을 정의 된 모든 육십 픽셀로 제한한다. dragBoundFunc가 이동을 수직으로 만 허용 한 다음 dragend에서 사각형으로 그리드로 전환되도록해야합니다.

Answer 2

개체를 천천히 드래그하는 것이 좋겠다고 생각하지만 유용 할 것이라고 생각합니다.

끌기 및 전환에는 다른 개념이 사용됩니다.

끌기는 동기식입니다. 사용자가 개입하면 즉시 끌리고 싶습니다.

전환은 비동기식입니다. 바로 전환하지 않으려 고하지만, 시스템은 일정 시간 동안/후에 일정 시간 동안 당신을 위해 일어납니다. 예를 들어 1 초 동안 전환을 설정하면 사용자의 개입없이 1 초 동안 전환이 발생합니다. 자동적 인 것은 비동기라고 생각할 수 있습니다.

일부 애니메이션 효과로 드래그하려면 드래그 기능을 사용하지 말고 여러 가지 마우스 이벤트 조합을 사용하는 것이 좋습니다. mouseclick, mousemove 및 mouseup.

그래도 여전히 유용성에 의문이 있습니다. 당신이 단지 호기심이 있다면, 당신은 시도해보십시오.