您好,登錄后才能下訂單哦!
使用Canvas怎么實(shí)現(xiàn)一個手勢控制功能?針對這個問題,這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
首先講一下思路:
首先跟圖需求可以知道,作出這樣的效果需要一組對象,每個對象有顏色,所占比例,名字等,也就是這樣:
let chartData=[ {color:"#FD7A4F",title:"其他",percent:0.2}, {color:"#FDD764",title:"建筑/土木工程",percent:0.25}, *** ]
注意百分比加在一起必須是100%,也就是1,否則圓環(huán)可能不會畫滿,或者多處一部分。
根據(jù)每部分所占比例計(jì)算出每個部分所占的弧度,使用ctx.arc(x0, y0,r, startAngle, endAngle);畫出圓弧,當(dāng)前項(xiàng)需要向外偏移一些,過程中具體上代碼講這部分:
首先定義一個multiCircleChart類,
//ES6寫法 class multiCircleChart { constructor(id, chartDatas, defalutIndex,callback) { /*構(gòu)造函數(shù): 傳入的參數(shù)ID,canvas的id,用于放置繪畫內(nèi)容; chartDatas:畫圖所需參數(shù)數(shù)據(jù); defalutIndex:defalutIndex:當(dāng)前選中項(xiàng) callback:點(diǎn)擊環(huán)形圖的回調(diào)函數(shù) */ 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; /* 因?yàn)樵谝苿佣水媹D需要多倍圖,這樣圖像會很清晰,所以這里size,也就是canvas的context設(shè)置為canvas大小的4倍; 注意:?。?!canvas.width指的是畫布內(nèi)容(context)的大小,cavas.style.width是canvas在頁面上顯示的大小,也就是說,真是的圖片是顯示圖片大小的4倍 */ this.ctx = this.canvas.getContext("2d"); this.defalutIndex = defalutIndex;//當(dāng)前選中項(xiàng) this.chartDatas = chartDatas;//繪制所需數(shù)據(jù) this.lineWidth = this.size/5;//環(huán)形圖的圓環(huán)寬度,設(shè)置為canvas寬度的1/5; this.startAngle = -0.5;//環(huán)形圖起始角度,這里為-0.5,計(jì)算時也就是-0.5*Math.PI,放在坐標(biāo)系中也就是環(huán)形圖最高點(diǎn)那個位置的角度;順便說一下,右側(cè)為0,下方為0.5,左側(cè)為1 this.callback=callback; this.canvas.addEventListener('click',this.mouseDownEvent.bind(this)); /*給canvas添加監(jiān)聽函數(shù),并將事件傳遞過去,用于計(jì)算點(diǎn)擊位置在哪個數(shù)據(jù)項(xiàng)里*/ this.AngleList=[];//記錄每一項(xiàng)的結(jié)束角度,結(jié)合監(jiān)聽事件,計(jì)算點(diǎn)擊事件的位置在哪個數(shù)據(jù)項(xiàng)里 } }
構(gòu)造函數(shù)寫好了,接下來需要畫環(huán)形圖了:
class multiCircleChart { *** draw() { this.ctx.clearRect(0,0,this.size,this.size);//每次繪畫前,先清空一下畫布,避免畫布被污染 if (this.chartDatas.length == 0) return;//如果傳入的參數(shù)長度為0的話,也就不需要繼續(xù)畫了 this.ctx.lineWidth = this.lineWidth;//為圓環(huán)寬度賦值 let startAngle = Math.PI * -0.5;//設(shè)置起始角度 let endAngle = startAngle;設(shè)置結(jié)束角度 this.AngleList=[]; /*下面就開始動筆畫圖了*/ this.chartDatas.map((item, i) => { this.ctx.beginPath();//開始畫圖命令,避免粘連 this.ctx.strokeStyle = item.color;//設(shè)置邊框顏色,因?yàn)槲覀儺嫷氖菆A環(huán),所以填充色不需要,只要有邊框色就行了 if (i > 0) { //從第二項(xiàng)開始(i==1)時,起始角度就是上一次的結(jié)束角度 startAngle = endAngle; } endAngle = startAngle + item.percent * Math.PI * 2;//計(jì)算當(dāng)前項(xiàng)的結(jié)束角度,根據(jù)所占的百分比計(jì)算所占角度(item.percent * Math.PI * 2),再結(jié)合起始角度就可以計(jì)算出真正的偏移角度了(startAngle + item.percent * Math.PI * 2) this.AngleList.push(endAngle); //選中當(dāng)前項(xiàng),需要向外偏移 if (i == this.defalutIndex) { /* 選中當(dāng)前項(xiàng),需要向外偏移 使用起始角度和結(jié)束角度的中間值來就算偏移位置 */ 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軸偏移量 //未選中項(xiàng)的圓心位置是(this.size / 2, this.size / 2),選中的需要偏移,圓心是(this.size / 2+x, this.size / 2+y);這樣畫出的環(huán)形就會向外偏移環(huán)形寬度的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(); }); } }
現(xiàn)在所畫的圖是一個靜態(tài)的,點(diǎn)擊環(huán)形圖是不會有任何變化的,當(dāng)然現(xiàn)在這樣也是可以用的
let circlePeiChart = new multiCircleChart("circle-pei-chart",chartDatas,defalutIndex,);//new 一個 circlePeiChart.draw();//畫圖
外部切換選中項(xiàng)
circlePeiChart.defalutIndex=2;//修改選中項(xiàng)Index值 circlePeiChart.draw();//重繪
那么怎樣點(diǎn)擊canvas切換當(dāng)前選項(xiàng)呢,思路很簡單:以canvas中心為圓心,監(jiān)測點(diǎn)擊位置,點(diǎn)擊位置與圓心連成一線,以直角坐標(biāo)系為參照,計(jì)算出點(diǎn)擊位置的弧度,跟angleList做比較,計(jì)算出點(diǎn)擊的是第幾項(xiàng),然后修改defalutIndex,重繪canvas.
class multiCircleChart { *** *** mouseDownEvent(e){ const [x1,y1]=[e.offsetX,e.offsetY];//點(diǎn)擊事件位置 const [x0,y0]=[this.size/2/4,this.size/2/4];//原點(diǎn)位置;注意:原點(diǎn)位置為canvas中心,不是context中心 let angle=0; if(x1>x0){ //點(diǎn)擊位置在第一象限(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{ //點(diǎn)擊位置在第三象限(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++){//計(jì)算角度落在第幾項(xiàng) if(angle<this.AngleList[i]){ //當(dāng)點(diǎn)擊位置角度值第一次大于某一項(xiàng)時,也就是說點(diǎn)擊位置就在這一項(xiàng)上 this.defalutIndex=i;//重新賦值defaultIndex this.draw();//重繪canvas this.callback?this.callback(i):'';//如果有回調(diào)函數(shù),則調(diào)用毀掉函數(shù) break;//跳出循環(huán),結(jié)束操作; } } } }
最后把整體代碼貼上吧
//html <canvas id="circle-pei-chart"></canvas>
//調(diào)用 let chartDatas=[ {color: "rgb(253, 122, 79)",title: "后端開發(fā)",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: "后端開發(fā)",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); //選中當(dāng)前項(xiàng),需要向外偏移 if (i == this.defalutIndex) { //選中當(dāng)前項(xiàng),需要向外偏移 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; } } } }
關(guān)于使用Canvas怎么實(shí)現(xiàn)一個手勢控制功能問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。