1 Reply Latest reply on Jun 27, 2017 11:02 AM by Colin Holgate

    Drag slider position on bar, and no jump on drag

    michaelo41530365 Level 1

      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.

      canvas01.jpgcanvas02.jpg

      /*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();

        • 1. Re: Drag slider position on bar, and no jump on drag
          Colin Holgate MVP & Adobe Community Professional

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