复杂的拖拽区域限制

我们可以使用 dragBoundFunc 属性定义一个区域，限制节点只能在这个区域内拖拽。

提示：dragBoundsFunc 使用的是绝对坐标，所以你必须返回绝对坐标。如果你想使用相对坐标可以配合使用 dragmove 事件。

说明：拖拽蓝色矩形，观察它的 y 坐标被限制在大于50；拖拽黄色矩形，观察它的拖拽区域被限制在一个圆形区域内。

Konva Complex Drag and Drop Bounds Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Complex Drag and Drop Bounds Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });

      var layer = new Konva.Layer();

      // bound below y=50
      var blueGroup = new Konva.Group({
        x: 30,
        y: 70,
        draggable: true,
        dragBoundFunc: function(pos) {
          var newY = pos.y < 50 ? 50 : pos.y;
          return {
            x: pos.x,
            y: newY
          };
        }
      });

      // bound inside a circle
      var yellowGroup = new Konva.Group({
        x: stage.width() / 2,
        y: 70,
        draggable: true,
        dragBoundFunc: function(pos) {
          var x = stage.width() / 2;
          var y = 70;
          var radius = 50;
          var scale =
            radius / Math.sqrt(Math.pow(pos.x - x, 2) + Math.pow(pos.y - y, 2));
          if (scale < 1)
            return {
              y: Math.round((pos.y - y) * scale + y),
              x: Math.round((pos.x - x) * scale + x)
            };
          else return pos;
        }
      });

      var blueText = new Konva.Text({
        fontSize: 26,
        fontFamily: 'Calibri',
        text: 'bound below',
        fill: 'black',
        padding: 10
      });

      var blueRect = new Konva.Rect({
        width: blueText.width(),
        height: blueText.height(),
        fill: '#aaf',
        stroke: 'black',
        strokeWidth: 4
      });

      var yellowText = new Konva.Text({
        fontSize: 26,
        fontFamily: 'Calibri',
        text: 'bound in circle',
        fill: 'black',
        padding: 10
      });

      var yellowRect = new Konva.Rect({
        width: yellowText.width(),
        height: yellowText.height(),
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 4
      });

      blueGroup.add(blueRect).add(blueText);
      yellowGroup.add(yellowRect).add(yellowText);

      layer.add(blueGroup);
      layer.add(yellowGroup);

      // add the layer to the stage
      stage.add(layer);
    </script>
  </body>
</html>