HTML5 Canvas Simple Drag Bounds Tutorial

可以自定义 dragBoundsFunc 函数来覆盖拖动、释放的位置来约束形状的移动。这个函数可以从各方面约束形状的移动，可以将形状的移动约束为水平方向、垂直方向、斜角方向、径向，甚至可以将形状约束在方形、圆形或者其他路径区域内。

**注意：dragBoundsFunc 是以节点的绝对位置工作的。因此它的参数和返回值都是绝对定位的坐标。如果你想使用相对位置操作，可以尝试配合 dragmove 事件。

说明：下面例子水平方向的文字只能水平方向拖动，垂直方向的文字则相反。

Konva Simple Drag 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 Simple Drag 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();

      var rectHeight = 50;
      var rectWidth = 100;
      var rectY = (stage.height() - rectHeight) / 2;

      var hbox = new Konva.Text({
        x: 20,
        y: 70,
        fontSize: 24,
        fontFamily: 'Calibri',
        text: 'horizontal',
        fill: 'black',
        padding: 15,
        draggable: true,
        dragBoundFunc: function(pos) {
          return {
            x: pos.x,
            y: this.absolutePosition().y
          };
        }
      });

      var vbox = new Konva.Text({
        x: 150,
        y: 70,
        draggable: true,
        fontSize: 24,
        fontFamily: 'Calibri',
        text: 'vertical',
        fill: 'black',
        padding: 15,
        dragBoundFunc: function(pos) {
          return {
            x: this.absolutePosition().x,
            y: pos.y
          };
        }
      });

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