Kineticjs dragBoundFunc for a rect in a rect

后端未结

关注

 1  517

庸人自扰

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 sol

相关标签:

1条回答

难免孤独

2020-12-20 01:03

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 do
    var 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>
      <div id="container"></div>
      <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.1.min.js"></script>
      <script>
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 400,
          height: 400
        });
        var layer = new Kinetic.Layer();

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

        var orangeGroup = new Kinetic.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 = new Kinetic.Text({
          fontSize: 26,
          fontFamily: 'Calibri',
          text: 'boxed in',
          fill: 'black',
          padding: 10
        });

        var orangeRect = new Kinetic.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 do
        var 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>

0 讨论(0)