快捷導(dǎo)航

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

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

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

實現(xiàn)原理

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

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

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

JavaScript實現(xiàn)步驟

計算連線的中點坐標(biāo)

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

計算連線的長度

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

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

計算需要旋轉(zhuǎn)的角度

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

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

這個樣子：

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

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

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

完整的JavaScript實現(xiàn)

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

    // 終點坐標(biāo)
    const endY = endObj.y;
    const endX = endObj.x;

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

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

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

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

您可能感興趣的文章: