标题: HTML5 Canvas 简单拖拽边界教程

为了限制使用 Konva 拖动和放置的形状的移动，我们可以使用 dragmove 事件，并在其中重写拖拽和放置位置。

这个事件可以用来以各种方式约束拖拽和放置的移动，例如限制水平、垂直、对角线或径向运动，甚至约束节点保持在一个盒子、圆形或任何其他路径内。

shape.on('dragmove', () => {
  // 锁定形状在 x 轴上的位置
  // 保持 y 位置不变
  shape.x(0);
});

提示：您可以使用 shape.absolutePosition() 方法获取/设置节点的绝对位置，而不是相对的 x 和 y。

说明：拖动并放置水平文本，观察它只能水平移动。拖动并放置垂直文本，观察它只能垂直移动。

Konva Simple Drag Bounds Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@9.3.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();
      // add the layer to the stage
      stage.add(layer);

      var rectHeight = 50;
      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,
          };
        },
      });
      layer.add(hbox);
      var originalY = hbox.y();
      hbox.on('dragmove', () => {
        // we will keep new x position
        // but reset y position to the original
        hbox.y(originalY);
      });

      var vbox = new Konva.Text({
        x: 150,
        y: 70,
        draggable: true,
        fontSize: 24,
        fontFamily: 'Calibri',
        text: 'vertical',
        fill: 'black',
        padding: 15,
      });
      layer.add(vbox);
      var originalX = vbox.x();
      vbox.on('dragmove', () => {
        // we will keep new x position
        // but reset y position to the original
        vbox.x(originalX);
      });
    </script>
  </body>
</html>