vue canvas 连线带箭头

首先左边的线连接右边的线的话都要准确找到双方的位置
所以我们通过getBoundingClientRect（）方法去寻找

例：this.$refs[`${item.refs}`][0].getBoundingClientRect().left
例：this.$refs[`${item.refs}`][0].getBoundingClientRect().top

但是呢如果你的canvas在屏幕的任意位置直接用上面获取的话是不行的。获取的位置不是以canvas为基准获取的而是以屏幕的宽高。所以↓

this.$refs[`canvas`].getBoundingClientRect().left
this.$refs[`canvas`].getBoundingClientRect().top

思路是首先要获取画布在屏幕的位置在用获取每个div要连线的位置减去canvas在屏幕的位置

this.$refs[`${item.refs}`][0].getBoundingClientRect().left-windowLeft
this.$refs[`${item.refs}`][0].getBoundingClientRect().top-windowtop

这是解决了目前div在画布的准确位置
当要连接的时候首先还要知道单个连接多个个单个连接单个的时候。如何去解决他们的哪个连接哪个不连接。
首先当我们点击某个的时候应该就已经知道了要连接谁。所以当我们刚开始给每组数据都先添加一个自定义的ref的时候。在连接时就要把不需要连接的div去掉ref设置为空，把需要连接的div保留下来

deepClone(obj){ //拷贝let _obj = JSON.stringify(obj),objClone = JSON.parse(_obj);return objClone
},
let list = this.deepClone(this.abnormalStage)this.abnormalStage = list.map(e=>{let index = this.linelianList.findIndex(es=>es == e.stageId )if(index==-1){e.refs = ""}return e
})

然后就是连接了。
把map之后的数据信生成一个数组，来存储要连接的坐标。

let guocuoXY = []
list.forEach(e=>{if(e.refs != ''){guocuoXY.push({x:this.$refs[`${e.refs}`][0].getBoundingClientRect().left-windowLeft,y:this.$refs[`${e.refs}`][0].getBoundingClientRect().top-windowtop,})}})

然后在画线

guocuoXY.forEach(e=>{//设置路径起点坐标   ctx.moveTo(div1Light,div1Top)//定义中间点坐标1   ctx.lineTo((div1Light+e.x-220)/2,div1Top) // //定义中间点坐标2   ctx.lineTo((div1Light+e.x-220)/2,e.y)  //定义中间点坐标3(这是最后一个中间点，也就是终点)   ctx.lineTo(e.x-size,e.y);// let obj =  guocuoXY[guocuoXY.length-1]// console.log(obj)var arrowX, arrowY;//箭头线终点坐标var headlen = 10;//自定义箭头线的长度var theta = 45;//自定义箭头线与直线的夹角，个人觉得45°刚刚好var angle = Math.atan2(e.y - e.y, e.x+20 - e.x-size) * 180 / Math.PI;var angle1 = (angle + theta) * Math.PI / 180;var angle2 = (angle - theta) * Math.PI / 180;var topX = headlen * Math.cos(angle1);var topY = headlen * Math.sin(angle1);var botX = headlen * Math.cos(angle2);var botY = headlen * Math.sin(angle2);arrowX = e.x-size + topX;arrowY = e.y + topY;//画上边箭头线ctx.moveTo(arrowX, arrowY);ctx.lineTo(e.x-size, e.y);arrowX = e.x-size + botX;arrowY = e.y + botY;//画下边箭头线ctx.lineTo(arrowX, arrowY);})

后面再设置线的宽度
ctx.lineWidth = 2;
ctx.stroke();
//关闭绘制路径
ctx.closePath();
this.normalList = this.normalListliu
this.abnormalStage = this.abnormalStageliu

整体代码如下

 xian(item,type,blo){let windowLeft = this.$refs[`canvas`].getBoundingClientRect().leftlet windowtop = this.$refs[`canvas`].getBoundingClientRect().toplet div1Light = this.$refs[`${item.refs}`][0].getBoundingClientRect().left-windowLeft+220 //他变 往后走 + 30let div1Top = this.$refs[`${item.refs}`][0].getBoundingClientRect().top-windowtop+25  //他不变var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");ctx.clearRect(0, 0, 522, 600);ctx.beginPath();   //设置线条颜色为蓝色let color = type=="good"?"#ef6363":"blue"ctx.strokeStyle = color;let guocuoXY = []// if(this.linelianList.length==0)return if(type=="good"){console.log(this.linelianList)let list = this.deepClone(this.abnormalStage)this.abnormalStage = list.map(e=>{let index = this.linelianList.findIndex(es=>es == e.stageId )if(index==-1){e.refs = ""}return e})console.log(list)console.log(this.abnormalStage)// this.abnormalStage = this.abnormalStage}if(type=="error"){let list = this.deepClone(this.normalList)this.normalList = list.map(e=>{let index = this.linelianList.findIndex(es=>es == e.stageId )if(index==-1){e.refs = ""}return e})console.log(this.normalList)// this.normalList = this.normalList}console.log(this.linelianList)let list = type=="good"?this.abnormalStage:this.normalListlet size = type=="error"?0:230console.log(size)if(list.findIndex(e=>e.refs!='')>-1){list.forEach(e=>{if(e.refs != ''){guocuoXY.push({x:this.$refs[`${e.refs}`][0].getBoundingClientRect().left-windowLeft+220,y:this.$refs[`${e.refs}`][0].getBoundingClientRect().top-windowtop+25,})}})console.log(guocuoXY)guocuoXY.forEach(e=>{//设置路径起点坐标   ctx.moveTo(div1Light,div1Top)//定义中间点坐标1   ctx.lineTo((div1Light+e.x-220)/2,div1Top) // //定义中间点坐标2   ctx.lineTo((div1Light+e.x-220)/2,e.y)  //定义中间点坐标3(这是最后一个中间点，也就是终点)   ctx.lineTo(e.x-size,e.y);// let obj =  guocuoXY[guocuoXY.length-1]// console.log(obj)var arrowX, arrowY;//箭头线终点坐标var headlen = 10;//自定义箭头线的长度var theta = 45;//自定义箭头线与直线的夹角，个人觉得45°刚刚好var angle = Math.atan2(e.y - e.y, e.x+20 - e.x-size) * 180 / Math.PI;var angle1 = (angle + theta) * Math.PI / 180;var angle2 = (angle - theta) * Math.PI / 180;var topX = headlen * Math.cos(angle1);var topY = headlen * Math.sin(angle1);var botX = headlen * Math.cos(angle2);var botY = headlen * Math.sin(angle2);arrowX = e.x-size + topX;arrowY = e.y + topY;//画上边箭头线ctx.moveTo(arrowX, arrowY);ctx.lineTo(e.x-size, e.y);arrowX = e.x-size + botX;arrowY = e.y + botY;//画下边箭头线ctx.lineTo(arrowX, arrowY);})ctx.lineWidth = 2; // ctx.strokeStyle = "red";ctx.stroke();   //关闭绘制路径   ctx.closePath();console.log(blo)}// if(blo==undefined || blo==null){//     console.log("我进来啊啊啊啊啊"+blo)//    this.CaseInfo("1",item,type)// }console.log(this.normalListliu)console.log(this.abnormalStageliu)this.normalList = this.normalListliuthis.abnormalStage = this.abnormalStageliu},

mounted(){this.$nextTick(function() {// 监听当前组件的滚动事件this.$refs.listContent.addEventListener('scroll', ()=> {this.xian(this.xianItem,this.xianItemType,"1")},false)});}

@mouseenter // 你知道这个方法是干嘛用的嘛留个彩蛋~~~~

vue canvas 连线带箭头相关推荐

delphi 画带箭头的线
unit Unit1;interfaceusesWindows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,Di ...
前端HTML渲染带箭头的线
前端渲染带箭头的线 1. 效果图 2. 实现方法参考 1. 效果图 mapbox-gl渲染效果图如下: minedatamap 效果图如下: 2. 实现方法 mapbox-gl minedatama ...
Android Canvas绘制带箭头的直线
先看下效果图: 下面我们直接看代码我自定义了一个View,代码如下: package com.davis.drawtrangle;import android.content.Context; im ...
vue项目中画出优雅的线条（虚线、直线、折线、带箭头、流动效果等）
需求:运行监控图模块,模块之间用虚线或者实线连接,且带有箭头实现方法: 1.canvas绘制 2.echarts专业的表格软件(画带箭头的虚线有难度) 3.svg方法 4.leader-line插件 ...
html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
如何用viso画波浪线、以及带箭头的波浪线。
如何用viso画波浪线.带箭头的波浪线!!! 搜索过来搜索过去,还是没有找到一个令自己满意的答案,就自己写一个过程了. 首先我使用的是visio 2013版本. 方法一: 打开visio,新建一个基本 ...
Echarts绘制带箭头的线
Echarts绘制带箭头的线这个图主要参考echarts官网的关系图绘制的,难点在于去掉其余导向图的箭头,只保留最后一个节点的箭头,以及处理值为null时箭头的指向问题,代码如下: <temp ...
WebGL绘制带箭头贴图的线
示例在讲述本文内容之前,我希望读者先具备以下知识点: 了解WebGL的基本知识,懂得调用自定义的Shader程序: 基本的数学基础和空间几何知识: 明白GPU的渲染管线流程: 因为,本文内容主要讲述 ...
html画一条线并带箭头,手把手教你用CSS实现带箭头的流程进度条
本文介绍的是利用纯CSS的带箭头流程进度条,兼容到IE8,需要的朋友们下面来一起学习学习. 首先写出一个基本的样式. .cssNav li{ padding: 0px 20px; line-heigh ...
Canvas 教程：如何绘制带箭头的曲线
这篇文章要解决一个问题,就是给定 HTML 中任意一个点(起点)和另一个点(终点),绘制一条带箭头的曲线. 废话不多说,直奔主题. 我们只有两个点的相对偏移量(offset),思路就是以这两个点作为对 ...

vue canvas 连线带箭头

vue canvas 连线带箭头相关推荐

最新文章

热门文章