SVG 路径：曲线从直线拖尾答案

【问题标题】：SVG Path: Curve tailing off of a straight lineSVG 路径：曲线从直线拖尾
【发布时间】：2015-12-02 08:09:40
【问题描述】：

我需要画一条直线（为了内容分离的目的），然后在它的末端，开始一条连接到指定端点的曲线。

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

作为一种解决方案，延长直线以平滑其过渡为曲线是可以接受的。我只是不确定如何以编程方式执行此操作，因为端点会定期更改并且它必须适用于所有用例。

小提琴：（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;
            }

【问题讨论】：

你的线总是水平的吗？对弧有什么要求？
@MBo 起始线始终是水平的。对弧没有要求。

标签： javascript math svg curve

【解决方案1】：

对于水平线段 (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)

【讨论】：