SVG路径:直线上的曲线

SVG Path: Curve tailing off of a straight line

本文关键字：曲线 路径 SVG      更新时间：2023-09-26

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

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

作为一种解决方案，可以延长直线以使其平滑过渡为曲线。我只是不知道如何以编程的方式进行这项工作，因为端点会定期更改，而且它必须适用于所有用例。

Fiddle：（五分之一刻度）

http://jsfiddle.net/7k2neef2/1/

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

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

相关文章：