javascript - EaselJS:通过鼠标按下触发添加子项

Question

我想要的基本功能是......

点击舞台上的 (mousedown) 可在该位置创建并添加一个子项。

*编辑:我也在尝试解决多点触控问题，因此可以同时创建多个球。

当您按住时，您可以拖动(按移动)该子项，它会变大(使用 regX/regY/scaleX/scaleY)，直到您松开(pressup)，此时它会下降(使用一个刻度周期)。

我一切正常，但遇到了一个障碍，我无法添加一个子项并让它立即注册 mousedown 而无需释放并再次按下。

有没有办法在添加后手动触发mousedown，或者其他更有意义的解决方法？ dispatchEvent 似乎不起作用。

这是我的舞台事件监听器和触摸位:

            stage.enableMouseOver(10);
            createjs.Touch.enable(stage, false, false);
            stage.preventSelection = false;
            stage.addEventListener("stagemousedown", spawnsnowball);

这是我的功能。 Spawnsnowball 包含近乎绝望的 displayObject 事件监听器，但我能够使 pressmove 和 pressup 正常工作的唯一方法是再次单击同一个雪球。 releasesnowball 现在只是释放它们的所有实例(使用 'stagemouseup' 监听器)，但如果我可以让它从 pressup 触发，那么我将重写它以仅针对事件目标。

        function spawnsnowball(evt){
            var ball = new createjs.Bitmap(loader.getResult("snowball"));
            ball.crossOrigin="Anonymous";
            ball.name="ball";
            ball.scaleX = 0.5;
            ball.scaleY = ball.scaleX;
            ball.regX = ball.image.width/2;
            ball.regY = ball.image.height/2;
            ball.x = evt.stageX;
            ball.y = evt.stageY;

            ball.type = balltype;

            ball.holding = 1;
            ball.velX = 0;
            ball.velY = 0;
            ball.addEventListener("pressup",releasesnowball);
            ball.addEventListener("pressmove",dragsnowball);
            ball.onPress = function(mouseEvent) {};
            stage.addChild(ball);
            ball.dispatchEvent("mousedown");
            ball.dispatchEvent("pressdown");

        }

        function dragsnowball(evt){
            evt.target.x = evt.stageX;
            evt.target.y = evt.stageY;
        }

        function releasesnowball(evt){
            for(var i=0;i<stage.getNumChildren();i++){
                var shape = stage.getChildAt(i);
                if(shape.type == balltype){
                    if(shape.holding){
                        shape.holding = 0;
                        var dX = shape.x - shape.oldX;
                        var dY = shape.y - shape.oldY;
                        if(Math.abs(dY)>8)
                            dY = 8*dY/Math.abs(dY);
                        if(Math.abs(dX)>3)
                            dX = 3*dX/Math.abs(dX);

                     }
                }
            }
        }

Answer 1

pressmove 事件很特殊，因为它基本上存储了最后一个 mousedown 事件的目标，然后为 pressmove 和 按下事件。

这意味着您无法通过强制鼠标事件来真正伪造该事件。从目标分派(dispatch)鼠标事件并不能解决问题。

相反，请考虑手动处理初始拖动。您已经知道您希望成为 pressmove 的目标，因此您可以监听 stagemousemove 事件，并自行处理:

// Listen to the stagemousemove and manually call the event.
  var initialDrag = stage.on("stagemousemove", function(event) {
    event.target = ball; // Re-target the event so your other method works fine.
    dragsnowball(event);
  });

// When done, remove the move listener.
// The off() method supports a "once" parameter so you don't have to unsubscribe that listener.
  stage.on("stagemouseup", function(event) {
    stage.off("stagemousemove", initialDrag);
  }, null, true); // Fires one time

这是一个使用您的代码作为基础的快速示例:http://jsfiddle.net/3qhmur82/

我还在演示中添加了一些可能有用的注释。

希望有帮助!