EaselJS: add child with mousedown triggered

Question

The basic functionality I'm going for is...

Tap (mousedown) on the stage to create and add a child at that location.

*EDIT: I'm also trying to solve for multitouch, so multiple balls can be created at the same time.

As you hold down you can drag (pressmove) that child around and it grows (using regX/regY/scaleX/scaleY) until you release (pressup), at which point it falls (using a tick cycle).

I have everything sort of working, but I've hit a snag wherein I can't add a child and have it immediately register mousedown without releasing and pressing again.

Is there a way to manually trigger mousedown after adding, or some other workaround that makes more sense? dispatchEvent doesn't seem to be working.

Here's my stage event listener and touch bits:

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

And here are my functions. The spawnsnowball one includes displayObject event listeners verging on desperate, but the only way I've been able to get the pressmove and pressup working is to click on the same snowball again. releasesnowball right now just releases all instances of them (using a 'stagemouseup' listener), but if I can get it triggering off of pressup then I'll rewrite it to target just the event target.

        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);

                     }
                }
            }
        }

Lanny Lanny · Accepted Answer · 2016-11-07T20:58:23

The pressmove event is special because it basically stores off the target of the last mousedown event, and then remembers it for pressmove and pressup events.

This means you can't really fake the event by forcing mouse events. Dispatching a mouse event from the target will not do the trick.

Instead, consider just handling the initial drag manually. You already know what you want to be the target of the pressmove, so you can listen for the stagemousemove event, and handle it yourself:

// 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

Here is a quick sample using your code as the base: http://jsfiddle.net/3qhmur82/

I also added some comments in the demo which might be useful.

Hope that helps!

EaselJS: add child with mousedown triggered

1 Answers