canvas移动坐标空间_前端canvas画布

canvas移动坐标空间_前端canvas画布前言最近在做自己维护的一个可视化工具的时候,在添加基于echart的雷达图的时候,按照echart官网案例写完发现在自己项目中无法正常运行,排查了一番发现是我项目中echart的版本太低。找到问题原

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

最近在做自己维护的一个可视化工具的时候,在添加基于echart的雷达图的时候,按照echart官网案例写完发现在自己项目中无法正常运行,排查了一番发现是我项目中echart的版本太低。找到问题原因之后就升级echart,但是升级echart之后发现原本正常运行的echart地图组件又无法使用,百度了一番发现echart在最新的版本中地图数据进行了切换,原先的数据由于不符合规范被砍掉,导致2.0以前的echart地图都无法正常使用了。既然出现这样的情况,那就没办法了,项目中使用的echart地图有三种类型,迁徙图、标记图和热力图。思来想去,echart最终还是要升级,所以就决定自己开发项目中需要的基于canvas的迁徙图,标记图和热力图。这篇稳重主要就阐述canvas如何实现类似于echart中的迁徙图。

原理说明

1、轨迹开始位置和结束位置之间的轨迹通过二次贝塞尔曲线quadraticCurveTo来实现,其中绘制贝塞尔曲线的控制点需要根据开始位置和结束位置来确定;

2、轨迹上运行的标记通过二次贝塞尔曲线反推获取贝塞尔曲线不同位置的x,y坐标,然后通过不断设置轨迹上点位置来实现轨迹上点;

3、轨迹上点移动和开始和结束位置动画通过requestAnimationFrame来实现,切换重回canvas的时候需要调用cancelAnimationFrame来实现。

演示示例实例效果图如下:

canvas移动坐标空间_前端canvas画布

轨迹绘制方法

 1 function drawTravel (start,end) {
 2   var middleX = 0;
 3   var middleY = 0;
 4   var gnt1 = ctx.createLinearGradient(start.pos[0],start.pos[1],end.pos[0],end.pos[1]);
 5   gnt1.addColorStop(0,start.color);
 6   gnt1.addColorStop(1,end.color);
 7   if (start.pos[0] > end.pos[0] && start.pos[1] > end.pos[1]) {
 8      middleX = (start.pos[0] + end.pos[0]) / 2 * rate;
 9      middleY = (start.pos[1] + end.pos[1]) / 2 * (2 - rate);
10   } 
11   if (start.pos[0] > end.pos[0] && start.pos[1] < end.pos[1]) {
12      middleX = (start.pos[0] + end.pos[0]) / 2 * rate;
13      middleY = (start.pos[1] + end.pos[1]) / 2 * rate;
14   } 
15   if (start.pos[0] < end.pos[0] && start.pos[1] > end.pos[1]) {
16      middleX = (start.pos[0] + end.pos[0]) / 2 * (2 - rate);
17      middleY = (start.pos[1] + end.pos[1]) / 2 * (2 - rate);
18   } 
19   if (start.pos[0] < end.pos[0] && start.pos[1] < end.pos[1]) {
20      middleX = (start.pos[0] + end.pos[0]) / 2 * (2 - rate);
21      middleY = (start.pos[1] + end.pos[1]) / 2 * rate;
22   }
23   ctx.strokeStyle = gnt1;
24   ctx.beginPath();
25   ctx.moveTo(start.pos[0],start.pos[1]);
26   ctx.quadraticCurveTo(middleX,middleY,end.pos[0],end.pos[1]);
27   ctx.stroke();
28   // 获取贝塞尔曲线上的点
29   for (var i = 0; i < dotNumber; i++) {
30     var _t = (t - animationDotSpeed * i * 2) >= 0 ? (t - animationDotSpeed * i * 2) : 1 + (t - animationDotSpeed * i * 2);
31     var x = Math.pow(1-_t, 2) * start.pos[0] + 2 * _t * (1-_t) * middleX + Math.pow(_t, 2) * end.pos[0];
32     var y = Math.pow(1-_t, 2) * start.pos[0] + 2 * _t * (1-_t) * middleY + Math.pow(_t, 2) * end.pos[1];
33     ctx.fillStyle = 'rgba(' + dotColor.split('(')[1].split(')')[0] + ',' + (1 - 1 / dotNumber * i) + ')'
34     ctx.beginPath();
35     ctx.arc(x,y,dotRadius,0,2*Math.PI);
36     ctx.fill();
37     ctx.closePath()
38   }
39 }

开始位置和结束位置标记绘制方法

 1 function drawCoordinate (coordinate) {
 2   ctx.fillStyle = centerColor;
 3   ctx.beginPath();
 4   ctx.arc(coordinate.pos[0], coordinate.pos[1], radiusCenter,0,2*Math.PI);
 5   ctx.closePath();
 6   ctx.fill()
 7   ctx.fillStyle = ringColor.split(',').slice(0,3).join(',') + ',0.5)';
 8   ctx.beginPath();
 9   ctx.arc(coordinate.pos[0], coordinate.pos[1], radiusCenter + 5,0,2*Math.PI);
10   ctx.closePath();
11   ctx.fill()
12   if (radiusRing >= radiusRingMax) {
13       radiusRing = radiusRingMin;
14   }
15   ctx.fillStyle = ringColor;
16   ctx.beginPath();
17   ctx.arc(coordinate.pos[0], coordinate.pos[1], radiusRing,0,2*Math.PI);
18   ctx.closePath();
19   ctx.fill()
20   radiusRing += animationSpeed;
21   ringColor = ringColor.split(',').slice(0,3).join(',') + ',' + (0.5 - (radiusRing - radiusRingMin) * 0.02) + ')';
22 }

执行canvas绘制方法

 1 function draw () {
 2   cancelAnimationFrame(requestAnimationFrameName);
 3   ctx.clearRect(0,0,width,height)
 4   array.forEach(function (item, index) {
 5     drawCoordinate(item);
 6     if (index > 0) {
 7         drawTravel(array[0],item)
 8     }
 9   })
10   if (t >= 1) {
11       t = 0;
12   }
13   t += animationDotSpeed;
14   requestAnimationFrameName = requestAnimationFrame(draw)
15 }

实例预览地址:canvas实现平面地图迁徙图

希望上述说明能够帮助到您。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167360.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 大数据技术原理与应用-林子雨版-课后习题答案

    大数据技术原理与应用-林子雨版-课后习题答案第一章1.试述信息技术发展史上的3次信息化浪潮及具体内容。 信息化浪潮 发生时间 标志 解决问题 代表公司 第一次浪潮 1980年前后 个人计算机 信息处理 Intel、AMD、IBM、苹果…

  • startService() 过程

    startService() 过程

  • c语言基础知识菜鸟_c语言入门基础100题

    c语言基础知识菜鸟_c语言入门基础100题菜鸟教程之C语言基础(上)一、前言:前几天,在看另一个教程视频,总感觉太啰嗦,讲的东西不符合我想要的。这里,通过菜鸟教程,看一遍文档,打一遍笔记,想通过这样学一下C语言的基础。感谢菜鸟教程。

  • 特殊符号大全复制_特殊符号大全爱好者工具讲解[通俗易懂]

    特殊符号大全复制_特殊符号大全爱好者工具讲解[通俗易懂]前言:明天将会举办第2期微信昵称悬赏令,第1期结果已公布,如果您还没准备好,可以先准备一下哦。下面是第1期的结果放榜-微悬令第1期活动结束,奖金会陆续发放给获奖同学!漂亮的网名昵称符号让我们在游戏或者其它平台里面显得与众不同,为了实现这样的目标,小编制作了网名在线生成器,这是一整套的工具,可以让我们快速定制出与众不同的符号特殊符号大全爱好者首先我们打开昵称符号加字器,这是个非常有用的网名…

  • list去重 distinct

    list去重 distinct总结下。1.使用java8新特性stream进行List去重publicstaticList<String>delRepeat(List<String>list){List<String>myList=listAll.stream().distinct().collect(Collectors.toList());returnmyList;}2.双重for循环去重(不推荐使用,速度太慢)实际是使用lis…

  • vue 高德地图标记_如何在vue里面调用高德地图「建议收藏」

    vue 高德地图标记_如何在vue里面调用高德地图「建议收藏」1.修改webpac.base.conf.js文件与module同一级添加externals:{‘AMap‘:‘AMap‘,‘AMapUI‘:‘AMapUI‘}配置。然后在index页面引入文件接着下载包vue-amap,然后在vue页面中importAMapfrom‘AMap‘//在使用地图的页面引入该组件varmapexportdefault{mounted:functio…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号