EaselJS：出问题拖/放 [英] EaselJS: glitchy drag/drop

问题描述

我有一个容器内的位图。当我拖累容器中的光标变为编辑文本形态，也是图像跳转到光标的右下方（好像我拿着从左上角的形象和拖动）。

I have a bitmap inside of a container. When I drag the container the cursor changes to the edit-text shape, and also the image jumps to the bottom-right side of the cursor (as though I'm holding the image from the top-left corner and dragging it).

下面是我的code只是让你可以看到我RTFM：

Here's my code just so you can see that I've 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;
}

任何想法有什么不对？

Any ideas what's wrong?

推荐答案

要prevent的跳跃，你将有pressmove前增加额外的步骤：

To prevent the jumping you would have to add an additional step before the 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跳入设置为当前的鼠标位置prevent形状/图像。

This will set the new regX/Y to the current's mouse-position to prevent the shape/image from jumping.

有关光标：
你可以通过CSS要么设置这样的：

For the cursor: You could either set this via 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

这篇关于EaselJS：出问题拖/放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！