stop drag of text object within boundary on canvas - Javascript Canvas

Javascript examples for Canvas:Mouse

  1. HOME
  2. Javascript
  3. Canvas
  4. Mouse

Description

stop drag of text object within boundary on canvas

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Text Drag (StackOverflow)</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.createjs.com/createjs-2015.05.21.combined.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  ww  w . jav a  2 s  .  c  om*/
var stage = new createjs.Stage("canvas");
var textFront = new createjs.Text("Hello World", "bold 24px Arial");
var textBounds = textFront.getBounds();
var textBoundary = new createjs.Shape();
 textBoundary.graphics.beginStroke("#999")
     .setStrokeStyle(1)
     .drawRect(82, 130, 249, 240);
textBoundary.snapToPixel = true;
textBoundary.setBounds(82, 130, 249, 240);
var bounds = textBoundary.getBounds();
stage.addChild(textBoundary, textFront);
textFront.on("pressmove",function(evt) {
    evt.currentTarget.x = Math.max(bounds.x, Math.min(bounds.x+bounds.width-textBounds.width, evt.stageX));
    evt.currentTarget.y = Math.max(bounds.y, Math.min(bounds.y+bounds.height-textBounds.height, evt.stageY));
    stage.update();
});
textFront.x = bounds.x, textFront.y = bounds.y;
stage.update();
    }

      </script> 
   </head> 
   <body> 
      <h2>Constrain position to bounds</h2> 
      <canvas id="canvas" width="800" height="600"></canvas>  
   </body>
</html>

Related Tutorials