Question

如果我有动力线

例如：

line = new Kinetic.Line({

    x: 80,
    y:80,
    points: [10, 10, 60, 60, 60-headlen*Math.cos(angle-Math.PI/6),60-headlen*Math.sin(angle-Math.PI/6),60, 60, 60-headlen*Math.cos(angle+Math.PI/6),60-headlen*Math.sin(angle+Math.PI/6)],
    stroke: "green",
 //  draggable: true,
   strokeWidth: 4,
   name: "letter_arrow",
   offset: [140,140]




});

并说一些圈子

    var anchor = new Kinetic.Circle({
      x: x,
      y: y,
      stroke: 'red',
      fill: 'white',
      strokeWidth: 2,
      radius: 8,
      name: name,
      draggable: false,
      dragOnTop: false,
      //TODO SET THIS TO 0!!!!!
      opacity: 1
    });

其中x和y将是该行（10,10）和（60,60）的前2个点

如何让圆圈拖动绑定，这样它们只能在通过前两点（10,10）和（60,60）制作的想象线上拖动我阅读关于拖动边界的教程但我有没有线索也许你可以帮助我

问候

Answer 1

您可以添加自定义dragBoundFunc以限制锚点移动到一行：

// dragBoundFunc will constrain your shape to your desired x/y
// you receive the current mouse position in pos.x and pos.y
// you return the x/y where you want the shape to be located 

dragBoundFunc: function(pos) {

    // get the mouse x position

    var x=pos.x;

    // if the mouse is left or right of the line
    // force the anchor to the far-left or far-right of the line

    if(x<lineMinX){ return({ x:lineMinX, y:lineMinY}); }
    if(x>lineMaxX){ return({ x:lineMaxX, y:lineMaxY}); }

    // if the mouse between the left and right points of the line
    // calc the desired y-position based on the formula: y = lineSlope * x + lineB

    return({x:x,y:lineSlope*x+lineB});
}

这是代码和小提琴：http://jsfiddle.net/m1erickson/UHwW9/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:300px;
  height:300px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 300,
        height: 300
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var x1=10;
    var y1=10;
    var x2=60;
    var y2=60;

    var line=new Kinetic.Line({
        points:[x1,y1,x2,y2],
        stroke:"gray"
    });
    layer.add(line);

    var anchor1=newAnchor(x1,y1,x2,y2);

    function newAnchor(x1,y1,x2,y2){

        var anchor = new Kinetic.Circle({
            x: x1,
            y: y1,
            radius: 8,
            fill: 'skyblue',
            stroke: 'lightgray',
            strokeWidth: 3,
            draggable:true,
            dragBoundFunc: function(pos) {
                var x=pos.x;
                if(x<this.minX){
                    return({x:this.minX,y:this.minY});
                }
                if(x>this.maxX){
                    return({x:this.maxX,y:this.maxY});
                }
                return({x:x,y:this.slope*x+this.b});
            }

        });
        // dragBoundFunc stuff
        anchor.minX=x1;
        anchor.minY=y1;
        anchor.maxX=x2;
        anchor.maxY=y2;
        anchor.slope=(y1-y2)/(x1-x2);
        anchor.b=y1/(anchor.slope*x1);
        // 
        layer.add(anchor);
        layer.draw();
        return(anchor);
    }

}); // end $(function(){});

</script>       
</head>

<body>
    <button id="rotateBtn">rotate</button>
    <div id="container"></div>
</body>
</html>

Answer 2

在MarkE的代码中，我认为计算anchor.b的方式应该是

anchor.b = y1 - anchor.slope * x1;

而不是

anchor.b = y1 / (anchor.slope * x1);

公式为y = ax + b。这可能会导致不良行为。 http://jsfiddle.net/UHwW9/26/

Kinetic JS Dragbound函数限制在线拖动

2 个答案: