华为项目Tree canvas画图2

//添加数组找到box_content ul li 对应的index

ct.lineTo($(".box_content ul li").eq(j).position().left+57,($(".box_header ul li").eq(index).position().top)+106+140);//中点
ct.lineTo($(".box_content ul li").eq(j).position().left+57,($(".box_header ul li").eq(index).position().top)+320);//中点
ct.strokeStyle = "#f95f5b";//线条颜色
ct.lineWidth = 2;//线条的宽度
ct.stroke();//绘制

} 
}
}

box_content_ct(index);
//console.log(($(".box_header ul li").eq(index).position().left) +155 );
}

//box_content ul li画线
function box_content_ct(index){
if( box_content_arr.length<1){
return false;
}
var box_content_max = Math.max.apply(null, box_content_arr);//获取数组最大值
var box_content_min = Math.min.apply(null, box_content_arr);//获取数组最小值

var n1_left = $(".box_content ul li").eq(box_content_max).position().left+60;
var n2_left = $(".box_content ul li").eq(box_content_min).position().left+100;
var n3_left = $(".box_content ul li").eq(box_content_min).position().left+100;
var n4_left = $(".box_content ul li").eq(box_content_max).position().left+60;


var box_header_left = $(".box_header ul li").eq(index).position().left+203;
//alert(box_header_left);
//alert(arr+"--"+max+"--"+min+"--"+index);
//绘制弧形
if(index == 1){
if(box_content_min+1<5&&box_content_max>4){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();


ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
if(box_content_min+1<5 &&box_content_arr.length !=1){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>4 &&box_content_arr.length !=1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_min+1<5){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>4){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_max>4){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
}else if(index == 0){
if(box_content_min+1<2&&box_content_max>1){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();

ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
if(box_content_min+1<2 &&box_content_arr.length !=1){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>1 &&box_content_arr.length !=1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_min+1<2){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_max>1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
}else if(index ==3){
if(box_content_min+1<11&&box_content_max>10){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();

ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
if(box_content_min+1<11 &&box_content_arr.length !=1){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>10 &&box_content_arr.length !=1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_min+1<11){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>10){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_max>10){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}

}else if(index==2){
if(box_content_min+1<8&&box_content_max>7){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();

ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
if(box_content_min+1<8 &&box_content_arr.length !=1){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>7 &&box_content_arr.length !=1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_min+1<8){
ct.beginPath(); 
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>7){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_max>7){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}

}
}



//点击开始画线
$(document).on("click",".box_header ul li",function(){
//alert($(this).index());
var index = $(this).index();
$(this).css("border","2px solid #f95f5b").siblings().css("border","2px solid #fff");

for(var i=0;i<dates.data.saiData[dates.data.saiData.length-1].children.length;i++){
if($(this).find("p").html() == dates.data.saiData[dates.data.saiData.length-1].children[i].name_en){
ctContent(radarLeftRight[dates.data.saiData[dates.data.saiData.length-1].children[i].name_en],index);
}

}
/*
if($(this).find("p").html() == "Constructability"){

ctContent(radarLeftRight.Constructability,index);


}else if($(this).find("p").html() == "Reusability"){

ctContent(radarLeftRight.Reusability,index);

}else if($(this).find("p").html() == "Modifiability"){

ctContent(radarLeftRight.Modifiability,index);

}else if($(this).find("p").html() == "Testability"){

ctContent(radarLeftRight.Testability,index);

}*/
})

//box_con_children ul li添加数据
$(".box_con_children ul li").each(function(e){
if(saiData.dates.children[e].metricDetail){
//$(this).css("height",(saiData.dates.children[e].metricDetail.length)*65);
}else{
$(this).css("height",70);
}

})
//box 高度根据数据动态变化
$(".box").css("height",$(".box_top").height()+$(".box_content").height()+$(".box_con_children").height()+400);

}

转载于:https://www.cnblogs.com/duguangyan/p/7251194.html