基于vue 在平面图上画路线图 canvas

效果图：

**实现思路：**搜了很多都是在地图上做轨迹图，所以想到了用canvas画线，平面图是作为背景图展示，只需要提供各个巡逻点的坐标信息，就可以完成路线的绘制，具体代码中也有注释

完整代码：

<template><div class="bg"><canvas id="mycanvas" width="1000" height="700"></canvas></div>
</template>
<script>
export default {data() {return {pointData: [{x1: 900,y1: 100,x2: 80,y2: 75,text: '巡逻点1',},{x1: 80,y1: 75,x2: 200,y2: 300,text: '巡逻点2',},{x1: 200,y1: 300,x2: 580,y2: 500,text: '巡逻点3',},{x1: 580,y1: 500,x2: 900,y2: 100,text: '巡逻点4',},],};},created() {this.doDraw();},methods: {doDraw() {// 获取canvaslet canvas = document.getElementById('mycanvas');// 由于弹窗，确保已获取到let a = setInterval(() => {// 重复获取canvas = document.getElementById('mycanvas');if (!canvas) {return false;} else {clearInterval(a);// 可以理解为一个画笔，可画路径、矩形、文字、图像let context = canvas.getContext('2d');this.clearCanvas(context, canvas);this.pointData.forEach((item) => {const { x1, y1, x2, y2, text } = item;context.lineWidth = 3; //线条的宽度context.lineCap = 'round'; //线帽效果context.strokeStyle = 'rgb(20, 20, 235)'; //线条颜色context.beginPath();// 添加阴影context.shadowColor = 'rgb(20, 20, 235)';context.shadowOffsetX = 0;context.shadowOffsetY = 0;context.shadowBlur = 6;context.setLineDash([5, 10]); // [1,0]为实线context.moveTo(x1, y1);context.lineTo(x2, y2);//文字context.font = '16px Arial bolder';context.fillStyle = 'red';context.fillText(text, x1, y1);context.stroke();});//   绘制矩形//   context.strokeStyle = 'red';//   context.lineWidth = 3;//   context.strokeRect(0, 0, 300, 300);// 绘制线条//   context.moveTo(0, 0);//   context.lineTo(100, 50);//   context.strokeStyle = 'red';//   context.lineWidth = 3;//   context.stroke();}}, 1);},clearCanvas(ctx, canvas) {ctx.clearRect(0, 0, canvas.width, canvas.height);},},
};
</script>
<style lang="scss" scoped>
#mycanvas {border: 1px solid rgb(199, 198, 198);
}
.bg {width: 1000px;height: 700px;background: url('../assets/images/plat.jpg');background-size: 100% 100%;
}
</style>

基于vue 在平面图上画路线图 canvas相关推荐

基于vue element 封装上传组件
基于vue element封装的上传组件使用方法: 1.首先引入该组件 2.注册组件 3.页面使用 4.回调函数(如需其他回调自行封装因为我暂时没用到其他的哈哈哈) <template& ...
6.基于vue封装的上传文件等功能
效果图如下: 文件所在位置: view/huge_file_upload/huge_file_upload.vue:(在项目中使用?) <template><div><d ...
python：基于matplotlib在坐标轴上画出车辆路径规划示意图（箭头、中文图例）
车辆路径规划问题的研究一般较常遇到需要画出车辆路径示意图,已知有每辆车的真实坐标序列,那么如何利用在一个空白的坐标轴上画出路径呢? 1.准备 1.1 matplotlib引入一般情况下只引入plt就 ...
基于vue+element-ui实现上传进度条
目录基于el-upload组件实现进度条的编写后台进度前台进度条显示基于el-upload组件实现进度条的编写 ①编写文件上传时的钩子函数 uploadProgress(event,file,f ...
基于vue+el-upload图片上传(自用屎山)
一份屎山版的图片上传 <template><!--图片上传个数 max图片预上传列表 fileList图片上传和回显容器 upLoadListref提交图片的方法 submitHan ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
使用JavaScript在Canvas上画出一片星空
随着Html5的迅猛发展,画布也变得越来越重要.下面我就写一个关于在canvas上画出一片星空的简单的代码的示例. 理论基础初始化一个canvas,获得一个用于绘制图形的上下文环境context.并 ...
基于Vue的Fabricjs的画布移动和缩放，以及鼠标在移动后的画布上的定位（一）
Fabricjs的简介 (注意)本项目都是基于vue来实现的 Fabricjs是基于html5新的标签canvas的框架,通过使用Fabricjs可以对原本复杂的canvas标签操作,做出简单的变换就 ...
史上最全基于vue的图片裁剪vue-cropper使用
史上最全基于vue的图片裁剪vue-cropper使用基于vue的图片裁剪vue-cropper 新的需求 vue-cropper官网代码拷贝最后基于vue的图片裁剪vue-cropper 最 ...

基于vue 在平面图上画路线图 canvas

基于vue 在平面图上画路线图 canvas相关推荐

最新文章

热门文章