JTopo添加动态连线

article/2025/8/15 4:41:55

效果如下
在这里插入图片描述

先在 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