bitmap - EaselJS:小故障的拖放

我在容器内有一个位图。当我拖动容器时，光标会变为编辑文本形状，并且图像也会跳到光标的右下角(就像我从左上角握住图像并将其拖动一样)。

这是我的代码，因此您可以看到我具有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;
}

任何想法出什么事了吗？

最佳答案

为防止跳跃，您必须在压移之前添加一个附加步骤:

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

关于bitmap - EaselJS:小故障的拖放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22829143/