快捷導(dǎo)航

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

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

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

實(shí)現(xiàn)原理

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

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

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

JavaScript實(shí)現(xiàn)步驟

計(jì)算連線的中點(diǎn)坐標(biāo)

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

計(jì)算連線的長(zhǎng)度

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

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

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

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

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

這個(gè)樣子：

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

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

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

完整的JavaScript實(shí)現(xiàn)

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

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

    // 用勾股定律計(jì)算出斜邊長(zhǎng)度及其夾角（即連線的旋轉(zhuǎn)角度）
    const a = endX - startX;
    const b = endY - startY;
    // 計(jì)算連線長(zhǎng)度
    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實(shí)現(xiàn)繪制兩個(gè)坐標(biāo)之間的連線的詳細(xì)內(nèi)容，更多關(guān)于JavaScript坐標(biāo)連線的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: