Drag slider position on bar, and no jump on drag

[michaelo41530365]

Hello I was trying to create a slider that would follow along the x axis and stay within the range of the bar on the canvas.  Right now the orangeHash is at the top of the stage, would like it to be on the left beginning part of the hash bar.

My code is:

Any help would be greatly appreciated.

/*stage.mouseMoveOutside = true;*/

var orangeHash = new createjs.Shape(new createjs.Graphics().beginFill("#ff8000").drawRect(0, 0, 20, 60));

orangeHash.setBounds(0, 0, 30, 60);

var orangeHashBounds = orangeHash.getBounds();

console.log(orangeHashBounds);

var orangeHashBoundary = new createjs.Shape();

    orangeHashBoundary.graphics.beginStroke("#999")

    .setStrokeStyle(1)

    .drawRect(117, 376, 1206, 60);

orangeHashBoundary.snapToPixel = true;

orangeHashBoundary.setBounds(117, 376, 1200, 60);

var bounds = orangeHashBoundary.getBounds();

stage.addChild(orangeHashBoundary, orangeHash);

orangeHash.on("mousedown", function(e) {

        var localToTrack = e.currentTarget.globalToLocal(e.stageX, e.stageY);

        e.currentTarget.regX = localToTrack.x;

        e.currentTarget.regY = localToTrack.y;

    });

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

    evt.currentTarget.x = Math.max(bounds.x + evt.currentTarget.regX,

      Math.min(bounds.x + bounds.width - orangeHashBounds.width + evt.currentTarget.regX, evt.stageX));

    stage.update();

});

orangeHash.x = bounds.x

stage.update();

[Colin Holgate · Accepted solution]

It looks like you're adapting a CreateJS example routine, and you're doing things that Animate would normally take care of for you. With Animate you could also create the shapes instead of doing it in code.

While you are doing it in code you could add this line to solve the problem you've asked about:

orangeHash.y = bounds.y;

Another issue is that the stage itself has a scale, but the stageX value isn't based on the scaled coordinate.

With removing the not needed updates, and simplifying the offset variable, this works better (note too the eve.stageX/stage.scaleX part):

var orangeHash = new createjs.Shape(new createjs.Graphics().beginFill("#ff8000").drawRect(0, 0, 20, 60));

orangeHash.setBounds(0, 0, 30, 60);

var orangeHashBounds = orangeHash.getBounds();

console.log(orangeHashBounds);

var regX;

var orangeHashBoundary = new createjs.Shape();

orangeHashBoundary.graphics.beginStroke("#999")

  .setStrokeStyle(1)

  .drawRect(117, 376, 1206, 60);

orangeHashBoundary.snapToPixel = true;

orangeHashBoundary.setBounds(117, 376, 1200, 60);

var bounds = orangeHashBoundary.getBounds();

stage.addChild(orangeHashBoundary, orangeHash);

orangeHash.on("mousedown", function (e) {

  regX = orangeHash.x - e.stageX;

});

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

  evt.currentTarget.x = Math.max(bounds.x + regX,

  Math.min(bounds.x + bounds.width - orangeHashBounds.width + regX, evt.stageX/stage.scaleX));

});

orangeHash.x = bounds.x

orangeHash.y = bounds.y

this.stop();