相思资源网 Design By www.200059.com
首先上一下效果图：
左右的箭头和下方的标注以及环形图本身都可以控制环形图的选中状态。
首先讲一下思路：
布局很简单，我就不写了，主要讲下作图过程。
首先跟图需求可以知道，作出这样的效果需要一组对象，每个对象有颜色，所占比例，名字等，也就是这样：
let chartData=[
{color:"#FD7A4F",title:"其他",percent:0.2},
{color:"#FDD764",title:"建筑/土木工程",percent:0.25},
***
]
注意百分比加在一起必须是100%，也就是1，否则圆环可能不会画满，或者多处一部分。
根据每部分所占比例计算出每个部分所占的弧度，使用ctx.arc(x0, y0,r, startAngle, endAngle);画出圆弧，当前项需要向外偏移一些，过程中具体上代码讲这部分：
首先定义一个multiCircleChart类,
//ES6写法
class multiCircleChart {
constructor(id, chartDatas, defalutIndex,callback) {
/*构造函数：
传入的参数ID，canvas的id,用于放置绘画内容；
chartDatas：画图所需参数数据；
defalutIndex：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;
/*
因为在移动端画图需要多倍图，这样图像会很清晰，所以这里size，也就是canvas的context设置为canvas大小的4倍；
注意：！！！canvas.width指的是画布内容(context)的大小，cavas.style.width是canvas在页面上显示的大小，也就是说，真是的图片是显示图片大小的4倍
*/
this.ctx = this.canvas.getContext("2d");
this.defalutIndex = defalutIndex;//当前选中项
this.chartDatas = chartDatas;//绘制所需数据
this.lineWidth = this.size/5;//环形图的圆环宽度，设置为canvas宽度的1/5；
this.startAngle = -0.5;//环形图起始角度，这里为-0.5，计算时也就是-0.5*Math.PI,放在坐标系中也就是环形图最高点那个位置的角度；顺便说一下，右侧为0，下方为0.5，左侧为1
this.callback=callback;
this.canvas.addEventListener('click',this.mouseDownEvent.bind(this));
/*给canvas添加监听函数，并将事件传递过去，用于计算点击位置在哪个数据项里*/
this.AngleList=[];//记录每一项的结束角度，结合监听事件，计算点击事件的位置在哪个数据项里
}
}
构造函数写好了，接下来需要画环形图了：
class multiCircleChart {
***
draw() {
this.ctx.clearRect(0,0,this.size,this.size);//每次绘画前，先清空一下画布，避免画布被污染
if (this.chartDatas.length == 0) return;//如果传入的参数长度为0的话，也就不需要继续画了
this.ctx.lineWidth = this.lineWidth;//为圆环宽度赋值
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) {
//从第二项开始（i==1）时，起始角度就是上一次的结束角度
startAngle = endAngle;
}
endAngle = startAngle + item.percent * Math.PI * 2;//计算当前项的结束角度，根据所占的百分比计算所占角度（item.percent * Math.PI * 2），再结合起始角度就可以计算出真正的偏移角度了（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);//x轴偏移量
let y=this.lineWidth*0.2*Math.sin(centerAngle);//y轴偏移量
//未选中项的圆心位置是（this.size / 2, this.size / 2），选中的需要偏移，圆心是（this.size / 2+x, this.size / 2+y）；这样画出的环形就会向外偏移环形宽度的1/5了；
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();
});
}
}
现在所画的图是一个静态的，点击环形图是不会有任何变化的,当然现在这样也是可以用的
let circlePeiChart = new multiCircleChart("circle-pei-chart",chartDatas,defalutIndex,);//new 一个
circlePeiChart.draw();//画图
外部切换选中项
circlePeiChart.defalutIndex=2;//修改选中项Index值 circlePeiChart.draw();//重绘
那么怎样点击canvas切换当前选项呢，思路很简单：以canvas中心为圆心，监测点击位置，点击位置与圆心连成一线，以直角坐标系为参照，计算出点击位置的弧度，跟angleList做比较，计算出点击的是第几项，然后修改defalutIndex，重绘canvas.
class multiCircleChart {
***
***
mouseDownEvent(e){
const [x1,y1]=[e.offsetX,e.offsetY];//点击事件位置
const [x0,y0]=[this.size/2/4,this.size/2/4];//原点位置；注意：原点位置为canvas中心，不是context中心
let angle=0;
if(x1>x0){
//点击位置在第一象限（y1>y0）或者第二象限(y1<y0)
y1<y0?angle=-0.5*Math.PI+Math.atan((x1-x0)/(y0-y1)):angle=Math.atan((y1-y0)/(x1-x0));
}else{
//点击位置在第三象限（y1<y0）或者第四象限(y1>y0)
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;//重新赋值defaultIndex
this.draw();//重绘canvas
this.callback?this.callback(i):'';//如果有回调函数，则调用毁掉函数
break;//跳出循环，结束操作；
}
}
}
}
最后把整体代码贴上吧
//html <canvas id="circle-pei-chart"></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;
}
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无Canvas环形饼图与手势控制的实现代码的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。