您好,我正在尝试使用 HTML canvas 元素创建一个简单的饼图。 我在网上找到了一个很好的教程,并开始学习它是如何完成的。
现在我想添加一些文本,我需要知道如何找到饼图中可以添加文本的每个切片的中心。
这是循环代码:
for ( i = 0; i < t.data.length; i++ )
{
label = t.data[i].label;
value = t.data[i].value;
color = t.data[i].color;
ctx.lineWidth = t.strokeLineWidth;
ctx.strokeStyle = "#FFFFFF";
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo( centerX, centerY );
ctx.arc( centerX, centerY, radius, lastEnd, lastEnd + ( Math.PI * 2 * ( value / total ) ), false );
ctx.lineTo( centerX, centerY );
ctx.fill();
ctx.stroke();
lastEnd += Math.PI * 2 * ( value / total );
}
最佳答案
简单地将切片视为三 Angular 形,即忽略圆弧。
有很多不同的方式来定义“中心”。看看at the wikipedia article关于如何做到这一点。您可能需要 Angular 平分线的交点,称为内心。这是内切圆的中心,它为文本提供了最大的空间。
中心坐标计算如下:
设 (xa,ya), (xb,yb), 和 ( xc,yc) 为三 Angular 形三个 Angular 的坐标,设 a、b 和 c 为对边的长度。即,a = ||(xb,yb)-(xc,yc)| |等最后令P=a+b+c。那么中心就是
((a xa + b xb + c xc)/P, (a ya + b y b + c yc)/P)。
干杯,
关于JavaScript:如何获取饼图的中心?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3484664/