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

Question

我想使用 easeljs 在 canvas 上的矩形内移动我的文本对象。我希望文本对象在触及矩形边界后立即停止移动。我怎样才能在 easeljs 中做到这一点？或者更好地使用另一个框架？还是分层 canvases?

我在 canvas 厕所的矩形边界是这样的：

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)) 来做这个。

这是一个有效的修改示例。此版本将文本的 "position" 限制在框中。这意味着它将绘制在底部和右侧的框外。 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.x/y 以便您可以使用其他文本对齐方式。此演示假定文本是从 top/left.

希望对您有所帮助。

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 事件中检查 max/min 边界时只需考虑这个转换点：

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/

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

stop drag of text object within boundary on canvas

drag-and-drop

html5-canvas

easeljs

createjs