线条 SVG 动态

Question

我正在尝试在移动对象时重新绘制线条。

我已经有了线的起点和终点 x 和 y (x1, y1, x2, y2)，但我无法在拖动事件中重新绘制线。

下面是代码和 link jsFiddle:

https://jsfiddle.net/rafaelcb21/vtga3119/2/

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
    body {
        padding:0px;
        margin:0px;
        width: 3300px;
        height: 5000px
    }

    svg {
       position:absolute;
       width:100%;
       height:100%;
       top:0px;
       z-index:-1;
    }

    .table {
        position:absolute;
        cursor:pointer; 
        border-top: solid 1px;
    }

    .table.node2 {
        left: 353px;
        top: 383px;
    }

    .td {           
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 7px;
        padding-right: 7px;
        border-style: solid;
        border-top-width: 0px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-right-width: 1px;
      }
</style>
</head>
<body>
<div class='table node1'>
    <div class='td' id='Table_1'>Table_1</div>
    <div class='td' id='test_11'>test_1</div>
    <div class='td' id='test_12'>test_2</div>
    <div class='td' id='test_13'>test_3</div>
    <div class='td' id='test_14'>test_4</div>
</div>

<div class='table node2'>
    <div class='td' id='Table_2'>Table_2</div>
    <div class='td' id='test_21'>test_1</div>
    <div class='td' id='test_22'>test_2</div>
</div>

<svg>
    <line id='test_13_test_21' style='stroke:rgb(255,0,0)'></line>
</svg>

<script>
    $(".node1").draggable(
        {
          drag: function(){
                //OUT
                var test_13= $("#test_13");
                var test_13_position = test_13.offset();
                test_13_position_top_y = test_13_position.top + 9
                test_13_position_left_x = test_13_position.left + test_13.width() + 15;
        }
    });

    $(".node2").draggable(
        {
          drag: function(){
                //IN
                var test_21= $("#test_21");
                var test_21_position = test_21.offset();
                test_21_position_top_y = test_21_position.top + 9
                test_21_position_left_x = test_21_position.left + 1;
        }
    });

    //OUT
    var test_13= $("#test_13");
    var test_13_position = test_13.offset();
    test_13_position_top_y = test_13_position.top + 9
    test_13_position_left_x = test_13_position.left + test_13.width() + 15;

    //IN
    var test_21= $("#test_21");
    var test_21_position = test_21.offset();
    test_21_position_top_y = test_21_position.top + 9
    test_21_position_left_x = test_21_position.left + 1;

    //LINE
    $('#test_13_test_21').attr({
        'x1': test_13_position_left_x,
        'y1': test_13_position_top_y,
        'x2': test_21_position_left_x,
        'y2': test_21_position_top_y
    });
</script>
</body>
</html>

Answer 1

这里您正在计算线的新坐标，但没有将它们分配给线元素的 x1,y1,x2,y2 属性。试试更新后的 fiddle

在node1拖拽事件中使用$('#test_13_test_21').attr({x1:test_13_position_left_x,y1:test_13_position_top_y})

并在节点 2 $('#test_13_test_21').attr({x2:test_21_position_left_x,y2:test_21_position_top_y})

线条 SVG 动态

Line SVG dynamic

jquery

svg

dynamic

line