使用 jquery 或 javascript 自动在元素之间画线

Question

我已经构建了一个甘特图布局，我需要能够绘制任务之间的连接线。这些任务只是具有背景颜色和高度、宽度等的 div。我将向 div 添加属性以指定哪个任务与哪个任务相关。

如何根据任务 div 的偏移量在相关任务之间自动绘制线？

是否有某种库可供我使用，或者我必须手动编程，如果有的话，我从哪里开始。

Answer 1

最后，我将 gantt.twproject.com/distrib/gantt.html 中的代码添加到我自己的甘特图上。以下部分是我使用的。这可以更改为适用于我认为的任何基于 html 的甘特图。

 /*********************************** Draw Link Elements **************************************/

var peduncolusSize = 5;
var lineSize = 0;


function drawlink (from, to, type) {

var rectFrom = buildRect(from);
var rectTo = buildRect(to);

// Dispatch to the correct renderer
if (type == 'start-to-start') {
    $("#gantt").append(
        drawStartToStart(rectFrom, rectTo, peduncolusSize)
    );
} else {
    $("#gantt").append(
        drawStartToEnd(rectFrom, rectTo, peduncolusSize)
    );
}

}

/**
* A representation of a Horizontal line
*/
HLine = function(width, top, left) {
var hl = $("<div>").addClass("taskDepLine");

hl.css({
    height: lineSize,
    left: left,
    width: width,
    top: top - lineSize / 2 -2 //added - 1
 });
  return hl;
 };

/**
* A representation of a Vertical line
*/

VLine = function(height, top, left) {
var vl = $("<div>").addClass("taskDepLine");

vl.css({
    height: height -2,//added -2
    left:left - lineSize / 2,
    width: lineSize,
    top: top
});
return vl;
 };

/**
* Given an item, extract its rendered position
* width and height into a structure.
*/
function buildRect(item) {
  var rect = item.position();
    rect.width = item.width();
  rect.height = item.height();

  return rect;
  }

 /**
   * The default rendering method, which paints a start to end dependency.
 *
 * @see buildRect
 */
 function drawStartToEnd(rectFrom, rectTo, peduncolusSize) {
 var left, top;
 var gheight = $('.main_table').innerHeight();
 var gleft = -5;

 var ndo = $("<div style='position: relative;'> </div>").css({
    "bottom":gheight,
    "left":-5
  });

var currentX = rectFrom.left + rectFrom.width;
var currentY = rectFrom.height / 2 + rectFrom.top;

var useThreeLine = (currentX + 2 * peduncolusSize) < rectTo.left;

if (!useThreeLine) {
    // L1
    if (peduncolusSize > 0) {
        var l1 = new HLine(peduncolusSize, currentY, currentX);
        currentX = currentX + peduncolusSize;
        ndo.append(l1);
    }

    // L2
    var l2_4size = ((rectTo.top + rectTo.height / 2) - (rectFrom.top + rectFrom.height / 2)) / 2;
    var l2;
    if (l2_4size < 0) {
        l2 = new VLine(-l2_4size, currentY + l2_4size, currentX);
    } else {
        l2 = new VLine(l2_4size, currentY, currentX);
    }
    currentY = currentY + l2_4size;

    ndo.append(l2);

    // L3
    var l3size = rectFrom.left + rectFrom.width + peduncolusSize - (rectTo.left - peduncolusSize);
    currentX = currentX - l3size;
    var l3 = new HLine(l3size, currentY, currentX);
    ndo.append(l3);

    // L4
    var l4;
    if (l2_4size < 0) {
        l4 = new VLine(-l2_4size, currentY + l2_4size, currentX);
    } else {
        l4 = new VLine(l2_4size, currentY, currentX);
    }
    ndo.append(l4);

    currentY = currentY + l2_4size;

    // L5
    if (peduncolusSize > 0) {
        var l5 = new HLine(peduncolusSize, currentY, currentX);
        currentX = currentX + peduncolusSize;
        ndo.append(l5);

    }
} else {
    //L1
    var l1_3Size = (rectTo.left - currentX) / 2;
    var l1 = new HLine(l1_3Size, currentY, currentX);
    currentX = currentX + l1_3Size;
    ndo.append(l1);

    //L2
    var l2Size = ((rectTo.top + rectTo.height / 2) - (rectFrom.top + rectFrom.height / 2));
    var l2;
    if (l2Size < 0) {
        l2 = new VLine(-l2Size, currentY + l2Size, currentX);
    } else {
        l2 = new VLine(l2Size, currentY, currentX);
    }
    ndo.append(l2);

    currentY = currentY + l2Size;

    //L3
    var l3 = new HLine(l1_3Size, currentY, currentX);
    currentX = currentX + l1_3Size;
    ndo.append(l3);
}

//arrow
var arr = $("<img src='custom/modules/Project/linkArrow.png'>").css({
    position: 'absolute',
    top: rectTo.top + rectTo.height / 2 - 6,//added -6
    left: rectTo.left - 5
});

ndo.append(arr);

return ndo;
 }

  /**
   * A rendering method which paints a start to start dependency.
   *
   * @see buildRect
   */
   function drawStartToStart(rectFrom, rectTo, peduncolusSize) {
      var left, top;
      var gheight = $('.main_table').innerHeight();
       var ndo = $("<div style='position: relative;'> </div>").css({
       "bottom":gheight,
      "left":-5
   });

var currentX = rectFrom.left;
var currentY = rectFrom.height / 2 + rectFrom.top;

var useThreeLine = (currentX + 2 * peduncolusSize) < rectTo.left;

if (!useThreeLine) {
    // L1
    if (peduncolusSize > 0) {
        var l1 = new HLine(peduncolusSize, currentY, currentX - peduncolusSize);
        currentX = currentX - peduncolusSize;
        ndo.append(l1);
    }

    // L2
    var l2_4size = ((rectTo.top + rectTo.height / 2) - (rectFrom.top + rectFrom.height / 2)) / 2;
    var l2;
    if (l2_4size < 0) {
        l2 = new VLine(-l2_4size, currentY + l2_4size, currentX);
    } else {
        l2 = new VLine(l2_4size, currentY, currentX);
    }
    currentY = currentY + l2_4size;

    ndo.append(l2);

    // L3
    var l3size = (rectFrom.left - peduncolusSize) - (rectTo.left - peduncolusSize);
    currentX = currentX - l3size;
    var l3 = new HLine(l3size, currentY, currentX);
    ndo.append(l3);

    // L4
    var l4;
    if (l2_4size < 0) {
        l4 = new VLine(-l2_4size, currentY + l2_4size, currentX);
    } else {
        l4 = new VLine(l2_4size, currentY, currentX);
    }
    ndo.append(l4);

    currentY = currentY + l2_4size;

    // L5
    if (peduncolusSize > 0) {
        var l5 = new HLine(peduncolusSize, currentY, currentX);
        currentX = currentX + peduncolusSize;
        ndo.append(l5);
    }
} else {
    //L1

    var l1 = new HLine(peduncolusSize, currentY, currentX - peduncolusSize);
    currentX = currentX - peduncolusSize;
    ndo.append(l1);

    //L2
    var l2Size = ((rectTo.top + rectTo.height / 2) - (rectFrom.top + rectFrom.height / 2));
    var l2;
    if (l2Size < 0) {
        l2 = new VLine(-l2Size, currentY + l2Size, currentX);
    } else {
        l2 = new VLine(l2Size, currentY, currentX);
    }
    ndo.append(l2);

    currentY = currentY + l2Size;

    //L3

    var l3 = new HLine((rectTo.left - rectFrom.left ), currentY, currentX);
    currentX = currentX + peduncolusSize + (rectTo.left - rectFrom.left);
    ndo.append(l3);
}

//arrow
var arr = $("<img src='custom/modules/Project/linkArrow.png'>").css({
    position: 'absolute',
    top: rectTo.top + rectTo.height / 2 - 6,//changed to -6
    left: rectTo.left - 5
});

ndo.append(arr);

return ndo;

}