Question

我在约束物体在盒子中的移动时遇到问题。它在附近起作用了，但是当我按下对象（_this.perso）时，会创建一个跳转（与我的角色相比，鼠标的光标已移动。），并且我无法在sliderBoundary的末尾移动它对象。

_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;

Here is a link of the animation

感谢您的帮助，马修（Matthieu）

Answer 1

这是一个非常简单的解决方案：

按下时测量鼠标与对象之间的距离
以该金额抵消新头寸。

EaselJS在鼠标事件上具有不错的localX和localY属性，它们会在鼠标事件上自动为您提供globalToLocal()，以便您知道在当前目标中的哪个位置按下了对象。您可以存储这些值以用作偏移量：

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

请注意，我将Point与setValues一起使用，因为它比带有x / y道具的对象干净一点。

然后在执行pressMove时从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/

希望有帮助！

将对象拖到框中

1 个答案: