Question

我正在寻找一种解决方案，将动态添加的形状（或组）与一条线链接起来。然后，当拖动链接的形状时，必须更新该行。我已经可以选择动态地向图层添加形状（按钮），但是如何将它们与一条线链接并在形状的dragmove事件上更新这一行呢？

我希望有一个选项，即每个形状上都可以有一个输出线，所以每个形状都可以链接到另一个

THX！

Answer 1

演示：http://jsfiddle.net/m1erickson/9am6M/

enter image description here

您可以使用Kinetic.Line连接2个形状。

要连续连接多个形状，请为每个形状分别引用其先前的形状和下一个形状。

var circle = new Kinetic.Circle({
    x: x,
    y: y,
    radius: r,
    fill: fill,
    stroke: 'black',
    strokeWidth: 3,
    draggable: true
});

circle.beforeShape=beforeShape;
circle.beforeConnector=beforeConnector;
circle.afterShape=afterShape;
circle.afterConnector=afterConnector;

然后在拖动任何形状时，使用此形状的当前位置重置前一个连接线和下一个连接线的点。

circle.on("dragmove",function(){
    if(this.beforeShape){
        this.beforeConnector.setPoints([
            {x:this.beforeShape.getX(),y:this.beforeShape.getY()},
            {x:this.getX(),y:this.getY()}]);
    }
    if(this.afterShape){
        this.afterConnector.setPoints([
            {x:this.getX(),y:this.getY()},
            {x:this.afterShape.getX(),y:this.afterShape.getY()}]);
    }

这是完整的代码：

<!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>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

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


    // create some test shapes
    var c1=newCircle(30,30,10,"red",null);
    var c2=newCircle(180,60,25,"green",c1);
    var c3=newCircle(80,180,20,"blue",c2);


    function newCircle(x,y,r,fill,beforeShape){

        var circle = new Kinetic.Circle({
            x: x,
            y: y,
            radius: r,
            fill: fill,
            stroke: 'black',
            strokeWidth: 3,
            draggable: true
        });
        layer.add(circle);

        if(beforeShape){
            var connector=new Kinetic.Line({
                points:[
                    {x:beforeShape.getX(),y:beforeShape.getY()},
                    {x:x,y:y}],
                stroke:"blue",
                strokeWidth:3
            });
            layer.add(connector);
            connector.moveToBottom();
            beforeShape.afterShape=circle;
            beforeShape.afterConnector=connector;
        }
        circle.beforeShape=beforeShape;
        circle.beforeConnector=connector;
        circle.afterShape=null;
        circle.afterConnector=null;
        circle.on("dragmove",function(){
            if(this.beforeShape){
                this.beforeConnector.setPoints([
                    {x:this.beforeShape.getX(),y:this.beforeShape.getY()},
                    {x:this.getX(),y:this.getY()}]);
            }
            if(this.afterShape){
                this.afterConnector.setPoints([
                    {x:this.getX(),y:this.getY()},
                    {x:this.afterShape.getX(),y:this.afterShape.getY()}]);
            }
        });

        layer.draw();
        return(circle);
    }

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

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>

链接动态添加组与行

1 个答案: