0

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

我想有一个选项，每个形状都可以有一个传入和传出线，所以每个形状都可以链接到另一个

谢谢！

4

1 回答 1

0

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

在此处输入图像描述在此处输入图像描述

您可以使用 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>
于 2013-10-30T18:41:19.630 回答