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

Question

我想使用画架在画布上的矩形内移动我的文本对象。我希望文本对象在触及矩形边界后立即停止移动。我怎样才能在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();

提前感谢任何帮助或正确方向的指示。

Answer 1

我重新调整了您的示例的用途，使其可以在 jsfiddle.net 中使用，但我不知道这是否是您的想法。 http://jsfiddle.net/lannymcnie/xrqatyLs

如果您尝试拖动文本并将其约束到框，以下是我采取的步骤：

1. 框和文本应位于同一位置（都在舞台上）
2. 改为将拖动代码添加到文本中
3. 您已经正确设置了拖动事件，您只需将位置限制在边界内。我使用Math.max(min, Math.min(max, val)) 来做到这一点。

这是一个有效的修改示例。此版本将文本的“位置”限制在框中。这意味着它将在底部和右侧的框外绘制。 http://jsfiddle.net/lannymcnie/xrqatyLs/1/

要限制整个内容，请从“最小”位置减去文本大小。 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();  
});

我会做一些额外的事情来做得更好：

1. 存储第一次按下时的鼠标偏移量，并在移动时从鼠标位置中减去该值。这将使项目从您按下它的位置拖动，而不是捕捉到左上角
2. 在文本上添加一个 hitArea 形状（即 textBounds 的大小），这样您就不必按下文本的实际填充像素
3. 还要考虑textBounds.x/y，这样您就可以使用其他文本对齐模式。此演示假定文本是从顶部/左侧绘制的。

希望对您有所帮助。

Answer 2

很好的答案。有关信息，要解决附加点 1，请检索在 mousedown 事件中选择目标的点并将其设置为变换点：

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/