Codando
O código é bem pequeno, fiz com menor número de linhas possíveis pra ficar bem legível.
html:
<canvas id="pizza" width="400" height="400"> Seu browser não suporta canvas </canvas>
javascript:
var Pizza = {
// Configuração
canvas:document.getElementById('pizza'),
height:400,
width:400,
cor:'#293F8A',
// Calculando variaveis pra desenhar
_init:function(){
Pizza.ctx = Pizza.canvas.getContext("2d");
Pizza.radius = Math.min(Pizza.width, Pizza.height) / 2;
Pizza.center_x = Pizza.width/2;
Pizza.center_y = Pizza.height/2;
},
// Desenhando - é só colocar Pizza._draw(60) pra desenhar
// o gráfico com 60% de ocupação
_draw:function(percentual){
Pizza.ctx.clearRect(0,0,Pizza.width,Pizza.height);
Pizza.ctx.beginPath();
Pizza.ctx.moveTo(Pizza.center_x, Pizza.center_y);
Pizza.ctx.arc(
Pizza.center_x,
Pizza.center_y,
Pizza.radius,
Math.PI * (- 0.5), // inicio da fatia
Math.PI * (- 0.5 + 2 * percentual/100), // fim da fatia
false
);
Pizza.ctx.closePath();
Pizza.ctx.fillStyle = Pizza.cor;
Pizza.ctx.fill();
}
}
Pizza._init();
E por último, o drag, onde utilizo o jQuery UI, aí fica simples:
html:
<div id="mascara_percentual"> <span id="slider">drag<br/>me</span> </div>
javascript:
$('#slider').draggable({
containment:'#mascara_percentual',
drag:function() {
var left = parseInt($(this).css('left').replace('px',''));
var percentual = parseInt(left / 350 * 100);
// (350 = 400 do width da mascara - 50 do width do slider)
Pizza._draw(percentual);
}
});
// Iniciando em 70%
$('#slider').css('left','70%'); // drag
Pizza._draw(70); // canvas
Danilo gosta de novas tecnologias é focado em HTML5 / Javascript.
