EaselJS：故障拖放答案

【问题标题】：EaselJS: glitchy drag/dropEaselJS：故障拖放
【发布时间】：2014-04-03 06:06:16
【问题描述】：

我有一个容器内的位图。当我拖动容器时，光标变为编辑文本形状，并且图像也跳到光标的右下角（就好像我从左上角按住图像并拖动它一样）。

这是我的代码，您可以看到我有 RTFM：

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

有什么想法吗？

【问题讨论】：

标签： bitmap drag-and-drop easeljs

【解决方案1】：

为了防止跳跃，您必须在按下移动之前添加一个额外的步骤：

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

【讨论】：

非常感谢！关于光标进入文本编辑模式的任何线索？
感谢您的快速修复！任何想法为什么会首先发生这种情况？我猜是因为框架仍然是 WIP？另外，为什么 Easel 网站上没有记录这些内容？我拿了他们的确切脚本，最终结果就是我上面的问题。
光标的变化往往取决于浏览器。大多数浏览器的默认行为是，如果您按住鼠标并移动它，浏览器会期望您选择要复制它的内容（-> 文本选择光标）。一些浏览器不区分画布上的按下移动或文本。 EaselJS 默认不这样做，因为它不知道你的项目需要什么。此外，con.cursor = ... 解决方案需要更多的性能，而这种权衡应由开发人员决定。
ny = ct.regY - local.yM 中有错字。那个 M 应该是 ;。

【解决方案2】：

虽然@olsn 提供的解决方案肯定有效，但使用 regX/regY 偏移对象以考虑当前鼠标位置可能会在随后转换对象时导致困难。

例如如果要围绕其中心旋转对象，则需要将 regX/regY 重置为对象宽度/2 和对象高度/2。这将重新引入故障，尽管在您的对象操作的后期阶段。

考虑到这样的场景，我喜欢防止使用 regX/regY 来防止拖动故障。

另外，我记下dragstart 上的鼠标位置，并在dragging 上测量鼠标移动。通过将此移动应用到对象的 x/y 位置，对象会随着鼠标移动，模拟拖动。

如this 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
}

【讨论】：

【解决方案3】：

我的解决方案

(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 没有被使用。

【讨论】：