KineticJS dragBoundFunc和轉換

如果使用dragBoundFunc，可以如何（如果有的話）使用到新點的轉換？KineticJS 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到目前爲止我所做的。正如您所看到的，如果您將矩形拖放到另一個矩形上，它們將執行平滑過渡，從而向用戶提供有關正在發生的事情的反饋。我想要的是拖拉矩形時平滑過渡的反饋，這意味着移動本身是一個過渡，而不是突然跳到新位置。

來源

2013-02-24 causa prima

迄今爲止非常漂亮的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網格。

來源

2013-02-25 00:55:06 SoluableNonagon

謝謝！雖然這不是我最初想要的，但它仍然可以完成這項工作。我已經把這個方法的結果放在了一個新的小提琴上：http://jsfiddle.net/qur6F/ – 2013-02-25 15:08:17

我想你想要的是慢慢地拖動一個對象，但我不知道那會有用。

拖動和轉換使用不同的概念。

拖動是同步的，您希望它在您的干預中立即發生。

轉換是異步的，您希望它不是馬上發生，但系統會在一段時間之後爲您發生。例如，如果您將轉換設置爲一秒，則無需您的干預就會發生一秒鐘的時間。你可以認爲自動是異步的。

如果你想拖動一些動畫效果，我會建議不要使用拖動功能，而是使用幾種鼠標事件的組合; mouseclick，mousemove和mouseup。

雖然我仍然懷疑它的用處。如果你只是好奇，你試試。

來源

2013-02-24 17:35:04 allenhwkim

謝謝你的回答，我已經在原帖中澄清了自己。 – 2013-02-24 23:05:20

KineticJS dragBoundFunc和轉換

回答

相關問題