JTopo添加动态连线

效果如下

先在 JTopo 的 link 原型上定义一个方法

 window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame
JTopo.Link.prototype.drawanimepic = function (imgurl, scene, width, height) {var imgnode = new JTopo.Node()imgnode.setSize(width || 16, height || 16)imgnode.setImage(imgurl)imgnode.zIndex = 2.5var thislink = thisthis.isremove = falsefunction b (a, b) {var c = []if (a == null || b == null) return cif (a && b && a.outLinks && b.inLinks) {for (var d = 0; d < a.outLinks.length; d++) {for (var e = a.outLinks[d], f = 0; f < b.inLinks.length; f++) {var g = b.inLinks[f]e === g && c.push(g)}}}return c}function c (a, c) {var d = b(a, c)var e = b(c, a)var f = d.concat(e)return f}function d (a) {var b = c(a.nodeA, a.nodeZ)return b = b.filter(function (b) {return a !== b})}thislink.removeHandler = function () {this.isremove = truevar a = thisthis.nodeA && this.nodeA.outLinks && (this.nodeA.outLinks = this.nodeA.outLinks.filter(function (b) {return b !== a})),this.nodeZ && this.nodeZ.inLinks && (this.nodeZ.inLinks = this.nodeZ.inLinks.filter(function (b) {return b !== a}))var b = d(this)b.forEach(function (a, b) {a.nodeIndex = b})}function imgnodeanime () {if (!thislink.isremove) {if (thislink.nodeA.outLinks) {var xs = thislink.nodeA.cx - thislink.nodeZ.cxvar xy = thislink.nodeA.cy - thislink.nodeZ.cyvar l = Math.floor(Math.sqrt(xs * xs + xy * xy))var j = lxl = xs / l, yl = xy / lvar animespeed = (new Date() / 33)var colorpoint = parseInt(animespeed % l)imgnode.rotate = (Math.atan(xy / xs)) + (xs > 0 ? Math.PI : 0)imgnode.cx = thislink.nodeA.cx - colorpoint * xlimgnode.cy = thislink.nodeA.cy - colorpoint * ylwindow.requestAnimationFrame(imgnodeanime)}} else {scene.remove(imgnode)}}window.requestAnimationFrame(imgnodeanime)scene.add(imgnode)return imgnode
}

在添加连线的地方调用这个方法

let link// console.log(self.beginNode, endNode)if (self.lineType === 'line') {link = new JTopo.Link(self.beginNode, endNode)link.lineType = 'line'} else if (self.lineType === 'foldLine') {link = new JTopo.FoldLink(self.beginNode, endNode)link.direction = self.config.linkDirectionlink.bundleOffset = self.config.linkOffsetGap // 折线拐角处的长度link.lineType = 'foldLine'} else if (self.lineType === 'flexLine') {link = new JTopo.FlexionalLink(self.beginNode, endNode)link.direction = self.config.linkDirectionlink.lineType = 'flexLine'link.offsetGap = self.config.linkOffsetGap} else if (self.lineType === 'curveLine') {link = new JTopo.CurveLink(self.beginNode, endNode)link.lineType = 'curveLine'}if (!link) {return}// 保存线条所连接的两个节点IDlink.nodeSrc = self.beginNode.nodeIdlink.nodeDst = endNode.nodeIdif (self.lineType !== 'curveLine') {link.arrowsRadius = self.config.arrowsRadius}// 核心代码 这样 line 上面会创建一个节点, link.drawanimepic(topoImgPath + 'arrowLine.png', self.scene)// link.strokeColor = '255,0,255'// 线条颜self.scene.add(link)self.beginNode = nullthis.remove(self.link)self.link = null

保存数据(saveTopology)的时候,把这个创建出来的节点数据过滤掉

 let childs = editor.stage.childs[0].childs.filter(item => {return (item.elementType === 'node' && item.nodeId) || item.elementType === 'link'})editor.stage.childs[0].childs = childs

4.初始化时(init),添加连线节点动画

 // 添加动画效果let childs = [...editor.stage.childs[0].childs]this.stage.childs[0].childs.length = 0const node = childs.filter(item => {return (item.elementType === 'node' && item.nodeId) || item.elementType === 'link'})childs.length = 0childs = [...node]childs.forEach(item => {this.scene.add(item)})node.forEach(item => {if (item.elementType === 'link') {item.drawanimepic(topoImgPath + 'arrowLine.png', this.scene)// item.strokeColor = '255,0,255'// 圆边}})this.stage.childs[0].childs = this.scene.childs

这样就完成了一整个过程拉, 动画连线是csdn的小伙伴分享的,感谢

JTopo添加动态连线相关推荐

移动平均线ma分析_使用动态移动平均线构建交互式库存量和价格分析图
移动平均线ma分析 I decided to code out my own stock tracking chart despite a wide array of freely available ...
Cesium 点击绘制线/折线（动态绘制线/折线）
思路和之前做 Cesium 点击绘制多边形(动态绘制多边形) 一样的,点击查看这里重点说一下: CallbackProperty是一个类,其值由回调函数延迟计算.也就是说它在不断地自我调用,每当其返 ...
Android动态画线坐标画线动画
效果图如下根据相对于图片本身的坐标xy数组基于view的左上角为原点在图片上动态画线 //参考数据类型//pointList [PointEntity(pointX=1, pointY=1), ...
ArcGIS JS先添加动态图层，再添加切片图层后不显示
场景: 现在要在一个地图上添加动态服务图层和切片服务图层,当创建好图层之后,使用map.addLayer()方法,先把动态图层加到地图上,再把切片图层加到地图上,出现一个现象:只能看到加载的动态图层, ...
Qt Creator添加动态dynamics
Qt Creator添加动态添加动态制作动画添加连接加States 添加动态您可以为UI组件的属性设置动画,并在它们之间创建连接以使它们能够相互通信. 制作动画您可以在"时间轴& ...
如何html中添加动态图片,把动态图片添加到视频画面中视频添加自定义动态图片视频加动态logo...
我前面也编写过关于视频添加动态图片的教程.前面所说的给是视频添加的动态图片是软件中自带的素材,虽然软件中带的动态图片种类繁多,但是不外乎有些时候软件中并没有我们要用的动态图片,这个时候我们就需要重外部 ...
vue 分享微信传参_vue实现微信分享链接添加动态参数的方法
微信分享时分享链接携带参数可能不是固定的需要在分享的前一刻才知道这里就是动态设置分享链接的基本写法代码不是那么详尽但大致流程如下 1.安装引用jssdk npm install --save ...
js 给动态li添加动态点击事件
一.给动态li添加动态点击事件试了网上的on,live,bind绑定,都不起作用.最后看到https://bbs.csdn.net/topics/390414057 上的代码.试了一遍,demo o ...
html5双波浪线怎么添加,在WPS中如何给段落添加双波浪线边框
WPS给文章的段落添加一个很好的边框,使整个段落看起来大方有条理.推荐一种波浪边框,这种边框添加后效果感是非常不错的,看起来就像是我们平时生活中写的明信片一样.以下是学习啦小编为您带来的关于在WPS中 ...

JTopo添加动态连线

JTopo添加动态连线相关推荐

最新文章

热门文章