如何爲每個切片添加懸停效果（html5畫布）

Question

嗨，你可以幫我設置這段代碼。我不擅長HTML5。

如果你的瀏覽器不支持HTML5畫布這個文本顯示。

$(document).ready(function() { 
    // initialize some variables for the chart 
    var 

canvas = $("#canvas")[0]; 
     var ctx = canvas.getContext('2d'); 
     var data = [75,68,32,95,20,51]; 
     var colors = ["#7E3817", "#C35817", "#EE9A4D", "#A0C544", "#348017", "#307D7E"]; 
     var center = [canvas.width/2, canvas.height/2]; 
     var radius = Math.min(canvas.width, canvas.height)/2; 
     var lastPosition = 0, total = 0; 
     var pieData = []; 

    // total up all the data for chart 
    for (var i in data) { total += data[i]; } 

    // populate arrays for each slice 
    for(var i in data) { 
     pieData[i] = []; 
     pieData[i]['value'] = data[i]; 
     pieData[i]['krasa'] = colors[i]; 
     pieData[i]['startAngle'] = 2 * Math.PI * lastPosition; 
     pieData[i]['endAngle'] = 2 * Math.PI * (lastPosition + (data[i]/total)); 
     lastPosition += data[i]/total; 
    } 

function drawChart() 
    { 
     for(var i = 0; i < data.length; i++) 
     { 
      var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); 
      gradient.addColorStop(0, "#ddd"); 
      gradient.addColorStop(1, colors[i]); 
      ctx.beginPath(); 
      ctx.moveTo(center[0],center[1]); 
      ctx.arc(center[0],center[1],radius,pieData[i]['startAngle'],pieData[i]['endAngle'],false); 
      ctx.lineTo(center[0],center[1]); 
      ctx.closePath(); 
      ctx.fillStyle = gradient; 
      ctx.fill(); 
      ctx.lineWidth = 1; 
      ctx.strokeStyle = "#fff"; 
      ctx.stroke(); 
     } 
    } 

    drawChart(); // first render 
}); 

如何添加懸停效果爲每片？

Answer 1

在您將楔子繪製到畫布上之後，它們只會變成較大圖像中的像素。

此時您無法跟蹤單個餡餅楔子。因此沒有辦法追蹤任何特定楔子上的盤旋。

但是...你有幾個選擇！

選項＃1 ---進行自己的命中測試，以確定您點擊了哪個餡餅楔子。

這將是這個樣子（我沒有測試過這個！）

var chartStartAngle=0; // you started drawing the pie at angle 0 

function handleChartClick (clickEvent) { 

    // Get the mouse cursor position at the time of the click, relative to the canvas 
    var mouseX = clickEvent.pageX - this.offsetLeft; 
    var mouseY = clickEvent.pageY - this.offsetTop; 

    // Was the click inside the pie chart? 
    var xFromCenter = mouseX - center[0]; 
    var yFromCenter = mouseY - center[1]; 
    var distanceFromCenter = Math.sqrt(Math.pow(Math.abs(xFromCenter), 2) + Math.pow(Math.abs(yFromCenter), 2)); 

    if (distanceFromCenter <= radius) { 

     // You clicked inside the chart. 
     // So get the click angle 
     var clickAngle = Math.atan2(yFromCenter, xFromCenter) - chartStartAngle; 

     if (clickAngle < 0) clickAngle = 2 * Math.PI + clickAngle; 

     for (var i in pieData) { 
     if (clickAngle >= pieData[i]['startAngle'] && clickAngle <= pieData[i]['endAngle']) { 
      // You clicked on pieData[i] 
      // So do your effect here! 
      return; 
     } 
     } 
    } 
    } 

選項＃2 ---使用卡瓦酒庫，讓您跟蹤每個楔在你的餅圖並因此做你的懸停效果。好幾個很好的庫（包括很多好的庫）包括：EaselJs，FabricJs和KineticJs。

Elated.com有一個偉大的教程，顯示你在找什麼。檢查出來：http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/