EaselJS / canvas在拖放过程中更改元素焦点

EaselJS / canvas change element focus during drag & drop

本文关键字:元素 焦点 过程中 拖放 canvas EaselJS      更新时间:2023-09-26

这个jsfiddle最好地说明了我的问题 http://jsfiddle.net/sdg9/YYUrm/

circle.addEventListener("mousedown", function (evt) {
    if (evt.nativeEvent.button === 0) {
        square = new createjs.Shape();
        square.graphics.beginFill("blue").drawRect(0, 0, 100, 100);
        makeDraggable(square);
        stage.addChild(square);
        stage.update();
        //How do I give focus to drag blue square without having to click again?
    }
});

我有一个对象(红色圆圈),在鼠标按下时将另一个形状(蓝色正方形)添加到画布上。蓝色方块可以在画布周围拖动。

我想让它在鼠标按下红色圆圈时创建一个蓝色正方形,并且如果我仍处于鼠标按下状态,就可以立即拖动。目前,我必须在蓝色方块上手动执行第二次鼠标按下以拖动它。

我不知道我是否需要为蓝色方块提供焦点,以编程方式触发事件,或者做其他事情来使其正常工作。任何指导将不胜感激。

你也可以听圆圈上的"pressmove"事件,但你要拖动的是你刚刚创建的方块:

circle.addEventListener("pressmove", function (evt) {
    if (evt.nativeEvent.button === 0) {
        evt.target.topObj.x = evt.stageX;
        evt.target.topObj.y = evt.stageY ;
        stage.update();    
    }
});

并且 topObj 对象保存在"鼠标按下"事件中:

circle.addEventListener("mousedown", function (evt) {
    if (evt.nativeEvent.button === 0) {
        // Create your square 
        ...
        // Then save it as the square on top of the circle
        evt.target.topObj = square;
    }
});