Skip to main content
A
aewu
Inspiring
February 24, 2017
Answered

Mouse snap when using pressmove

  • February 24, 2017
  • 2 replies
  • 1000 views

I am re-creating a timeline scrubber from Edge which is just about working, but I am having trouble getting my slider button (sliderBtn) to snap to the mouse when I drag it. I have it set to drag within the boundaries of a rectangle (like a video timeline scrubber), but when I press and drag the sliderBtn seems to jump about 50 pixels to the right of where my mouse pointer is. Any thoughts? Note that I am setting the tick event to paused when you roll over the rectangle so that the animation stops when you're scrubbing.

scrubBoundary = new createjs.Shape();

scrubBoundary.graphics.beginStroke("#999")

  .setStrokeStyle(1)

  .beginFill("red")

  .drawRect(247, 527, 455, 10);

scrubBoundary.snapToPixel = true;

scrubBoundary.setBounds(247, 527, 455, 10);

bounds = scrubBoundary.getBounds();

stage.addChild(scrubBoundary);

//Create slider button

sliderBtn = new lib.sliderBtn();

sliderBtn.cursor = "pointer";

stage.addChild(sliderBtn);

function handleTick(event) {

  if(!event.paused && exportRoot.currentFrame < exportRoot.totalFrames){

        sliderBtn.x = bounds.x + bounds.width * (exportRoot.currentFrame / exportRoot.totalFrames);

  }

}

scrubBoundary.on("mouseover", function (evt) {

       paused = false;

       doPauseActions();

  });

sliderBtn.on("pressmove", function (evt) {

       evt.currentTarget.x = Math.max(bounds.x, Math.min(bounds.x + bounds.width - sliderBtn.getBounds().width, evt.stageX));

       controlTimeline();

});

    This topic has been closed for replies.
    Correct answer KeelyM

    I created a slider in a project recently and experienced a similar offset situation. I couldn't figure out what was causing it, but one work around I found was to subtract an integer from the evt.stageX to correct for the offset. For example, if you guess your item is offsetting about 50 pixels to the right, maybe try evt.stageX-50

    I just kept experimenting with numbers until I found one where the offset seemed to be corrected enough.

    However, in the other forum where I discussed this issue, another user provided some code which worked for my slider and I stopped having the offset problem. I'm not a coder, so I'm not entirely sure why this worked over what I had (what I had was something similar to yours), but here is that thread - mouse position problem with stage size changes - branched [kglad] Towards the bottom you should find the code that another user provided which ended up also working for me.

    Hope this helps!

    2 replies

    K
    KeelyMCorrect answer
    Inspiring
    September 20, 2017

    I created a slider in a project recently and experienced a similar offset situation. I couldn't figure out what was causing it, but one work around I found was to subtract an integer from the evt.stageX to correct for the offset. For example, if you guess your item is offsetting about 50 pixels to the right, maybe try evt.stageX-50

    I just kept experimenting with numbers until I found one where the offset seemed to be corrected enough.

    However, in the other forum where I discussed this issue, another user provided some code which worked for my slider and I stopped having the offset problem. I'm not a coder, so I'm not entirely sure why this worked over what I had (what I had was something similar to yours), but here is that thread - mouse position problem with stage size changes - branched [kglad] Towards the bottom you should find the code that another user provided which ended up also working for me.

    Hope this helps!

    C
    ClayUUID
    Legend
    February 24, 2017

    The correct behavior would be that it not snap at all. When you click on a window scroll bar, does the scroll thumb snap to the mouse position? No, it stays where it is, and only moves when you explicitly drag it.

    To do this you save the mouse offset from the object center on drag start, then apply it every time you update its position. This is my own code to do this. You'll have to adapt it to your setup.

    // capture offset of click origin from object origin
    this.offset = {x:this.x - evt.stageX / stage.scaleX, y:this.y - evt.stageY / stage.scaleY};

    // calc new position
    var newX = Math.round((evt.stageX / stage.scaleX) + this.offset.x);
    var newY = Math.round((evt.stageY / stage.scaleY) + this.offset.y);

    Also why are you using code to draw your scrub background instead of drawing it within the editor?

    Wait... you're pausing the timeline just from moving the mouse over the scrub bar? That seems like it would be really annoying for the user.

    A
    aewuAuthor
    Inspiring
    February 27, 2017

    Thank you, maybe "snap" is not the right word. The issue is that when I click and drag the scrubber along the scrub boundary, the scrubber follows the mouse, but is offset about 50 pixels to the right of it, rather than following right underneath of it. I included the image below so that you can see what I mean. I want the mouse to be lined up with the scrubbers registration point and I can't figure out why it's not. I have followed this tutorial: EaselJS Tutorial: Mouse Interaction

    Also, I have now added the scrubber within the editor as you have suggested and the reason why I am having the animation pause when I hover over the scrub boundary is because it was easier for me to try to figure out what was going on with my offset issue. I agree that this would be annoying to the user and my intent is not to keep it this way.

    M
    montana321
    Known Participant
    September 13, 2017

    I'm experiencing the same phenomenon that you noted back in Feb with the scrubber jumping away form the mouse.  Curious if you ever found out what was causing it.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices