css 定位连线_前端css实现两点连线

// dots是点的集合 : Array

dots.map((dot, index) => {

// 最后一个点没有连线

if (!dot[index + 1]) return;

const AB = {

x: dots[index + 1].x - dot.x,

y: dots[index + 1].y - dot.y,

}

const BC = {

x: 0,

y: 1,

}

// 向量的模

const a = Math.sqrt(Math.pow(AB.x, 2) + Math.pow(AB.y, 2));

const b = Math.sqrt(Math.pow(BC.x, 2) + Math.pow(BC.y, 2));

const aXb = (AB.x * BC.x) + (AB.y * BC.y);

const cos_ab = aXb/(a*b);

// 求出偏转角度

const angle_1 = Math.acos(cos_ab)*(180/Math.PI);

// 10 是点的半径, 根据点的大小修改

lines.push({

x: dot.x + 10 ,

y: dot.y + 10 ,

width: a ,

AB.x > 0 ? Math.sqrt(Math.pow(angle_1, 2)) : -Math.sqrt(Math.pow(angle_1, 2))

})

css样式, 看样式猜dom嘻嘻嘻

.box{

position: absolute;

width: 100%;

height: 100%;

transform-origin:0 0;

.dot {

width: 20px;

height: 20px;

position: absolute;

background-color: red;

}

.line {

height: 1px;

position: absolute;

background-color: green;

transform-origin:0 0;

}

DOM

{lines.map((line) => {

return

})}

{dots.map((dot) => {

return

})}

css 定位连线_前端css实现两点连线相关推荐

css不换行属性_前端 | css display:flex 的六个属性你知道吗
前言:display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持. ...
求两点连线与其中一点为球心球的交点——赋MATLAB代码
在轨迹规划过程中,常将其它智能体视为具有一定半径的球形障碍物(或圆形障碍物).若求智能体与障碍物最近的边缘点,其本质即求两点连线与其中一点为球心球的交点. 求的方法有多种,这里采用雅克比矩阵的方法. ...
unity3d:向量计算：获得两点连线的垂直向量，判断目标方位（前后左右）
获得两点连线垂直向量 /// <summary>/// 获取某向量的垂直向量/// </summary>public static Vector3 GetVerticalDir ...
js 计算在AB两点连线上，距离A点一定距离的点的坐标
/*** @description 获取在AB两点连线上,以AB为方向,距离A点,L处的点的坐标* @param A:{x,z} 点A* @param B:{x,z} 点B* @param L 距A点 ...
css删除线_前端删除文字贯穿线的方法有哪些
对文字添加删除线方法有两种,一种是使用html删除线标签<s>:另外一种是使用css删除线样式text-decoration:line-through. html标签实现删除线样式 1,使 ...
css手型指针_前端基础面试题(HTML+CSS部分)
1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他行内元素:其中im ...
css初始化样式文件_前端必备技能 webpack 4. webpack处理CSS资源
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正因为 webpack 本身只具有识别 JS 的能力,所以涉及到其他资源,需要我们通过 loader 来进行特殊处理,针对不同的样式资源,需要以下几个 ...
css实现图片虚化_什么? CSS 阴影竟然还有这种骚操作？
点击上方"IT平头哥联盟",选择"置顶或者星标" 与你一起成长- 原作者:cocoqiao 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 f ...
css定位的百分比的算法,css定位中的百分比
----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是,百分比定位究竟是针对于谁定位? 一.margin,padding的百分比首先从css的设计意图说起,在浏览器默 ...

css 定位连线_前端css实现两点连线

css 定位连线_前端css实现两点连线相关推荐

最新文章

热门文章