KineticJS dragBoundFunc и переход

Question

Если вы используете dragBoundFunc, то как (если вообще) можно использовать переход к новой точке?

Скажем, у меня есть прямоугольник с 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(), 
     } 
    } 
    }); 

Как я могу иметь плавный переход, когда тащил этот прямоугольник?

Редактировать: Я создал fiddle с тем, что я сделал до сих пор. Как вы можете видеть, если вы перетаскиваете прямоугольник на другой, они выполняют плавный переход, дающий обратную связь пользователю о том, что происходит. Я хочу, чтобы эта обратная связь плавного перехода также при перетаскивании прямоугольника означала, что сам ход - это переход, а не резкий переход к новой позиции.

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

Я думаю, что вы хотите медленно перемещать объект, но мне интересно, как это было бы полезно.

Перетаскивание использует другую концепцию.

Перемещение синхронно, что вы хотите, чтобы это произошло сразу с вашим вмешательством.

Переход асинхронный, который вы хотите, чтобы это произошло не сразу, но система делает это для вас после/в течение определенного периода времени. Например, если вы установите переход на одну секунду, это произойдет в течение одной секунды без вашего вмешательства. Вы можете думать, что любое автоматическое является асинхронным.

Если вы хотите перетащить с некоторым эффектом анимации, я бы рекомендовал не использовать функцию перетаскивания, а использовать несколько комбинаций событий мыши; mouseclick, mousemove и mouseup.

Я все еще сомневаюсь в его полезности. Если вам просто интересно, вы пытаетесь.