如何使用 html 畫布和打字稿繪制給定兩個點的三角形

Question

我確定我錯過了一些明顯的東西，但我正在嘗試使用 html 畫布在兩點之間繪制二次曲線，為此我需要一個“控制點”來設置曲線。 曲線的起點和終點已知，控制點未知，因為線條是動態旋轉的。 我只需要找到三角形的第三個點即可設置控制點

我使用這個函數來找到線的中點：

lineMidPoint(p: Point, q: Point): Point {

    let x = (p.x + q.x) / 2;

    let y = (p.y + q.y) / 2; 

    return { x: x, y: y } as Point;
}

此功能按預期工作。

然后是第二個函數來獲取線相對於原點的角度：

getAngleRelativeToOrigin(start: Point, end: Point): number {

    let dx = start.x - end.x;

    let dy = start.y - end.y;

    let radians = Math.atan2(dy, dx);

    return radians * (180/Math.PI);
}

很難驗證此功能是否有效。

最后我有一個函數可以圍繞線的起點或終點旋轉中點以找到控制點：

getControlPoint(start: Point, end: Point): Point {

    let midPoint = this.lineMidPoint(start, end);

    let offset = 45 * (Math.PI / 180);

    let theta = this.getAngleRelativeToOrigin(start, end) + offset;

    let x = Math.cos(theta) * (start.x - midPoint.x) - Math.sin(theta) * (start.y - midPoint.y) + midPoint.x;

    let y = Math.sin(theta) * (start.x - midPoint.x) - Math.cos(theta) * (start.y - midPoint.y) + midPoint.y;

    return { x: x, y: y } as Point;
}

結果是這樣的：

那些沒有連接到圓圈的線（例如最右邊的）應該都是它們開始的線的長度/ 2，但它們顯然不一致。

當我繪制二次曲線時，它們都很不穩定：

任何人都可以伸出援助之手，告訴我哪里出了問題嗎？

Answer 1

好的，你的中間點是正確的。 現在確定差向量和垂直於線

let dx = start.x - end.x;
let dy = start.y - end.y;
let leng = Math.hypot(dx, dy);
let px = - dy / leng;   //and get perpendicular unit vector
let py = dx / leng;

我不確定你想實現什么邏輯，所以我建議在距離線中間d處獲得控制點（所以曲線是對稱的）

let xxx = midPoint.x + d * px;
let yyy = midPoint.y + d * py;

如果您想圍繞start旋轉中間點，可以使用下一種方法來完成：

let cost = Math.cos(45 * (Math.PI / 180));
let sint = Math.sin(45 * (Math.PI / 180));

let x = start.x + 0.5 * dx * cost - 0.5 * dy * sint;
let y = start.y + 0.5 * dx * sint + 0.5 * dy * cost;