Edited at

パイチャートの描画

More than 3 years have passed since last update.


.as

function drawPie(g:Graphics, x:Number, y:Number,

radius:Number, angle:Number, rotate:Number=0):void
{
var seg:uint = 8;
var r:Number = angle / seg;
var sin:Number = Math.sin(r);
var cos:Number = Math.cos(r);
var tan:Number = Math.tan(r / 2);
var pi2:Number = Math.PI / 2;
var ax:Number = Math.cos(rotate) * radius;
var ay:Number = Math.sin(rotate) * radius;
g.moveTo(x, y);
g.lineTo(x + ax, y + ay);
for (var i:int = 0; i<seg; i++ )
{
var nx:Number = cos * ax - sin * ay;
var ny:Number = cos * ay + sin * ax;
var t:Number = (i + 1) * r - pi2 + rotate;
var cx:Number = nx + radius * tan * Math.cos(t);
var cy:Number = ny + radius * tan * Math.sin(t);
g.curveTo(x + cx , y + cy, x + nx, y + ny);
ax = nx; ay = ny;
}
}

SVG + JavaScript


.jade

svg(width=500, height=500)

path(d='', stroke="red", stroke-width="20", stroke-linecap="round", fill="white")


.coffee

arc = (x, y, radius, angle, rotate=0)->

seg = 8
r = angle / seg
sin = Math.sin(r)
cos = Math.cos(r)
tan = Math.tan(r / 2)
pi2 = Math.PI / 2
ax = Math.cos(rotate) * radius
ay = Math.sin(rotate) * radius
path = ''
path += moveTo(x + ax, y + ay)
for i in [0...seg]
nx = cos * ax - sin * ay
ny = cos * ay + sin * ax
t = (i + 1) * r - pi2 + rotate
cx = nx + radius * tan * Math.cos(t)
cy = ny + radius * tan * Math.sin(t)
path += curveTo(x + cx , y + cy, x + nx, y + ny)
ax = nx
ay = ny
return path

moveTo = (x, y)->
return 'M' + x + ',' + y

lineTo = (x, y)->
return 'L' + x + ',' + y

curveTo = (x, y, ax, ay)->
return 'Q' + x + ',' + y + ',' + ax + ',' + ay

drawPie = ($path, ratio)->
start = -Math.PI / 2
end = Math.PI * 2
pie = arc 250, 250, 230, end * ratio, start
$path.attr('d', pie)

$pie = $('#pie')
drawPie($pie, 0.6)