Canvas环形饼图与手势控制的实现代码

//调用 let chartDatas=[ {color: "rgb(253, 122, 79)",title: "后端开发",percent: 0.2}, **]; let defalutIndex=0 let circlePeiChart = new multiCircleChart("circle-pei-chart",chartDatas, defalutIndex,(i)=>{defalutIndex=i}); circlePeiChart.draw();

//重绘 circlePeiChart.defaultIndex=2; circlePeiChart.draw();

/* chartDatas [ {color: "rgb(253, 122, 79)",title: "后端开发",percent: 0.2}, **]; */ class multiCircleChart { constructor(id, chartDatas, defalutIndex,callback) { this.canvas = document.getElementById(id); this.size = this.canvas.parentNode.clientWidth * 4; this.canvas.style.width = this.size / 4 + "px"; this.canvas.style.height = this.size / 4 + "px"; this.canvas.width = this.size; this.canvas.height = this.size; this.ctx = this.canvas.getContext("2d"); this.defalutIndex = defalutIndex; this.chartDatas = chartDatas; this.lineWidth = this.size/5; this.startAngle = -0.5; this.callback=callback; this.canvas.addEventListener('click',this.mouseDownEvent.bind(this)); this.AngleList=[]; } draw() { this.ctx.clearRect(0,0,this.size,this.size); if (this.chartDatas.length == 0) return; this.ctx.lineWidth = this.lineWidth; this.ctx.lineCap="butt"; let startAngle = Math.PI * -0.5; let endAngle = startAngle; this.AngleList=[]; this.chartDatas.map((item, i) => { this.ctx.beginPath(); this.ctx.strokeStyle = item.color; if (i > 0) { startAngle = endAngle; } endAngle = startAngle + item.percent * Math.PI * 2; this.AngleList.push(endAngle); //选中当前项，需要向外偏移 if (i == this.defalutIndex) { //选中当前项，需要向外偏移 let centerAngle=(startAngle+endAngle)/2; let x=this.lineWidth*0.2*Math.cos(centerAngle); let y=this.lineWidth*0.2*Math.sin(centerAngle); this.ctx.arc(this.size / 2+x, this.size / 2+y, this.size / 2 - this.lineWidth / 2 - this.lineWidth * 0.2, startAngle, endAngle); } else { this.ctx.arc(this.size / 2, this.size / 2, this.size / 2 - this.lineWidth / 2 - this.lineWidth * 0.2, startAngle, endAngle); } this.ctx.stroke(); }); } mouseDownEvent(e){ const [x1,y1]=[e.offsetX,e.offsetY]; const [x0,y0]=[this.size/2/4,this.size/2/4]; let angle=0; if(x1>x0){ y1<y0?angle=-0.5*Math.PI+Math.atan((x1-x0)/(y0-y1)):angle=Math.atan((y1-y0)/(x1-x0)); }else{ y1<y0?angle=Math.PI+Math.atan((y0-y1)/(x0-x1)):angle=Math.atan((x0-x1)/(y1-y0))+Math.PI*0.5; } for(let i=0;i<this.AngleList.length;i++){ if(angle<this.AngleList[i]){ this.defalutIndex=i; this.draw(); this.callback?this.callback(i):''; break; } } } }

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!