2016-07-22 186 views
-1

喜可有一個人幫我彎曲的路徑喜歡這裏 enter image description here動態靈活的路徑

here u can see it in action(這幾乎是我需要的,但它在畫布上)

問題
我如何計算它?
該公式描述這個 以及如何正確地描述路徑的參數 'd'

這裏是我的代碼(也許它需要一些改進?)

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' 
 
     }); 
 
     } 
 
    } 
 
    } 
 
})
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; 
 
}
<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>

+0

歡迎來到堆棧溢出!請編輯你的問題,把你的代碼放在問題中(而不只是在另一個網站上)。然後,請澄清你的問題。你有什麼問題?你可以使靜態SVG看起來像你想要的?你不知道如何讓SVG看起來像你的願望?你要做什麼,出了什麼問題? – Phrogz

+0

嗨。 TNX。 現在好多了? –

+0

你已經包括了你的代碼(好工作),但是你還沒有描述你的問題,你想要什麼(具體)以及你的問題是什麼。 – Phrogz

回答

0

猜想,我想你想要的是:

  • 在s上顯示兩點creen。
  • 計算接觸這些點的軸對齊的直角三角形。
  • 爲三角形的邊緣繪製填充和彩色線條的三角形。
  • 允許用戶使用鼠標單擊並將點拖動到新的位置。
  • 根據這些點動態更新直角三角形。

目前還不清楚上面哪個部分有問題(除此之外也許是「全部」)。一般來說,計算機編程是關於確定你想要做什麼,將其分解成簡單的步驟(如我上面所做的那樣),然後一次一個地完成這些步驟。

  1. 你能計算屏幕上的兩個「隨機」點嗎? (提示:Math.random()可能是合適的,否則你可以隨便挑兩個固定的起始位置。)
  2. 你能在屏幕上繪製兩個點? (提示:您可以使用SVG <circle>並調整cxcy屬性。)
  3. 您可以計算第三點應該在哪裏? (提示:一種方法是使用一個點的「X」值和其他點的「Y」值。)
  4. 你能畫出這些點之間的實心三角? (提示:一個簡單的方法是使用SVG <polygon>和調整points屬性。)
  5. 你能畫出三條線的邊緣? (提示:使用文檔後面的<line><polyline><polyline>元素,使其在<polygon>之後,以便它們在頂部繪製...但在文檔中使用<circle>元素甚至更低,以便圓圈繪製在其他所有元素之上。)
  6. 你能不能讓這個當用戶點擊並拖動他們留在鼠標下的社交圈嗎? (提示:見this answer和例子礦,或者去谷歌有關使SVG元素可拖動。)
  7. 在您拖動處理程序,你可以重新計算你的三角形,點和線,並全部更新? (提示:您可以使用setAttribute()更新SVG元素的屬性,例如setAttribute(myPoly,'points',arrayOfPoints.join()),或者您可以使用SVG DOM bindings -e.g. myPoly.getItem(0).x = 43。)

您的問題目前太寬泛和模糊。要麼編輯這個問題,以使其具體針對您的確切需求以及不適合您的確切代碼,或者創建一個類似定位的新問題。你的代碼片段對你所有的代碼基本上沒有任何用處。