確定兩條線之間的SVG路徑上的角度

Question

我試圖讓我的機器人遵循在網頁上繪製的SVG路徑的路徑。爲了簡單起見，假設SVG是這樣的：

<svg xmlns="http://www.w3.org/2000/svg"> 
    <path id="path" d="M 100 100 L 300 300 L 100 500 z"> 
</svg> 

這使一個三角形。

機器人將從100,100開始。目標是讓他移動到300,300，但我不知道如何獲得機器人需要從100,100轉向開始移動的角度朝300,300.

我已經包含了一個糟糕的放在一起的圖像顯示我試圖得到的角度。雖然這只是一個簡單的例子，顯然是90度，但我正在用它來弄清楚如何在更復雜的圖紙上做到這一點。

我在javascript中寫這個。

Answer 1

爲了計算角度之間的兩個點使用反正切（斜率），其中斜率= （受體P2y - P1Y）/（P2X - P1X）

其中：

P2y = coordinate "y" of point 2 
P1y = coordinate "y" of point 1 
P2x = coordinate "x" of point 2 
P1x = coordinate "x" of point 1 

請注意arctan函數返回的符號（+或 - ），您必須對此使用常識和邏輯。

另外請注意，您的路徑使用絕對座標（L），這意味着點3將具有與點1相同的「x」座標，而不是如圖所示，當它更可能是相對座標（l）