js 画两点之间的连线

最新推荐文章于 2025-03-24 01:00:00 发布
最新推荐文章于 2025-03-24 01:00:00 发布
阅读量1.4w 收藏 20
点赞数 7
分类专栏： Html5、JavaScript、ES6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbiao68/article/details/103824382
版权

文章目录

思路描述

根据css3角度旋转

根据两点，计算出两点之间的夹角，然后利用css3 旋转的角度，画出斜线

两点之间，利用离散的点，一个一个的拼凑

  1. 计算两点之间位移
  2. 根据长的一条边，一个像素一个像素的拆分为点，然后一个一个拼凑

案例

案例一：CSS3 角度变换

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./demo/jquery.min.js"></script>
  </head>
  <style lang="">
      .point{
          position: absolute;
          border: 5px solid red;
      }
  </style>
  <body>
      <div class="point" style="top:342px;left:513px"></div>
      <div class="point" style="top:450px;left:468px"></div>
      <div style="position:absolute;border-top: 1px solid red;width:117px;top:342px;left:513px;transform:rotate(112.61986494804043deg);transform-origin: 0 50%;"></div>
  </body>
  <script>
      let bodyDiv = document.getElementsByTagName('body')[0]
    // 获得人物中心和鼠标坐标连线，与y轴正半轴之间的夹角
    function getAngle(x1, y1, x2, y2) {
      // 获得人物中心和鼠标坐标连线，与y轴正半轴之间的夹角
      var x = x1 - x2;
      var y = y1 - y2;
      var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
      var cos = y / z;
      var radina = Math.acos(cos); // 用反三角函数求弧度
      var angle = 180 / (Math.PI / radina); // 将弧度转换成角度
      if (x2 > x1 && y2 === y1) {
        // 在x轴正方向上
        angle = 0;
      }
      if (x2 > x1 && y2 < y1) {
        // 在第一象限;
        angle = angle - 90;
      }
      if (x2 === x1 && y1 > y2) {
        // 在y轴正方向上
        angle = -90;
      }
      if (x2 < x1 && y2 < y1) {
        // 在第二象限
        angle = 270 - angle;
      }
      if (x2 < x1 && y2 === y1) {
        // 在x轴负方向
        angle = 180;
      }
      if (x2 < x1 && y2 > y1) {
        // 在第三象限
        angle = 270 - angle;
      }
      if (x2 === x1 && y2 > y1) {
        // 在y轴负方向上
        angle = 90;
      }
      if (x2 > x1 && y2 > y1) {
        // 在四象限
        angle = angle - 90;
      }
      return angle;
    }
    // 第一个点的坐标
    let firstPoint = {
        xPoint: 513,
        YPoint: 342,
    }
    // 第二个点的坐标
    let secondPoint = {
        xPoint: 468,
        YPoint: 450,
    }
    // 计算出两个点之间的距离
    let line = Math.sqrt(Math.pow((firstPoint.xPoint - secondPoint.xPoint), 2) + Math.pow((firstPoint.YPoint - secondPoint.YPoint), 2))
    // 设置一个div 宽度为 两点之间的距离，并且以 transform-origin: 0 50% 为圆心旋转，角度已经算出来
    let lineHtmlStr = `<div style="position:absolute;border-top: 1px solid red;width:${line}px;top:${firstPoint.YPoint}px;left:${firstPoint.xPoint}px;transform:rotate(${getAngle(firstPoint.xPoint,firstPoint.YPoint,secondPoint.xPoint,secondPoint.YPoint)}deg);transform-origin: 0 50%;"></div>`;
    // 添加到body 后面
    bodyDiv.append(lineHtmlStr)
    
  </script>
</html>

案例二：手动添加两点之间的连线

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./demo/jquery.min.js"></script>
  </head>
  <style lang="">
    .point {
      position: absolute;
      border: 5px solid red;
    }
  </style>
  <body>
    <button id="myBtn">创建连线</button>
    <div class="point" style="top:342px;left:513px"></div>
    <div class="point" style="top:450px;left:468px"></div>
    <div
      style="position:absolute;border-top: 1px solid red;width:117px;top:342px;left:513px;transform:rotate(112.61986494804043deg);transform-origin: 0 50%;"
    ></div>
  </body>
  <script>
    document.getElementById("myBtn").onclick = function(e) {
      e.stopPropagation();
      document.addEventListener("click", createLine, false);
    };

    function createLine() {
      let firstPoint = null;
      let secondPoint = null;

      // 创建节点
      function createPoints(event) {
        if (firstPoint === null) {
          firstPoint = {};
          firstPoint.xPoint = event.pageX;
          firstPoint.YPoint = event.pageY;
        } else {
          secondPoint = {};
          secondPoint.xPoint = event.pageX;
          secondPoint.YPoint = event.pageY;
        }

        if (firstPoint !== null && secondPoint !== null) {
          let lineLength = calcLine(firstPoint, secondPoint);
          let angle = getAngle(
            firstPoint.xPoint,
            firstPoint.YPoint,
            secondPoint.xPoint,
            secondPoint.YPoint
          );
          // 设置一个div 宽度为 两点之间的距离，并且以 transform-origin: 0 50% 为圆心旋转，角度已经算出来
          let lineHtmlStr = `<div style="position:absolute;border-top: 1px solid red;width:${lineLength}px;top:${firstPoint.YPoint}px;left:${firstPoint.xPoint}px;transform:rotate(${angle}deg);transform-origin: 0 50%;"></div>`;
          let bodyDiv = document.getElementsByTagName("body")[0];
          // 添加到body 后面
          bodyDiv.innerHTML = bodyDiv.innerHTML + lineHtmlStr;
          //   bodyDiv.appendChild(lineHtml);
          document.removeEventListener("click", createPoints);
        }
      }

      // 计算连线
      function calcLine(firstPoint, secondPoint) {
        // 计算出两个点之间的距离
        let line = Math.sqrt(
          Math.pow(firstPoint.xPoint - secondPoint.xPoint, 2) +
            Math.pow(firstPoint.YPoint - secondPoint.YPoint, 2)
        );
        return line;
      }

      // 计算角度
      // 获得人物中心和鼠标坐标连线，与y轴正半轴之间的夹角
      function getAngle(x1, y1, x2, y2) {
        // 获得人物中心和鼠标坐标连线，与y轴正半轴之间的夹角
        var x = x1 - x2;
        var y = y1 - y2;
        var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
        var cos = y / z;
        var radina = Math.acos(cos); // 用反三角函数求弧度
        var angle = 180 / (Math.PI / radina); // 将弧度转换成角度
        if (x2 > x1 && y2 === y1) {
          // 在x轴正方向上
          angle = 0;
        }
        if (x2 > x1 && y2 < y1) {
          // 在第一象限;
          angle = angle - 90;
        }
        if (x2 === x1 && y1 > y2) {
          // 在y轴正方向上
          angle = -90;
        }
        if (x2 < x1 && y2 < y1) {
          // 在第二象限
          angle = 270 - angle;
        }
        if (x2 < x1 && y2 === y1) {
          // 在x轴负方向
          angle = 180;
        }
        if (x2 < x1 && y2 > y1) {
          // 在第三象限
          angle = 270 - angle;
        }
        if (x2 === x1 && y2 > y1) {
          // 在y轴负方向上
          angle = 90;
        }
        if (x2 > x1 && y2 > y1) {
          // 在四象限
          angle = angle - 90;
        }
        return angle;
      }
      // 解决第一次绑定的时候执行方法
      //   setTimeout(function() {
      document.removeEventListener("click", createPoints);
      // 添加节点
      document.addEventListener("click", createPoints, false);
      //   }, 0);
    }
  </script>
</html>
JavaScript - demo - 两点之间画线
baldyoung
06-10 3277
代码： <html> <head> </head> <body> <script> var f; window.onmousedown = function(e) { if (undefined == f) { f = { x : e.clientX, y : e.clientY } createPointer(f.x, f.y); return;
两点之间连线问题
海棠依旧
10-27 1189
两点之间连线
js实现两点之间画线的方法
10-24
主要介绍了js实现两点之间画线的方法,涉及javascript图形绘制的相关技巧,需要的朋友可以参考下
前端面试：前端两个 dom 元素是可以拖拽的， 要实现两个 dom 之间的连接线，如何实现？
最新发布
m0_67537062的博客
03-24 876
当用户拖动其中一个元素时，连接线会自动更新位置，提供了直观的连接效果。在前端开发中，实现两个可拖拽的 DOM 元素之间连接线的功能通常涉及到以下几个步骤：设置可拖拽元素、计算连接线的起始和结束位置，并在这些位置之间绘制连线。// 清空 canvas。/* 让 canvas 不阻止鼠标事件 */// 设置 canvas 的宽高为窗口的宽高。// 计算元素在页面上的绝对位置。// 初始绘制连接线。
js 计算在AB两点连线上，距离A点一定距离的点的坐标
XKFC1的博客
01-14 550
js 计算在AB两点连线上，距离A点一定距离的点的坐标
JS两点画线
域名空间商
04-22 2539
New Document
JS 实现两点间连线的绘图方法
### 知识点三：两点连线的绘制逻辑 两点之间的连线通常需要确定两个端点的坐标。在Canvas上绘制线条，我们需要使用`moveTo(x,y)`和`lineTo(x,y)`方法，分别表示移动画笔到指定坐标位置和从当前位置绘制一条线到另一...
JavaScript实现连连看连线算法
10-17
JavaScript实现连连看连线算法涉及到的基本知识点包括游戏循环、事件处理、数据结构和算法逻辑等。 从给定的文件内容来看，实现连连看连线算法主要分为三种情况：直线连接、一个拐点连接和两个拐点连接。下面是对这...
JS亮点之间画直线
qq734122899的博客
05-22 1683
最近需求要在页面上画直线，下面有两个方法 第一种：这是通过点来生成一条直线         /*************   画点   **************      x,y           点所在的屏幕坐标（像素）      color       颜色（字符串值）      size         大小（像素）  ***********************
js实现任意两点之间画虚线
永不止步！！！！
12-30 7504
var canvasWidth = Math.min( 800 , $(window).width() - 20 ) //var canvasWidth = 550; var canvasHeight = canvasWidth; var canvas = document.getElementById("canvas"); //得到canvas var context = canvas
DIV+JS画图,DIV与DIV之间的连线!
11-15
实现DIV与DIV之间的连线,工程流程图那样.使用DIV+JS! 我封装了一个基于vml/svg画线条的跨浏览器的函数 用法： var g = new FlowGraphic(); var arrow = g.drawArrow(5,26,200,300,"red"); var arrow = g.drawArrow(5,26,200,200,"red");
jsPlumb 强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等
10-28
jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架，十分强大
在线考试连线题 js demo
02-22
在线考试连线题 js demo
svg.js和jquery实现连线功能
09-01
svg.js和jquery实现连线功能，（html网页）。svg.js和jquery实现连线功能。
JS在两个（或更多）元素之间绘制线或带箭头的线
记录美好生活
03-22 772
JS在两个（或更多）元素之间绘制线或带箭头的线 svg实现
D3.js点击两个节点时动态添加连线
weixin_43891869的博客
12-27 893
join方法结合了enter、update和exit三个操作，使得您可以同时处理新添加的元素、更新现有元素和移除不再需要的元素。这段代码确保了在点击两个节点时动态添加连线，并且箭头标记正确配置，使得箭头只显示在连线的末端。exit => exit.remove() // 移除多余的元素。确保您的节点数据中包含id属性，并且在添加连线时使用这些id。在您的代码中，link选择集应该在添加连线之前初始化。确保在力模拟的tick事件中更新连线的位置。// 更新力模拟的节点和连线位置。// 初始化SVG和力模拟。
前端JS也可以连点成线（Vue中运用 AntVG6）
热门推荐
官方推荐
12-22 4万+
由于antVG6的内容很多，本篇内容仅仅为大家介绍了安装和快速生成一个页面；更多的配置我们放到下篇中为大家讲解！
Javascript利用canvas绘制两点间曲线、箭头等
zhaoyang314的博客
10-24 1139
Javascript利用canvas，在两点间绘制曲线，矩形，并且在矩形中绘制文字，实现居中对齐，同时实现了箭头绘制，效果如图: 二、css代码如下： 三、Javascript代码如下 ok，代码就是如此，完整代码如下：
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值