0

如果我有一条动力线

例如：

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）的想象线上拖动我阅读了有关拖动边界的教程，但我可能不知道你可以帮助我

问候

4

2 回答 2

2

您可以添加自定义 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>
于 2013-10-24T16:39:43.437 回答
0

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

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

代替

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

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

于 2014-08-27T21:12:11.080 回答