jtopo连线绘制脉冲动画效果

        随着需求的日益精细化，人们越来越多的关注到了画面的美观，单纯的节点间连线已经不满足人们的审美观念了，那么能不能让节点间的连线动起来呢？答案是可以的，老规矩，先上图，再说怎么实现。

         同样，这次的改动也是基于jtopo-0.4.8-dev版本，有很多小伙伴留言问我能不能提供源代码下载，我这边也很想直接给大家一个可用的新版本，但是为了提高性能，目前我已经在0.4.8的基础上增加了太多与我们项目有关的东西了，想要直接分离出来一个新的版本还是比较困难的，所以说只能看后面有没有机会了，好了，言归正传，我们直接进入主题。

        想要绘制动画脉冲，大概有两种思路，一种是通过嫁接节点的方式，再使这种特殊的节点移动起来，造成视觉的动画脉冲，网上有这种实现的博客，但这种方式有种致命的缺点，因为增加了额外的节点，所以在绘制和保存的时候要有相应的增加和去除逻辑，相比较而言还是挺复杂的；另一种就是直接绘制，这样的好处是简洁，不用添加太多的代码，而且条理也简明明了，网上没有找到对应的博客，所以andsll只好自己来实现喽！

        首先，实现绘制脉冲的静态效果。既然是脉冲，而且最终的目标是让动起来，就跟复兴号一样沿着轨道运动，好吧，我们绘制一个椭圆再填充白色，天空蓝的边框，看起来就跟火箭一样，想想都很酷吧，哈哈，直接上代码：

         先是给传参line（要绘制的直线）增加了一个属性time，如果有time属性，取出它的数值赋值给变量time，如果没有，给当前连线增加time属性，紧接着，给time一个0.05的跳变增量，因为我们的目标是让“复兴号”在画布上动起来，即每次的X轴坐标是有规律的变化的，如上图所示，x=10+time*time（加10是因为我想让脉冲的出发点距离节点有一定的距离，这样美观一点），这里别忘了把跳变之后的time要更新到节点的自身属性，否则等绘制好后，脉冲永远停留在同一个位置，这不是我们想要的，当然，这里还有一个if的逻辑，这是为了确保折线和二次折线所有线段都能正常绘制，否则只能绘制折线最短的一部分，不用我说，大家肯定都能脑补到具体的原因哦！这里还需要注意如下的代码（很关键哦）：

if (x<=len) {
        a.ellipse(x*k,0,10,2,k==1?0:Math.PI,0,Math.PI*2);
}

ellipse是绘制椭圆的函数，具体的参数说明这里不再累述，网上很多的，关键是这个if，len是当前线段的长度，如果x本身都大于len了，再去绘制势必要出界了啊，最终火车出轨这不是我们想要的，所以这里还可以给len减去一个固定值，这样更保险，从视觉上来讲更加的合理。

a.lineWidth = editor.config.linkDefaultWidth;

 这行代码是为了使画笔的宽度复原，因为下文再绘制脉冲之前有过调整画笔宽度。

        当然，上面的函数只是单纯的完成了脉冲的绘制，但是一个节点上既可能有出去的连线，也可能有回来的连线，即当前节点既可以是nodeA，也可能是nodeZ，针对不同的连线，我们想要的效果都是从初始点nodeA流向结束点nodeZ：

         代码的第一行很简单，就是单纯的计算出给定的两点间的距离len，第二行、第三行分别拿到了两点的atan和atan2（具体什么区别大家可以去百度，当然看过andsll之前博客的肯定都知道，在jtopo的项目实战（二）中本博主有过简单的介绍），紧接着就是moveTo 到脉冲初始点，以b点为初始原点，旋转一定的角度，因为上面的绘制函数中，为了使问题尽量的简洁，我们只处理了x坐标，所以这里我们必须旋转画布的x轴到跟b、c两点连线平行的位置。

if (angle1*2/Math.PI>1 || angle1*2/Math.PI<-1) {
     run_pulse(context,a,len,1,max_len);
}
else
{
     run_pulse(context,a,len,-1,max_len);
}

          这里的if和else主要是为了让连线拖动旋转任意角度时，脉冲都能正常绘制，具体的象限处理博主已经验证过了，放心使用。

        最后，具体的绘制函数搞定了，任意两点间线段的脉冲函数搞定了，当然是要在合适的位置加入函数调用了，绘制连线的位置调用？可行，但是存在先后顺序，而且要改动多个地方，因为直线、折线、二次折线都是在不同的代码段绘制的；那么在绘制文字的地方接入是否可行？答案也是否定的，连线没有文字标注是不是就不用绘制了？但是，每条连线都有绘制箭头的逻辑，而且三种连线都靠一个函数来完成箭头的绘制，在绘制箭头的地方调用接口来绘制脉冲岂不美哉？上代码：

 原本这个函数不长这样的：

this.paintArrow = function (b, c, d) {
                var e = this.arrowsOffset,
                    f = this.arrowsRadius / 2,
                    g = c,
                    h = d,
                    i = Math.atan2(h.y - g.y, h.x - g.x),
                    j = a.util.getDistance(g, h) - this.arrowsRadius,
                    k = g.x + (j + e) * Math.cos(i),
                    l = g.y + (j + e) * Math.sin(i),
                    m = h.x + e * Math.cos(i),
                    n = h.y + e * Math.sin(i);
                i -= Math.PI / 2;
                var o = {
                        x: k + f * Math.cos(i),
                        y: l + f * Math.sin(i)
                    },
                    p = {
                        x: k + f * Math.cos(i - Math.PI),
                        y: l + f * Math.sin(i - Math.PI)
                    };
                b.beginPath(), b.fillStyle = "rgba(" + this.strokeColor + "," + this.alpha + ")", b.moveTo(o.x, o.y), b.lineTo(m, n), b.lineTo(p.x, p.y), b.stroke(), b.closePath()
            }

可以看到，在原有函数的基础上，对传参做了修改，b是上下文，c是连线的倒数第二个点，d是最后一个点，修改后，b、c扩展成了从p1~p4共4个点的坐标（二次折线最多也就四个点），ditor.config.linkArrows是博主增加了一个是否需要绘制箭头的开关，同理editor.config.needs_run_pulse为是否开启脉冲动画的开关。这里使用try结构主要是为了兼容直线（只有两个点），折线（三个点），二次折线（四个点），当然这里考虑到性能问题，推荐大家使用if来判断。修改了传参，相应调用的地方也要做一些小的调整，博主就不啰嗦了，大家有疑问的或者哪里没有讲明白都可以留言，当然想要直接要代码的，双手奉上。

 

标签：动画,jtopo,连线,脉冲,折线,time,绘制,Math
来源： https://blog.csdn.net/andsll/article/details/119420835