如何为每个切片添加悬停效果（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/