EaselJS:拖放出现故障

6
我有一个容器里面包含了一张位图。当我拖动容器时,光标变成了文本编辑的形状,同时图像会跳到光标的右下角(就好像我从左上角握住图像并将其拖动)。
以下是我的代码,你可以看到我已经阅读了相关文档:
function createIcon(imgPath) {
    var image = new Image();
    image.onload = function () {
        var img = new createjs.Bitmap(event.target)

        var con = new createjs.Container();
        con.x = 160;
        con.y = 100;
        con.addChild(img);
        stage.addChild(con);

        con.on("pressmove", function(evt) {
            evt.currentTarget.x = evt.stageX;
            evt.currentTarget.y = evt.stageY;
            stage.update();
        });

        stage.update();
    }

    image.src = imgPath;
}

有什么想法是错的吗?
3个回答

6
为了防止跳跃,您需要在pressmove之前添加一个额外的步骤:
con.on('mousedown', function(evt) {
    var ct = evt.currentTarget,
        local = ct.globalToLocal(evt.stageX, evt.stageY),
        nx = ct.regX - local.x,
        ny = ct.regY - local.y;
    //set the new regX/Y
    ct.regX = local.x;
    ct.regY = local.y;
    //adjust the real-position, otherwise the new regX/Y would cause a jump
    ct.x -= nx;
    ct.y -= ny;
});

这将把新的regX/Y设置为当前鼠标位置,以防止形状/图像跳动。

对于光标: 您可以通过CSS进行设置:

canvas {
    cursor: default !important; /* in this case you couldn't set any other cursor via EaselJS though */
}

或者您可以通过EaselJS设置此项:http://www.createjs.com/Docs/EaselJS/classes/DisplayObject.html#property_cursor

(注:该链接是英文内容,需要在网页中进行翻译)
con.cursor = "default"; //or 'pointer'...or whatever cursor you want it to be
// you have to activate enableMouseOver though on the stage for this to work

谢谢!有关光标进入文本编辑模式的任何提示吗? - Mossi
谢谢你的快速修复!有什么想法,为什么一开始会出现这种情况?我猜是因为框架还在开发中?此外,为什么Easel网站上没有记录这些内容?我使用了他们的确切脚本,结果就是我上面的问题。 - Mossi
1
光标的变化通常取决于浏览器。大多数浏览器的默认行为是,如果你按住鼠标并移动它,浏览器会期望你选择某些内容以复制它(-> 因此是文本选择光标)。有些浏览器不区分画布或文本上的按下移动事件。EaselJS 默认情况下不这样做,因为它无法知道你的项目需要什么。另外,con.cursor = ... 的解决方案需要更多的性能,这样的权衡应该由开发人员决定。 - olsn

5
虽然@olsn提供的解决方案绝对可行,但使用regX/regY来偏移对象以适应当前鼠标位置可能会导致在随后转换对象时出现困难。
例如,如果您想要将对象围绕其中心旋转,则需要将regX/regY重置为对象宽度/2和对象高度/2。这将重新引入故障,尽管在对象操作的较晚阶段。
考虑到这种情况,我喜欢避免使用regX/regY来防止拖动故障。
或者,我会在dragstart上记录鼠标位置,并在拖动时测量鼠标移动。通过将此移动应用于对象的x/y位置,对象将似乎随鼠标移动而移动,模拟拖动。
此fiddle和以下代码所示:
function enableDrag(obj) {
  obj.on("mousedown", dragstart);
  obj.on("pressmove", drag);
};

function dragstart(evt) {
  dragging = false;
}

function drag(evt) {
    // register object starting point and mousedrag (stage) starting point
  if (!dragging || !dragging.startCoords || !dragging.stageCoords) {
    dragging = evt.currentTarget;
    dragging.startCoords = {x: dragging.x, y: dragging.y};
    dragging.stageCoords = {x: evt.stageX, y: evt.stageY};
  }

  // calculate mouse offset after move, relative to starting point, subtract this movement from object coords (move)
  dragging.stageMove = {x: dragging.stageCoords.x - evt.stageX, y: dragging.stageCoords.y - evt.stageY};
  dragging.objectMove = {x: dragging.startCoords.x - dragging.stageMove.x, y: dragging.startCoords.y - dragging.stageMove.y};

  // apply movement to object
  evt.currentTarget.x = dragging.objectMove.x;
  evt.currentTarget.y = dragging.objectMove.y;

  stage.update(); //update stage without passing through ticker for higher FPS
}

这对我来说非常有效.... - Prisoner ZERO

1
我的解决方案
(function(t, n) {
        layer.addEventListener('mousedown', function(evt) {
            var offset = {
                    x: t.x - evt.stageX,
                    y: t.y - evt.stageY
                }

        t.addEventListener("pressmove", function(e2){

                        t.x =  offset.x + e2.stageX;
                        t.y =  offset.y + e2.stageY;
                        app.stage.update();

        })



    });


     })(layer, i);

其中 layer 是层,i 没有被使用。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接