остановить перетаскивание текстового объекта в пределах границы на холсте

Question

Я хочу переместить свой текстовый объект в прямоугольник на холсте с помощью easeljs. Я хочу, чтобы текстовый объект переставал двигаться, как только он касался границы прямоугольника. Как я могу сделать это в 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(); 

Мой Dragger код выглядит так до сих пор:

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/