动态灵活的路径
问题描述:
喜可有一个人帮我弯曲的路径喜欢这里 动态灵活的路径
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>
答
猜想,我想你想要的是:
- 在s上显示两点creen。
- 计算接触这些点的轴对齐的直角三角形。
- 为三角形的边缘绘制填充和彩色线条的三角形。
- 允许用户使用鼠标单击并将点拖动到新的位置。
- 根据这些点动态更新直角三角形。
目前还不清楚上面哪个部分有问题(除此之外也许是“全部”)。一般来说,计算机编程是关于确定你想要做什么,将其分解成简单的步骤(如我上面所做的那样),然后一次一个地完成这些步骤。
- 你能计算屏幕上的两个“随机”点吗? (提示:
Math.random()
可能是合适的,否则你可以随便挑两个固定的起始位置。) - 你能在屏幕上绘制两个点? (提示:您可以使用SVG
<circle>
并调整cx
和cy
属性。) - 您可以计算第三点应该在哪里? (提示:一种方法是使用一个点的“X”值和其他点的“Y”值。)
- 你能画出这些点之间的实心三角? (提示:一个简单的方法是使用SVG
<polygon>
和调整points
属性。) - 你能画出三条线的边缘? (提示:使用文档后面的
<line>
或<polyline>
或<polyline>
元素,使其在<polygon>
之后,以便它们在顶部绘制...但在文档中使用<circle>
元素甚至更低,以便圆圈绘制在其他所有元素之上。) - 你能不能让这个当用户点击并拖动他们留在鼠标下的社交圈吗? (提示:见this answer和例子矿,或者去谷歌有关使SVG元素可拖动。)
- 在您拖动处理程序,你可以重新计算你的三角形,点和线,并全部更新? (提示:您可以使用
setAttribute()
更新SVG元素的属性,例如setAttribute(myPoly,'points',arrayOfPoints.join())
,或者您可以使用SVG DOM bindings -e.g.myPoly.getItem(0).x = 43
。)
您的问题目前太宽泛和模糊。要么编辑这个问题,以使其具体针对您的确切需求以及不适合您的确切代码,或者创建一个类似定位的新问题。你的代码片段对你所有的代码基本上没有任何用处。
欢迎来到堆栈溢出!请编辑你的问题,把你的代码放在问题中(而不只是在另一个网站上)。然后,请澄清你的问题。你有什么问题?你可以使静态SVG看起来像你想要的?你不知道如何让SVG看起来像你的愿望?你要做什么,出了什么问题? – Phrogz
嗨。 TNX。 现在好多了? –
你已经包括了你的代码(好工作),但是你还没有描述你的问题,你想要什么(具体)以及你的问题是什么。 – Phrogz