Перетащите объект в поле - PullRequest
Новая
       35

Перетащите объект в поле

0 голосов
/ 25 июня 2018

У меня проблема с ограничением перемещения объекта в коробке. Он работает немного ближе, но когда я нажимаю на свой объект (_this.perso), создается скачок (курсор моей мыши смещен по сравнению с моим персонажем ..), и я не могу переместить его в конце моего слайдера. Граница объект. 

_this = this;
stage.enableMouseOver();
createjs.Touch.enable(stage);
_this.perso.cursor = "pointer";

//XY
var bounds = {x:150, y:90, width:1600, height: 600};  

//REC
var sliderBoundary = new createjs.Shape();    
sliderBoundary.graphics.beginStroke("#999").setStrokeStyle(2).drawRect(bounds.x, bounds.y, bounds.width, bounds.height);  
this.stage.addChild(sliderBoundary);    
//sliderBoundary.alpha=0;

//D&G
_this.perso.addEventListener("pressmove", dragCon);  
function dragCon(evt) {  
    evt.currentTarget.x = Math.max(bounds.x, Math.min(bounds.x + bounds.width, evt.stageX));
}  

_this.perso.x = bounds.x;  
_this.perso.y = bounds.y + bounds.height / 2;

Вот ссылка на анимацию

Спасибо за вашу помощь, Матье

1 Ответ

0 голосов
/ 25 июня 2018

Это довольно простое решение:

  1. Измерьте расстояние между мышью и объектом при нажатии
  2. Смещение новой позиции на эту сумму.

EaselJS имеет приятные свойства localX и localY для событий мыши, которые автоматически дают globalToLocal() для события мыши, чтобы вы знали, где в текущей цели был нажат объект. Вы можете сохранить эти значения для использования в качестве смещения: 

var offset = new createjs.Point();
perso.addEventListener("mousedown", function(e) {
    offset.setValues(e.localX, e.localY);
});

Обратите внимание, что я использовал Point с setValues, поскольку он немного чище, чем объект с x / y подпорками.

Затем просто вычтите это значение из stageX, когда вы делаете нажатие

. 
function dragCon(evt) {  
    var x = evt.stageX - offset.x;
    evt.currentTarget.x = Math.max(bounds.x, Math.min(bounds.x + bounds.width, x));
}

Вот скрипка: https://jsfiddle.net/3my1wn4v/

Надеюсь, это поможет!

...