HTML5画布上简单的拖动边界与KineticJS教程

来源：互联网发布：windows 官网编辑：程序博客网时间：2024/06/07 15:08

限制运动的形状与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>

0 0