5

我正在努力找出正确的几何形状以找到沿弧线的路径的中点。假设我有两点：x1，y1 和 x2，y2。在如下一行中：

弧

x1,y1 是 A。x2,y2 是 B。

我正在尝试编写一个函数，我可以在上图中提供距离（-1 或 1）并返回 x 和 y 坐标。这样我可以在路径中添加一个中间点来渲染下面的行：

弧

[更新]

你必须使用线的角度找出 x 和 y 正在寻找的东西。下图显示直线是 45 度，三角形的一侧是 5，一侧是 1。由此，您可以计算 x 和 y。

弧

我想我用下面的代码和 小提琴示例弄明白了：

var svgContainer = d3.select("#canvas").append("svg")
                                       .attr("width", 400)
                                       .attr("height", 400);

var lineData = [ { "x": 0,   "y": 0},  { "x": 100,  "y": 100}];

var midPoint = {
    x:Math.abs(lineData[1].x - lineData[0].x)/2,
    y:Math.abs(lineData[1].x - lineData[0].x)/2
};

function calcAngle(x1, x2, y1, y2) {
    var calcAngleVal = Math.atan2(x1-x2,y1-y2)*(180/Math.PI);

    if (calcAngleVal < 0) {
        calcAngleVal = Math.abs(calcAngleVal);
    } else{
        calcAngleVal = 360 - calcAngleVal;
    }

    return calcAngleVal;
}

var angle = calcAngle(lineData[0].x, lineData[1].x,lineData[0].y,lineData[1].y);


var sin = Math.sin(angle * Math.PI / 180);
var cos = Math.cos(angle * Math.PI / 180);

var xLen = Math.abs(lineData[1].x - lineData[0].x)/2;
var yLen = Math.abs(lineData[1].y - lineData[0].y)/2;


var n = 1.5;

var midpointArc = {
    x: midPoint.x + (sin * (n * 25)),
    y: midPoint.y + (cos * (n * 25)) 
 };

lineData.splice(1,0,midpointArc);

var lineFunction = d3.svg.line()
                         .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
                         .interpolate("basis");

var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 1)
                            .attr("fill", "none");

var pathEl   = lineGraph.node();
var curvedMidpoint = pathEl.getPointAtLength(pathEl.getTotalLength()/2);

svgContainer.append("circle")
            .attr('r',5)
            .attr('cx', curvedMidpoint.x)
            .attr('cy', curvedMidpoint.y)
4

1 回答 1

8

要找到任何路径的中点（不仅仅是圆弧）：

var pathEl   = d3.select('#pathId').node();
var midpoint = pathEl.getPointAtLength(pathEl.getTotalLength()/2);

改编自 Duopixel 的答案和bl.ockus。

于 2013-09-05T03:34:31.960 回答