JavaScript實現(xiàn)繪制兩個坐標之間的連線

更新時間：2023年11月07日 12:01:41 作者：我人很好

本文主要介紹了JavaScript實現(xiàn)繪制兩個坐標之間的連線功能,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

實現(xiàn)原理

先概括一下大概的實現(xiàn)原理，分為兩步：

第一步：我們需要在兩個坐標連線的中點上創(chuàng)建一條長度和連線長度相等的直線，這條線的中點也在兩個坐標連線的中點上。此時效果大概是這樣子：

第二步：在第一步的基礎上，我們再將這條直線順時針旋轉圖上紅色虛線標出的角度，它就成為了兩個坐標之間的連線。

JavaScript實現(xiàn)步驟

計算連線的中點坐標

const midX = (x1 + x2) / 2;
const midY = (y1 + y2) / 2;

計算連線的長度

下圖中的虛線和兩個坐標間的連線正好組成一個三角形，由勾股定理可以計算出連線的長度：

  const a = x2 -x1;
  const b = y2 - y1;
  const length = Math.sqrt(a * a + b * b);

計算需要旋轉的角度

由下圖我們可以看出，這條水平的直線需要旋轉的角度實際上就是三角形左側夾角的角度。

為了方便求這個夾角的角度，我們假設可以把這個三角形平移到原點，變成

這個樣子：

之后，我們就可以利用Math.atan2(y, x)求得這個夾角的角度。這個方法會返回某個坐標到原點的連線與x軸正方向之間的弧度。需要注意的是：該方法返回的是弧度， 角度 = (弧度 * 180) / Math.PI。

  const a = x2 -x1;
  const b = y2 - y1;
  const c = (180 * Math.atan2(b, a)) / Math.PI;

至此我們得到了連線的中點坐標、連線的長度、連線旋轉的角度。我們通過固定定位 + top/left實現(xiàn)連線的定位、transform: rotate()實現(xiàn)連線的旋轉。

完整的JavaScript實現(xiàn)

export const drawLine = (startObj, endObj) => {
    // 起點坐標
    const startY = startObj.y;
    const startX = startObj.x;

    // 終點坐標
    const endY = endObj.y;
    const endX = endObj.x;

    // 用勾股定律計算出斜邊長度及其夾角（即連線的旋轉角度）
    const a = endX - startX;
    const b = endY - startY;
    // 計算連線長度
    const length = Math.sqrt(a * a + b * b);
    // 弧度值轉換為角度值
    const c = (180 * Math.atan2(b, a)) / Math.PI;

    // 連線中心坐標
    const midX = (endX + startX) / 2;
    const midY = (endY + startY) / 2;
    const deg = c <= -90 ? 360 + c : c; // 負角轉換為正角

    return {
        position: 'fixed',
        top: `${midY}px`,
        left: `${midX - length / 2}px`,
        width: `${length}px`,
        transform: `rotate(${deg}deg)`,
    };
};

以上就是JavaScript實現(xiàn)繪制兩個坐標之間的連線的詳細內容，更多關于JavaScript坐標連線的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: