js 画两点之间的连线

文章目录

思路描述
- 根据css3角度旋转
- 两点之间，利用离散的点，一个一个的拼凑
案例
- 案例一：CSS3 角度变换
- 案例二：手动添加两点之间的连线

思路描述

根据css3角度旋转

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

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

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

案例

案例一：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><divstyle="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>

js 画两点之间的连线相关推荐

使用二阶贝塞尔曲线画出两点之间的连线
使用二阶贝塞尔曲线画出两点之间的连线二阶贝塞尔曲线公式控制点的位置游戏中需要手动生成多个点来连接两个关卡,以达到更加可视化的目的. 最终效果如图: 二阶贝塞尔曲线公式 B(t) = (1-t)2 ...
在Visio中实现任意两点之间的连线
在Visio中有时候很难实现两点之间的连线,往往连线会胡乱跳转到其他位置,本人在网上查找了各种方法,网上提到最多的方法是取消自动连接,然而本人实验上百次也没什么卵用,连线还是会自动跳转到其他位置.比如 ...
两点之间的连线java_java计算图两点之间的路径实例代码
java计算图两点之间的路径总结本文实例为大家分享了java计算图两点之间的所有路径的具体代码,供大家参考,具体内容如下 1.给定图如下: 2.求0到3之间可达的所有路径这里问题就是关于搜索遍历的 ...
js计算两点之间距离
//两点之间距离 m function getDistance( lat1, lng1, lat2, lng2){var radLat1 = lat1*Math.PI / 180.0;var radL ...
matlab画双箭头线,Matlab画两点之间的有向箭头
function draw_arrow(start_point, end_point) % 从start_point到end_point画一箭头 K = 0.05; %箭头比例系数 theta = p ...
根据两点之间的连线，计算连线到各坐标轴之间的夹角（角度，弧度）
原文出处:http://www.hangge.com/blog/cache/detail_1087.html 开发中,有时需要计算两个坐标点组成的向量与坐标轴之间的夹角,然后我们用计算结果,来对元件进 ...
python如何画点_python matplotlib 如何画点而不要画点之间的连线？
plot(x,y,marker='*') 用marker参数来指定,或者用set_marker函数,参看matplotlib的帮助 >>>from matplotlib.lines ...
C#计算两点之间的角度问题
计算两点之间的角度公式是: 假设点一(X1,Y1),点二(X2,Y2) double angleOfLine = Math.Atan2((Y2 - Y1), (X2 - X2)) * 180 / Ma ...
计算两点之间的角度并取得方向
计算两点之间的角度并取得方向博主博客: https://blog.snwl0311.cn/ 需求: 给定两个点的坐标,求P2在P1的方位. 思路: 通过两点的坐标,计算得到角度,并根据角度范围定义方 ...

js 画两点之间的连线

文章目录

思路描述

根据css3角度旋转

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

案例

案例一：CSS3 角度变换

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

js 画两点之间的连线相关推荐

最新文章

热门文章