Как добавить эффект зависания для каждого фрагмента (холст 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 --- Используйте Cavas библиотеку, которая позволяет отслеживать каждый клин в вашей круговой диаграмме и, следовательно, ваш эффект зависания. Несколько хороших библиотек (среди многих хороших): EaselJs, FabricJs и KineticJs.

У Elated.com есть отличный учебник, который показывает, что вы ищете. Проверьте: http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/