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路徑：曲線拖尾直線

回答

相關問題