画一条连接两点的线，由两点坐标确定一条直线

页面上有两颗星星图标，画一条线连接两颗星星。

1.先获取两点的坐标 2.计算弦长及旋转角度 3.绘制线

<div class="quality-analysis"><div class="cnt-box"><span  class="selected-start"><svg class="icon fs16 warn-text icon-orange " aria-hidden="true"><use xlink:href="#h-delete-collect"></use></svg></span><span  class="selected-start"><svg class="icon fs16 gray-text" aria-hidden="true"><use xlink:href="#h-collect"></use></svg></span> </div>
</div>

<script>export default {data() {return {positionList: [], // 获取坐标}},mounted() {this.getStartPosition()this.drawLine(this.positionList)},methods: {// 获取星星坐标getStartPosition() {let nodeList = document.querySelectorAll('.selected-start')let parentNode = document.querySelector('.cnt-box').offsetParentlet actualLeft = 0let current = 0let actualTop = 0if(nodeList.length>0){for(let i=0;i<nodeList.length;i++){actualLeft = nodeList[i].offsetLeft  // 累加计算星星相对于顶级父元素的距离actualTop = nodeList[i].offsetTopcurrent = nodeList[i].offsetParentwhile(current!== parentNode){actualLeft += current.offsetLeftactualTop += current.offsetTopcurrent = current.offsetParent}let obj = {x:actualLeft,y:actualTop,}this.positionList.push(obj)}}},// 画星星连线drawLine(positionList) {if(positionList.length>0){for(let i=1;i<positionList.length;i++){// 计算长宽let rectWidth = Math.abs(positionList[i].x - positionList[i-1].x)let rectHeight = Math.abs(positionList[i].y - positionList[i-1].y)// 在页面确定div左上角的具体位置let rectX = positionList[i].x < positionList[i-1].x ? positionList[i].x : positionList[i-1].xlet rectY = positionList[i].y < positionList[i-1].y  ? positionList[i].y : positionList[i-1].y// 弦长let stringWidth = Math.ceil(Math.sqrt((rectWidth * rectWidth)+ (rectHeight*rectHeight)))let xPad = (rectWidth - stringWidth)/2let yPad = (rectHeight - 2)/2// 从x轴到(x,y)的旋转角度let radNum = Math.atan2((positionList[i].y - positionList[i-1].y),(positionList[i].x - positionList[i-1].x))let  traX  = rectX +  xPad - 8 // 8为星星图标大小的1/2let  traY  = rectY +  yPad + 8// 创建divlet div = document.createElement('div')div.innerHTML = '<div ' +' style = "width:' + stringWidth + 'px;height:2px;transform:translate(' + traX+ 'px,' + traY +'px) rotate('+ radNum+ 'rad) " class="draw-line-style"></div>'let doc = document.querySelector('.quality-analysis')doc.appendChild(div)}}}}}
</script>

说明：

<style lang="scss">.quality-analysis {position: relative;.draw-line-style{top: 0;position: absolute;border-top: 1px solid $bgOrange;}
</style>

1.每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。

2.atan2(y,x) ：返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。

画一条连接两点的线，由两点坐标确定一条直线相关推荐

编写一个Applet，画出20条水平的、随机颜色的平行线。要求线的长度相同，整条线段都要在可视区域内
编写一个Applet,画出20条水平的.随机颜色的平行线.要求线的长度相同,整条线段都要在可视区域内. ` package p2; import java.applet.Applet; import ...
画一条0.5px的线
1.直接设置0.5px,在不同的浏览器会有差异( 不同系统的不同浏览器对小数点的px有不同的处理) //画一条0.5px的线 <!DOCType html> <html> &l ...
CAD画图教程：CAD怎么画一条指定长度的线？
在CAD入门学习过程中,画直线是基础操作之一,所以一定要对此熟练掌握才可以.那你知道CAD怎么画一条指定长度的线吗?本节CAD画图教程就和小编一起来了解一下在浩辰CAD软件中怎么画一条指定长度的直线吧 ...
ArcGIS技巧（一）画一条特别直的线要素
问题:在画线要素时点击起点终点后经常画不出一条特别直的线(有锯齿). 解决:点击起点后,不要着急点击终点,此时右键选择<方向>,输入0,回车. 在点击终点,就是一条特别直的线了.
手绘线条一直画不直_板绘画线手抖？线画不直？板绘练习画线技巧攻略！
板绘画线手抖?线画不直?很多人画画都时先画草稿再线稿最后上色,所以线条就非常重要!但这对于刚接触手绘板的小伙伴不太友好,毕竟使用板绘跟使用纸和笔画画的差别还是蛮大的.因此,就会遇到连条流畅圆滑的线都画 ...
7-5 两点成线 (10 分) JAVA PTA
7-5 两点成线 (10 分) 都说两点确定一条直线,那么设计一个直线类Line,需要通过两个点Point对象来确定.Line类具体要求如下: 1)定义两个Point对象p1,p2: 2)写出有参构造 ...
使用MATLAB的EEGLAB和BCT工具箱画脑网络连接图
使用MATLAB的EEGLAB和BCT工具箱画脑网络连接图一.EEGLAB工具箱插件-FCLAB,以及BCT工具箱 1.1 FCLAB插件及BCT工具箱 1.2 使用GUI界面操作一.EEGLAB ...
如何连接成组箱线图中的平均值(seaborn)
项目场景: 师妹想要如下图的效果问题描述: 理所应到得想到用箱线图组合折线图就可以,但出来的图发现不对劲: 点并不在箱线图之上,而是按照坐标点成一条竖线解决方案: 为pointplot函数加入do ...
【css画圆圈用线连接】
CSS画圆圈用线连接画圆圈中间有数字1.2.3.之间用线连接 1画圆 .circle1_circle{/*border-radius: 50%; */display: inline-block;wi ...
如何由两点坐标确定一条直线的ax+by+c=0表达式
如何由两点坐标确定一条直线的ax+by+c=0表达式比如已知两坐标: (x1,y1),(x2,y2); 对于表达式ax+by+c=0; a=?,b=?,c=?; y=kx+m, y1=kx1+m y ...

画一条连接两点的线，由两点坐标确定一条直线

画一条连接两点的线，由两点坐标确定一条直线相关推荐

最新文章

热门文章