SVG路径：曲线拖尾直线

我需要绘制一条直线（用于内容分离目的），然后在其末尾开始一条连接到指定端点的曲线。SVG路径：曲线拖尾直线

我的问题是在完成直线后开始绘制圆弧时所做的急转弯。我怎样才能消除这个尖锐的角落？

作为一种解决方案，可以通过扩展直线来平滑过渡到曲线。我只是不确定如何通过编程来完成这个任务，因为终点会定期更改，并且必须适用于所有用例。

小提琴：（1/5级）

SVG路径：

M 56 494 l 324 0 A 100 100 0 0 0 231 275

我要指出，我用一个函数来推导出弧然后将其附加到直线上。这里的功能：

  function describeArc(x, y, radius, startAngle, endAngle){ 

       var arcSweep = endAngle - startAngle <= 180 ? "0" : "1"; 

       var d = [ 
        "A", radius, radius, 0, arcSweep, 0, x, y 
       ].join(" "); 

       d = 'M 56 494 l 324 0 ' + d; 

       return d; 
      }

来源

2015-12-02 daveycroqet

您的线条是否总是水平的？什么是弧的要求？ – MBo

@MBo起始行始终是水平的。对弧线没有要求。 – daveycroqet

对于水平线段（X1，Y1） - （X2，Y1）和点（PX，PY），我们可以建立与软结圆弧。圆心坐标

cx = x2 
cy = y1 + R

让我们

dx = px - x2 
dy = py - y1 
then 
dx^2 + (R-dy)^2 = R^2 
dx^2 + R^2 - 2 * R * dy + dy^2 = R^2 
dx^2 + dy^2 = 2 * R * dy 
R = (dx^2 + dy^2)/(2*dy)

现在我们有中心，圆弧的半径，出发点和落脚点。如果您需要建立弧线的角度，则开始角度为-Pi/2 (if py > y1)，结束角度为atan2(py-cy, px-cx)

来源

2015-12-02 18:47:31 MBo

SVG路径：曲线拖尾直线

回答

相关问题