0

動的に追加された図形 (またはグループ) を線でリンクするソリューションを探しています。リンクされた形状がドラッグ移動されたときに、線を更新する必要があります。図形をレイヤー (ボタン) に動的に追加するオプションは既にありますが、それらを線でリンクし、図形の dragmove イベントでこの線を更新するにはどうすればよいですか?

すべての図形に着信線と発信線が存在する可能性があるため、すべての図形を別の図形にリンクできるようにするオプションが必要です

THX！

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 に答える