Question

我正在尝试制作工作流设计师。用户可以拖动和构建自己的流程。但是连接两个div之间的一条线对我来说可能是一个问题。我试试计算svg的位置和大小来画线。但是当两个div时太近了。这条线会出现在错误的地方。我试着判断两个div之间的不同位置（左上，右上，左下，下 - 右）。

drawLine = function() {
    var lineX, lineY, moveX, moveY, svgPath;
    svgPath = $element[0].querySelector('.svgPath');
    if (Math.abs($scope.from.x - $scope.to.x) > $scope.svgLineClientWidth + 20) {
      $element[0].style.width = Math.abs($scope.to.x - $scope.from.x) - $scope.svgLineClientWidth + 'px';
      $element[0].style.height = Math.abs($scope.to.y - $scope.from.y) + $scope.svgLineClientHeight + 'px';
      if ($scope.to.y > $scope.from.y) {
        $element[0].style.top = $scope.from.y + 'px';
        if ($scope.to.x >= $scope.from.x) {
          $element[0].style.left = $scope.from.x + $scope.svgLineClientWidth + 'px';
          moveX = 0 + "";
          moveY = $scope.svgLineClientHeight / 2 + "";
          lineX = (Math.abs($scope.to.x - $scope.from.x) - $scope.svgLineClientWidth - 16) + "";
          lineY = (Math.abs($scope.to.y - $scope.from.y) - 15) + "";
          return svgPath.setAttribute('d', "M" + moveX + " " + moveY + "l" + lineX + " " + lineY);
        } else {
          $element[0].style.left = $scope.from.x - ($scope.from.x - $scope.to.x - $scope.svgLineClientWidth) + 'px';
          moveX = (Math.abs($scope.to.x - $scope.from.x) - $scope.svgLineClientWidth) + "";
          moveY = $scope.svgLineClientHeight / 2 + "";
          lineX = -(Math.abs($scope.to.x - $scope.from.x) - $scope.svgLineClientWidth - 16) + "";
          lineY = (Math.abs($scope.to.y - $scope.from.y) - 15) + "";
          return svgPath.setAttribute('d', "M" + moveX + " " + moveY + "l" + lineX + " " + lineY);
        }
      } else {
        $element[0].style.top = $scope.from.y - (Math.abs($scope.to.y - $scope.from.y)) + 'px';
        if ($scope.to.x > $scope.from.x) {
          $element[0].style.left = $scope.from.x + $scope.svgLineClientWidth + 'px';
          moveX = 0 + "";
          moveY = (Math.abs($scope.to.y - $scope.from.y) + $scope.svgLineClientHeight / 2) + "";
          lineX = (Math.abs($scope.to.x - $scope.from.x) - $scope.svgLineClientWidth - 12) + "";
          lineY = -(Math.abs($scope.to.y - $scope.from.y) - 15) + "";
          return svgPath.setAttribute('d', "M" + moveX + " " + moveY + "l" + lineX + " " + lineY);
        } else {
          $element[0].style.left = $scope.from.x - ($scope.from.x - $scope.to.x - $scope.svgLineClientWidth) + 'px';
          moveX = (Math.abs($scope.to.x - $scope.from.x) - $scope.svgLineClientWidth) + "";
          moveY = (Math.abs($scope.to.y - $scope.from.y) + $scope.svgLineClientHeight / 2) + "";
          lineX = -(Math.abs($scope.to.x - $scope.from.x) - $scope.svgLineClientWidth - 12) + "";
          lineY = -(Math.abs($scope.to.y - $scope.from.y) - 15) + "";
          return svgPath.setAttribute('d', "M" + moveX + " " + moveY + "l" + lineX + " " + lineY);
        }
      }
    } else {
      $element[0].style.width = Math.abs($scope.from.x - $scope.to.x) + $scope.svgLineClientWidth + 'px';
      $element[0].style.height = Math.abs($scope.from.y - $scope.to.y) - $scope.svgLineClientHeight + 'px';
      if ($scope.to.y > $scope.from.y) {
        $element[0].style.top = $scope.from.y + $scope.svgLineClientHeight + 'px';
        if ($scope.to.x > $scope.from.x) {
          $element[0].style.left = $scope.from.x + 'px';
          moveX = $scope.svgLineClientHeight + "";
          moveY = 0 + "";
          lineX = Math.abs($scope.from.x - $scope.to.x) - 20 + "";
          lineY = Math.abs($scope.from.y - $scope.to.y) - $scope.svgLineClientHeight - 16 + "";
          svgPath.setAttribute('d', "M" + moveX + " " + moveY + "l" + lineX + " " + lineY);
        } else {
          $element[0].style.left = $scope.to.x + 'px';
          moveX = Math.abs($scope.from.x - $scope.to.x) + $scope.svgLineClientWidth - $scope.svgLineClientHeight + "";
          moveY = 0 + "";
          lineX = '-' + Math.abs(Math.abs($scope.from.x - $scope.to.x) - 20) + "";
          lineY = Math.abs($scope.from.y - $scope.to.y) - $scope.svgLineClientHeight - 16 + "";
          svgPath.setAttribute('d', "M" + moveX + " " + moveY + "l" + lineX + " " + lineY);
        }
      } else {
        $element[0].style.top = $scope.from.y - Math.abs($scope.from.y - $scope.to.y) + $scope.svgLineClientHeight + 'px';
        if ($scope.to.x > $scope.from.x) {
          $element[0].style.left = $scope.from.x + 'px';
          moveX = $scope.svgLineClientHeight + "";
          moveY = Math.abs($scope.from.y - $scope.to.y) - $scope.svgLineClientHeight + "";
          lineX = Math.abs($scope.from.x - $scope.to.x) - 20 + "";
          lineY = -(Math.abs($scope.from.y - $scope.to.y) - $scope.svgLineClientHeight - 16) + "";
          svgPath.setAttribute('d', "M" + moveX + " " + moveY + "l" + lineX + " " + lineY);
        } else {
          $element[0].style.left = $scope.to.x + 'px';
          moveX = Math.abs($scope.from.x - $scope.to.x) + $scope.svgLineClientHeight + "";
          moveY = Math.abs($scope.from.y - $scope.to.y) - $scope.svgLineClientHeight + "";
          lineX = -(Math.abs($scope.from.x - $scope.to.x) - 20) + "";
          lineY = -(Math.abs($scope.from.y - $scope.to.y) - $scope.svgLineClientHeight - 16) + "";
          svgPath.setAttribute('d', "M" + moveX + " " + moveY + "l" + lineX + " " + lineY);
        }
      }
    }
  };

因为div的大小太小，以至于该行不能显示如下：

那么有另一种更好的方法来连接两个div与一条线？一种更简单，更准确的方法来计算线的moveTo和lineTo？

这是演示
https://plnkr.co/edit/ALVkJljbaek6dNTiWZGD?p=preview

用svg中的一行连接两个div的方法

0 个答案: