停止畫布上邊界內的文本對象的拖動

我想使用easeljs將我的文本對象移動到畫布上的矩形內。我希望文本對象一接觸到矩形邊界就停止移動。我怎樣才能在畫架上做到這一點？或者更好的使用另一個框架？還是分層帆布？在畫布上洛斯這樣停止畫布上邊界內的文本對象的拖動

我的矩形邊界：

var textBoundary = new createjs.Shape(); 
textBoundary.graphics.beginStroke("#999"); 
textBoundary.graphics.setStrokeStyle(1); 
textBoundary.snapToPixel = true; 
textBoundary.graphics.drawRect(82, 130, 149, 240); 
textBoundary.setBounds(82, 130, 149, 240); 
stage.addChild(textBoundary); 

stage.update();

我的牽引機代碼看起來像這樣直到如今

var textFront = new createjs.Text(); 
var t = document.getElementById("TextInput1").value; 
textFront.text = t; 

var draggerFront = new createjs.Container(); 
draggerFront.x = 160; 
draggerFront.y = 130; 
draggerFront.addChild(textVorne,tb); 
stage.addChild(draggerFront); 

draggerFront.on("pressmove",function(evt) { 
    evt.currentTarget.x = evt.stageX ; // here I have no idea what to 
    evt.currentTarget.y = evt.stageY ; // do when the dragger reaches 
    draggerFront.mouseMoveOutside = false; // boundary 
    stage.update(); 
}); 

stage.update();

預先感謝任何幫助或指針在正確的方向。

來源

2015-09-22 Bobby Solo

我改變了你的例子，所以它在jsfiddle.net工作，但我不知道它是否是你的想法。 http://jsfiddle.net/lannymcnie/xrqatyLs

如果您嘗試拖動文本，並將其約束到框，這裏是我採取的步驟：

的框和文本應該住在同一個地方（臺上臺下）
將拖動代碼添加到文本
您已將拖動事件設置正確，您只需將位置約束在邊界內。我用Math.max(min, Math.min(max, val))來做到這一點。

這是一個修改後的示例。該版本將文本的「位置」限制在框中。這意味着它將在底部和右側的框外畫出來。 http://jsfiddle.net/lannymcnie/xrqatyLs/1/

要約束整個事情，從「min」位置減去文本大小。 http://jsfiddle.net/lannymcnie/xrqatyLs/2/

textFront.on("pressmove",function(evt) { 
    evt.currentTarget.x = Math.max(bounds.x, Math.min(bounds.x+bounds.width-textBounds.width, evt.stageX)); 
    evt.currentTarget.y = Math.max(bounds.y, Math.min(bounds.y+bounds.height-textBounds.height, evt.stageY)); 
    stage.update(); 
});

了一些其他的事情，我會做更好的在做：

存儲鼠標，當你第一次按偏移，並從鼠標的位置減去該值，當你移動。這會使項目從您按下的位置拖動，而不是捕捉到左上角
將一個hitArea形狀添加到Text（這是textBounds的大小），因此您不必按實際填充的像素的文字
另請考慮textBounds.x/y，以便您可以使用其他文字對齊模式。此演示假定文本從頂部/左側進行繪製。

希望有所幫助。

來源

2015-09-23 15:48:54 Lanny

輝煌，正是我所期待的。學習的好例子，使從Flash到CreateJS的過渡變得更加容易。我仍然不能在這裏投票，因此評論。謝謝。 –

如何在旋轉或縮放時使其工作，如果文本是旋轉的，即'textFront.rotation = 90;' - 它不再工作。 – supersan

很好的答案。對於信息，解決更多的點1檢索點目標在鼠標按下事件選擇並設置爲轉換點：

textFront.on("mousedown", function(e) { 
    var localToTrack = e.currentTarget.globalToLocal(e.stageX, e.stageY); 
    e.currentTarget.regX = localToTrack.x; 
    e.currentTarget.regY = localToTrack.y; 
});

然後在pressmove事件檢查最大的時候只是把這個轉換點進去/最小範圍：

textFront.on("pressmove",function(evt) { 
    evt.currentTarget.x = Math.max(bounds.x + evt.currentTarget.regX, 
     Math.min(bounds.x + bounds.width - textBounds.width + evt.currentTarget.regX, evt.stageX)); 

    evt.currentTarget.y = Math.max(bounds.y + evt.currentTarget.regY, 
    Math.min(bounds.y + bounds.height - textBounds.height + evt.currentTarget.regY, evt.stageY)); 

    stage.update(); 
});

現在文本將從鼠標點擊的位置拖動，以實現更平滑的交互。 https://jsfiddle.net/poc275/uabLpomh/

來源

2016-02-08 21:31:24 Poc275

請注意，您可以使用'localX'和'localY'，而不是自己計算它們：'e.currentTarget.regX = e.localX;' – Lanny

感謝@Lanny。我對Easel.js很陌生！ – Poc275

停止畫布上邊界內的文本對象的拖動

回答

相關問題