停止画布上边界内的文本对象的拖动

我想使用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

停止画布上边界内的文本对象的拖动

回答

相关问题