自己写拓扑图

function tuoFn() {

$.ajax({
    url: url + '/topology/getTopologyHost',
    type: 'post',
    success: function (res) {
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.lineWidth = 1;
        ctx.strokeStyle='red';
        var arr=res.data
        for(var i=0;i<arr.length;i++){
            var x=arr[i].x*$('.box')[0].offsetWidth+'px'
            var y=arr[i].y*$('.box')[0].offsetHeight+'px'
            var xImg=(arr[i].x*$('.box')[0].offsetWidth+70)+'px'
            // var x=arr[i].x*100+'%'
            // var y=arr[i].y*100+'%'
            // var Num1=arr[i].hostId
            var  Num=arr[i].connectHostId;
            console.log(Num)
            if(Num==null||Num==''){
                $('.box').append('<img hostId='+arr[i].hostId+'    id='+arr[i].hostId +'    src="../image/tuopu1.png" class='+arr[i].hostId+' style="position: absolute;left:'+x+';top:'+y+';" connctId='+arr[i].connectHostId+' >');
                $('.active').append('<div class="outBox" style="position: absolute;left:'+x+';top:'+y+';"><div class="content" style="display: none;left:'+xImg+';top:'+y+'">名称：'+arr[i].hostName+'<br/>IP:'+arr[i].hostIp+'</div></div>')
            }else{
                $('.box').append('<img hostId='+arr[i].hostId+'   id='+arr[i].hostId +'    src="../image/tuopu2.png" class='+arr[i].hostId+' style="position: absolute;left:'+x+';top:'+y+';" connctId='+arr[i].connectHostId+'>');
                $('.active').append('<div class="outBox" style="position: absolute;left:'+x+';top:'+y+';"><div class="content" style="display: none;left:'+xImg+';top:'+y+'">名称：'+arr[i].hostName+'<br/>IP:'+arr[i].hostIp+'</div></div>')
            }
        }
        
        // 用covers画线
        for(var i=0;i<arr.length;i++){
            var x1=arr[i].x*$('.box')[0].offsetWidth+20;
            var y1=arr[i].y*$('.box')[0].offsetHeight+30;
            console.log(x1,y1);
            // ctx.beginPath();
            // ctx.moveTo(x1,y1);
            var t=arr[i].hostId;
            console.log(t);
            var coId=$("#"+t).attr("connctId");
            if(coId){
                coId =coId.split(",")
                console.log(coId);
                for(var j=0;j<coId.length;j++){
                    console.log('kkkk');
                    var xt=$("."+coId[j]).position().left+20;
                    var yt=$("."+coId[j]).position().top+30;
                    console.log(xt,yt);
                    // ctx.lineTo(xt,yt);
                    // ctx.stroke();
                    // ctx.closePath();
                    drawArrow(ctx, x1,y1, xt,yt,20,20,1,'#f36');
                }

            }
        }
        Hover()
    },error:function(){
        console.log(err)
    }
})
复制代码

}

//线的箭头

function drawArrow(ctx, fromX, fromY, toX, toY,theta,headlen,width,color) {

var theta = theta || 30,
    headlen = headlen || 10,
    width = width || 1,
    color = color || '#000',
    angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
    angle1 = (angle + theta) * Math.PI / 180,
    angle2 = (angle - theta) * Math.PI / 180,
    topX = headlen * Math.cos(angle1),
    topY = headlen * Math.sin(angle1),
    botX = headlen * Math.cos(angle2),
    botY = headlen * Math.sin(angle2);
ctx.save();
ctx.beginPath();
var arrowX, arrowY;
ctx.moveTo(fromX, fromY);
ctx.lineTo(toX, toY);
arrowX = toX + topX;
arrowY = toY + topY;
ctx.moveTo(arrowX, arrowY);
ctx.lineTo(toX, toY);
arrowX = toX + botX;
arrowY = toY + botY;
ctx.lineTo(arrowX, arrowY);
ctx.fillStyle="red";  //设置填充颜色
ctx.fill();  //执行填充
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.stroke();
ctx.closePath();
复制代码

}