Question

你可以帮助我像这里一样弯曲路径

here u can see it in action（这几乎是我需要的，但它在画布上）

的问题
我怎么能算出来的呢？
哪个公式描述了这个以及如何正确描述参数＆＃39; d＆＃39;路径

这是我的代码（也许需要一些改进？）

＆＃13;

var app = angular.module('app', []);


app.controller("ctrl", function ($scope) {
  var lineGraph = d3.select("#container").append("svg:svg").attr("width", '100%').attr("height", '100%'); 
  $scope.linesArr = [];
  $scope.blocksArr = [{
    id: 0,
    x: 0,
    y: 0,
    lineToID: [2]
  },{
    id: 1,
    x: 0,
    y: 0,
    lineToID: [0,2]
  },{
    id: 2,
    x: 0,
    y: 0,
    lineToID: []
  }];

  $scope.createLines = function(){
    for(var i = 0; i < $scope.blocksArr.length; i++){
      if($scope.blocksArr[i].lineToID.length){
        for(var j = 0; j < $scope.blocksArr[i].lineToID.length; j++){
          $scope.linesArr[$scope.blocksArr[i].id + ":"+j] = (lineGraph.append("svg:line"));
        }
      }
    }
  };
  $scope.createLines();

  $scope.checkPoints = function(){

    for(var i = 0; i < $scope.blocksArr.length; i++){
      $scope.blocksArr[i].x = parseInt(document.querySelector('#b' + i).style.left) + (document.querySelector('#b' + i).offsetWidth / 2);
      $scope.blocksArr[i].y = parseInt(document.querySelector('#b' + i).style.top) + (document.querySelector('#b' + i).offsetHeight / 2);

      if($scope.blocksArr[i].lineToID.length){
        for(var j = 0; j < $scope.blocksArr[i].lineToID.length; j++){
          $scope.linesArr[$scope.blocksArr[i].id+":"+j]
            .attr("x1", $scope.blocksArr[$scope.blocksArr[i].id].x)
            .attr("y1", $scope.blocksArr[$scope.blocksArr[i].id].y)
            .attr("x2", $scope.blocksArr[$scope.blocksArr[i].lineToID[j]].x)
            .attr("y2", $scope.blocksArr[$scope.blocksArr[i].lineToID[j]].y)
            .style("stroke", "rgb(6,120,155)");
          //console.log();
        }
      }
    }
  };


  $scope.dragOptions = {
    start: function(e) {
      //console.log("STARTING");
    },
    drag: function(e) {
      $scope.checkPoints();

      //console.log("DRAGGING");
    },
    stop: function(e) {
      //console.log("STOPPING");
    },
    container: 'container'
  }


});












app.directive('ngDraggable', function($document) {
  return {
    restrict: 'A',
    scope: {
      dragOptions: '=ngDraggable'
    },
    link: function(scope, elem, attr) {
      var startX, startY, x = 0, y = 0,
          start, stop, drag, container;

      var width  = elem[0].offsetWidth,
          height = elem[0].offsetHeight;

      // Obtain drag options
      if (scope.dragOptions) {
        start  = scope.dragOptions.start;
        drag   = scope.dragOptions.drag;
        stop   = scope.dragOptions.stop;
        var id = scope.dragOptions.container;
        if (id) {
          container = document.getElementById(id).getBoundingClientRect();
        }
      }

      // Bind mousedown event
      elem.on('mousedown', function(e) {
        e.preventDefault();
        startX = e.clientX - elem[0].offsetLeft;
        startY = e.clientY - elem[0].offsetTop;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
        if (start) start(e);
      });

      // Handle drag event
      function mousemove(e) {
        y = e.clientY - startY;
        x = e.clientX - startX;
        setPosition();
        if (drag) drag(e);
      }

      // Unbind drag events
      function mouseup(e) {
        $document.unbind('mousemove', mousemove);
        $document.unbind('mouseup', mouseup);
        if (stop) stop(e);
      }

      // Move element, within container if provided
      function setPosition() {
        if (container) {
          if (x < container.left) {
            x = container.left;
          } else if (x > container.right - width) {
            x = container.right - width;
          }
          if (y < container.top) {
            y = container.top;
          } else if (y > container.bottom - height) {
            y = container.bottom - height;
          }
        }

        elem.css({
          top: y + 'px',
          left:  x + 'px'
        });
      }
    }
  }
})

＆＃13;

html,body, #container{
  height: 100%;
  margin: 0;
}
.box{
  position: absolute;
  width: 100px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #c07f7f;
  text-align: center;
  background: #f3f4ff;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div ng-controller="ctrl" ng-app="app" id="container">
  <div class="box" id="b{{$index}}" ng-repeat="i in blocksArr" ng-draggable='dragOptions' ng-style="{top: blocksArr[$index].y, left: blocksArr[$index].x}">{{$index}}</div>
</div>

＆＃13;

Answer 1

猜猜，我在想你想要的是：

在屏幕上显示两点。
计算接触这些点的轴对齐直角三角形。
为填充绘制三角形，为三角形边缘绘制彩色线条。
允许用户使用鼠标单击并将点拖动到新位置。
根据这些点动态更新直角三角形。

目前还不清楚上面哪一部分你遇到了麻烦（除了，或许，“所有这些”）。一般而言，计算机编程是关于识别您想要做什么，将其分解为简单的步骤（如上所述），然后一次一个地处理这些步骤。

你能在屏幕上计算两个'随机'点吗？（提示：Math.random()可能是合适的，否则您可以选择两个固定的起始位置。）
你能在屏幕上画两点吗？（提示：您可以使用SVG <circle>并调整cx和cy属性。）
你能算出第三点应该在哪里吗？（提示：一种方法是使用一个点的'x'值和另一个点的'y'值。）
你能在这些点之间绘制一个填充的三角形吗？（提示：一种简单的方法是使用SVG <polygon>并调整points属性。）
你能为边缘画三条线吗？（提示：使用文档后面的<line>或<polyline>元素而不是<polygon>，以便它们在顶部绘制...但<circle>元素甚至更低文档，以便圆圈绘制其他所有内容。）
你可以做到这一点，当用户点击并拖动它们留在鼠标下方的圆圈时？（提示：请参阅this answer和我的例子，或者谷歌关于使SVG元素可拖动。）
在您的拖动处理程序中，您可以重新计算三角形和点和线并全部更新吗？（提示：您可以使用setAttribute()更新SVG元素的属性，例如setAttribute(myPoly,'points',arrayOfPoints.join())，也可以使用SVG DOM bindings - 例如myPoly.getItem(0).x = 43。）

你的问题目前过于宽泛和模糊。编辑此问题可使其特定于您的确切愿望以及不适合您的确切代码，或创建一个类似目标的新问题。您的代码段基本上对您所拥有的所有代码没有任何用处。

SVG中两点之间的动态灵活路径

1 个答案: