//添加数组找到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

华为项目Tree canvas画图2相关推荐

  1. canvas 画图移动端出现锯齿毛边的解决方法

    最近项目中用的canvas 越来越多,但是之前都是在canvas 上画图片, 最近这次是做一个折线图,自己画出来以后发现有锯齿,百度一番后找到了解决办法,记录到博客里. 声明一下,我用的是第二种方法, ...

  2. 微信小程序使用canvas画图并保存到手机相册踩坑总结

    接到个项目做微信小程序的,需要将手机中的页面保存到手机相册中,效果图如下 首先想到的就是利用canvas画图然后在保存到相册,看起来很简单网上也有很多例子,但都不完整,很多网友分享的都在半吊子工程,只 ...

  3. 可扩展面向对象的canvas画图程序

    面向对象的canvas画图程序 项目简介 整个项目分为两大部分 场景 场景负责canvas控制,事件监听,动画处理 精灵 精灵则指的是每一种可以绘制的canvas元素 Demo演示地址 Demo为最新 ...

  4. html5 在线白板,Html5 canvas画图白板踩坑

    最近接手了一个小型的H5,最主要的功能大概就是拍照上传和canvas画板了. 主要是记录一下自己菜到像傻子一样的技术. 1.canvas画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大. 2. ...

  5. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅 ...

  6. html5 canvas 画图移动端出现锯齿毛边的解决方法

    html5 canvas 画图移动端出现锯齿毛边的解决方法 参考文章: (1)html5 canvas 画图移动端出现锯齿毛边的解决方法 (2)https://www.cnblogs.com/dear ...

  7. 小程序---canvas画图，生成分享图片，画图文字换行

    小程序目前只支持转发,不支持分享朋友圈,为了能实现分享,很多线上小程序通过生成分享图片,保存到相册来给用户增加分享的可能. 具体思路及简要代码如下: 一:canvas画图drawCanvas:func ...

  8. 解决canvas画图模糊的问题

    canvas 画图经常发现他是模糊的.解决这个问题主要从两个方面下手. 改变canvas渲染的像素 情况:画1像素的线条看起来模糊不清,好像更宽的样子. 解决方案 var ctx = canvas.g ...

  9. [转]html5 Canvas画图教程(1)—画图的基本常识

    今天看到一个讲Canvas的教程,很通俗移动,所以转载了下. 虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascri ...

最新文章

  1. c++ vector 先进先出_C++ STL Vector(容器)学习
  2. 探讨PHP获取checkbox值
  3. 前后端分离之Vue(三)爬过得那些坑
  4. docker之centos7安装docker
  5. mysql安装在opt_一、编译安装第一个MySQL 5.1.33cd /opt/usr/sbin/groupadd mysql/usr/sbin/useradd -g...
  6. 挂载WebDav提供的网络存储----Client端
  7. Java 字符串 String 与整数型 int 之间的转换
  8. CS229 Machine Learning 自学与答案
  9. stm32f4 dma da正弦波发生器 keil5 hal库 CubeMX
  10. 介绍10个免费、强大的PHP编辑器/开发工具
  11. 翟菜花：从风流到下流，杜蕾斯新文案为何被人口诛笔伐？
  12. 微信里iphone后退不刷新问题解决方案，真实有效
  13. arduino 嗡鸣器 音乐_arduino笔记一：用arduino实现蜂鸣器播放音乐
  14. 小程序不用服务器可以上线吗？
  15. nginx单点故障的 处理方案keepalived
  16. 在虚拟机关机时，提示Ubuntu-Unattended upgrade in progress during shutdown, please don‘t turn off
  17. 静默升级linux,Firefox 10 正式发布 支持静默升级功能
  18. 南京网预赛02 BY bly
  19. 文献阅读09期：基于ADMM方法的柔性负载实时定价
  20. 苹果屏幕尺寸_苹果推出今年最小和最大的手机：12 mini和Pro max

热门文章

  1. android学习日记12--布局管理器
  2. Entity Framework在WCF中序列化的问题（转）
  3. STL之deque和其他容器
  4. 李洋疯狂C语言之break和continue的区别
  5. iPhone iPad 各种控件默认高度
  6. 一个 js 中值传递和引用传递的坑。
  7. 云数据库·ApsaraDB 产品6月刊
  8. php 数据类型转换与比较
  9. Activit系列之---Activity的生命周期
  10. [Drupal] How to get the real path of a node, no matter it is a path or a url alias