当画布响应时,拖动不会检测到拖放

时间:2017-05-12 17:59:12

标签: javascript drag-and-drop html5-canvas easeljs animate-cc

在Animate CC中,使用CreateJS / EaselJS API,我创建了大量不同的HTML5画布,所有这些画布都具有拖放元素,每次都有渐进式功能。

为了构建拖放交互,我在mousedownpressmovepressup事件上向Drag MovieClip添加了一些EventListeners。所有这些都有相关的功能。

(部分)Drag MovieClip的操作代码

/* this refers to the Drag MovieClip */ 
root = this;

/* Mousedown Events */

/* removingFromDrop: Detects when a Drag is removed from certain Drop */
root.on("mousedown", removingFromDrop);

/* Pressmove Events */ 

/* onPressMove: Moves the Drag on pressmove */ 
root.on("pressmove", onPressMove);

/* detectDrop: While pressmoving, detects if the Drag is over a Drop */ 
root.on("pressmove", detectDrop); 

/* Pressup events */

/* setDragOverDrop: Releasing the left button of the mouse, 
   if a Drag is over a Drop, the Drag is positioned over the Drop */ 
root.on("pressup", setDragOverDrop); 

正如我所说的,所有的拖放功能都是以渐进的方式实现的,因此在某些画布中,拖动不会检测到掉落(有意),而在其他画布中,透明度(alpha)会应用于拖动超过一滴,在其他情况下,拖动必须放在一个下降或返回到他们原来的位置,在其他人的拖动时,放在一个下降,它不能被放到其他位置;等。

几乎所有这些实现中没有改变的是拖动在pressmove事件上移动的方式......

onPressMove功能

function onPressMove(event) {
    // There is more code here, but for effects 
    // of this question, it's irrelevant

    /* In layer terms, drag must be over the drop  */ 
    root.parent.setChildIndex(event.currentTarget, root.parent.numChildren-1);

    /* Drag takes the actual position of the mouse pointer  */ 
    var point = stage.globalToLocal(event.stageX, event.stageY); 
    event.currentTarget.x = point.x;
    event.currentTarget.y = point.y; 
}

...以及它如何在低于pressmove事件时检测到丢弃。

detectDrop函数

function detectDrop(event){
    /* The original function is more complex than this. For example, the drop detection 
       in the original function is being done against all the available drops. 
       For effects of this question, I'm simplyfying this function, doing the detection 
       over a single drop */

    /* Initial variables */
    var dropLocation;       //  Drop Location
    var point;              //  Point for the collision comparison
    var dropFound = false;  //  Drop is found? By default, no. 

    /* Drop is cloned. For effects of this question, the drop is a global variable. */
    dropLocation = drop.clone();

    /* Position of the drop is converted to local using the mouse pointer position */   
    point = dropLocation.globalToLocal(event.stageX, event.stageY);

    /* In local coordinates, the drag intersects with the point defined before? */  
    if (event.currentTarget.hitTest(point.x,point.y)) {   
        /* If yes, the drop was found */ 
        dropFound = true;                      
    }

    if (dropFound) {  
        // Irrelevant for effects of this question 
    }
}

只有一种情况是拖放交互不能按预期工作,而这种情况是画布响应的情况。

当画布位于中心时没有问题,拖动移动和拖放检测都能正常工作。

但是当画布响应时,拖动的运动很好,但是  拖动结束时未检测到拖放。正如我迄今为止所测试的那样,阻力在另一个位置检测到一定的下降,这显然不是前面提到的下降的位置。

1 个答案:

答案 0 :(得分:0)

经过一些测试,我正在做类似于上面显示的核心实现的拖拽/下降,我已经找到了一个解决方案,它涉及跌落检测功能的其他转换。

首先,点变量现在将当前鼠标位置保持在舞台的坐标空间内:

var point = stage.globalToLocal(event.stageX, event.stageY);

然后,我使用该点转换为drop的坐标空间。这种转变正在另一个点变量中进行:

var pointGTL = dropLocation.globalToLocal(point.x, point.y); 

本地坐标中的交叉点测试正在使用之前定义的点变量完成:

event.currentTarget.hitTest(pointGTL.x,pointGTL.y) 

现在,跌落检测功能如下所示:

detectDrop函数

function detectDrop(event){
    /* Initial variables */
    var dropLocation;       //  Drop Location
    var point, pointGTL;    //  Points for the collision comparison
    var dropFound = false;  //  Drop is found? By default, no. 

    /* Drop is cloned */
    dropLocation = drop.clone();

    /* Position of the stage is converted to local 
       using the mouse pointer position */  
    point = stage.globalToLocal(event.stageX, event.stageY);

    /* Then, the position of the drop is converted to local 
       using the point defined before */ 
    pointGTL = dropLocation.globalToLocal(point.x, point.y); 

    /* In local coordinates, the drag intersects with the point defined before? */  
    if (event.currentTarget.hitTest(pointGTL.x,pointGTL.y)) {   
        /* If yes, the drop was found */ 
        dropFound = true;                      
    }

    /* Rest of the code */
}

拖动在两种响应模式下都能正常工作(适合视野或拉伸以适应)。