Skip to content Skip to sidebar Skip to footer
Home / Javascript / Kineticjs

Kineticjs Dragboundfunc For A Rect In A Rect

Post a Comment
i have following code to drag a smaller rect in a bigger rect. it is almost working, but its possible to move the orange rect out of the white one. Is there any solution for this

Solution 1:

This is an improved way of setting your dragBoundFunc

The secret with dragBoundFunc is to allow it to execute fast. Remember that it is being executed with every mousemove.

So, pre-calculate all the minimum and maximum boundaries before and outside dragBoundFunc, like this:

// pre-calc some bounds so dragBoundFunc has less calc's to dovar height=orangeRect.getHeight();
    var minX=white.getX();
    var maxX=white.getX()+white.getWidth()-orangeRect.getWidth();
    var minY=white.getY();
    var maxY=white.getY()+white.getHeight()-orangeRect.getHeight();

That way your dragBoundFunc can just test the current position against these pre-calc’ed bounds like this:

dragBoundFunc: function(pos) {
          var X=pos.x;
          var Y=pos.y;
          if(X<minX){X=minX;}
          if(X>maxX){X=maxX;}
          if(Y<minY){Y=minY;}
          if(Y>maxY){Y=maxY;}
          return({x:X, y:Y});
      }

Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/n5xMs/

<!DOCTYPE HTML><html><head><style>body {
        margin: 0px;
        padding: 10px;
      }
      canvas{border:1px solid red;}
    </style></head><body><divid="container"></div><scriptsrc="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.1.min.js"></script><script>var stage = newKinetic.Stage({
          container: 'container',
          width: 400,
          height: 400
        });
        var layer = newKinetic.Layer();

        var white = newKinetic.Rect({
            x: 20,
            y: 20,
            width: 300,
            height: 300,
            fill: 'white',
            stroke: 'black',
            strokeWidth: 2
        });

        var orangeGroup = newKinetic.Group({
          x: stage.getWidth() / 2,
          y: 70,
          draggable: true,
          dragBoundFunc: function(pos) {
              var X=pos.x;
              var Y=pos.y;
              if(X<minX){X=minX;}
              if(X>maxX){X=maxX;}
              if(Y<minY){Y=minY;}
              if(Y>maxY){Y=maxY;}
              return({x:X, y:Y});
          }
        });

        var orangeText = newKinetic.Text({
          fontSize: 26,
          fontFamily: 'Calibri',
          text: 'boxed in',
          fill: 'black',
          padding: 10
        });

        var orangeRect = newKinetic.Rect({
          width: orangeText.getWidth(),
          height: orangeText.getHeight(),
          fill: 'orange',
          stroke: 'blue',
          strokeWidth: 4
        });

        orangeGroup.add(orangeRect).add(orangeText);
        layer.add(white);
        layer.add(orangeGroup);
        stage.add(layer);

        // pre-calc some bounds so dragBoundFunc has less calc's to dovar height=orangeRect.getHeight();
        var minX=white.getX();
        var maxX=white.getX()+white.getWidth()-orangeRect.getWidth();
        var minY=white.getY();
        var maxY=white.getY()+white.getHeight()-orangeRect.getHeight();

      </script></body></html>

You may like these posts

Post a Comment for "Kineticjs Dragboundfunc For A Rect In A Rect"