其他分享
首页 > 其他分享> > jtopo连线绘制脉冲动画效果

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