HTML5画布上简单的拖动边界与KineticJS教程_html设置拖动边界-优快云博客

本文链接：https://blog.youkuaiyun.com/linjiahuiss/article/details/17613121

本文将介绍如何利用KineticJS的dragBoundsFunc属性来实现元素的拖动边界限制。通过自定义函数，我们可以限制形状在水平、垂直或特定路径内的移动，例如让文本只能沿水平或垂直方向拖动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

限制运动的形状与KineticJS拖,我们可以使用dragBoundsFunc财产是一个用户定义的函数,覆盖了拖放位置。这个函数可以用来限制拖放运动在各种各样的方面,如约束运动水平、垂直、对角,或径向,甚至限制节点呆在室内的一个盒子,圆圈,或任何其他路径。

产品说明:拖放水平文本和观察,它只能横向移动。拖拽垂直文本和观察,它只能垂直移动。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();
      var rectHeight = 50;
      var rectWidth = 100;
      var rectY = (stage.getHeight() - rectHeight) / 2;

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

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

      layer.add(hbox);
      layer.add(vbox);
      stage.add(layer);

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