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

如果您尝试拖动文本并将其约束到框中，请执行以下步骤：

框和文字应该住在同一个地方（都在舞台上）
将拖动代码添加到文本
您已将拖动事件设置为正确，您只需将位置限制在边界内即可。我使用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形状（这是textBounds的大小），因此您不必按文本的实际填充像素
还要考虑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/

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

2 个答案: