javascript 在元素之间绘制线条

Posted 2021-05-04

function createLine(x1, x2, y1, y2, target) {
  // This calculates the distance lengthwise between two points
  var distance = Math.sqrt( ((x1-x2)*(x1-x2)) + ((y1-y2)*(y1-y2)) );

  // This calculates the midpoint between two points, on which the line will rotate
  var xMid = (x1+x2)/2;
  var yMid = (y1+y2)/2;

  // This calculates the slope of a line between two points
  var slopeInRad = Math.atan2(y1-y2, x1-x2);
  var slopeInDeg =  (slopeInRad * 180) / Math.PI;

  // Changes the CSS of the line
  var line = $(target);
  line.width(distance);
  // line.css('top', yMid);
  // line.css('left', (xMid-(distance/2)));
  line.css('transform', 'rotate('+slopeInDeg+'deg)');
}