JavaScript 实现绘制两个坐标之间的连线

实现原理

先概括一下大概的实现原理,分为两步:

第一步:我们需要在两个坐标连线的中点上创建一条长度和连线长度相等的直线,这条线的中点也在两个坐标连线的中点上。此时效果大概是这样子:

第二步:在第一步的基础上,我们再将这条直线顺时针旋转图上红色虚线标出的角度,它就成为了两个坐标之间的连线。

JavaScript实现步骤

计算连线的中点坐标

javascript 复制代码
const midX = (x1 + x2) / 2;
const midY = (y1 + y2) / 2;

计算连线的长度

下图中的虚线和两个坐标间的连线正好组成一个三角形,由勾股定理可以计算出连线的长度:

javascript 复制代码
  const a = x2 -x1;
  const b = y2 - y1;
  const length = Math.sqrt(a * a + b * b);

计算需要旋转的角度

由下图我们可以看出,这条水平的直线需要旋转的角度实际上就是三角形左侧夹角的角度。

为了方便求这个夹角的角度,我们假设可以把这个三角形平移到原点,变成这个样子:

之后,我们就可以利用Math.atan2(y, x)求得这个夹角的角度。这个方法会返回某个坐标到原点的连线与x轴正方向之间的弧度。需要注意的是:该方法返回的是弧度, 角度 = (弧度 * 180) / Math.PI

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

至此我们得到了连线的中点坐标、连线的长度、连线旋转的角度。我们通过固定定位 + top/left实现连线的定位、transform: rotate()实现连线的旋转。

完整的JavaScript实现

javascript 复制代码
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)`,
    };
};

引用文章:
css实现两点之间的连线
Math.atan2用法及应用场景

相关推荐
生椰拿铁You1 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生12 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_3842410915 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap27 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish35 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull38 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun1 小时前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜1 小时前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript