JavaScript:如何获取饼图的中心？

Question

您好，我正在尝试使用 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 );
    }

Answer 1

简单地将切片视为三 Angular 形，即忽略圆弧。

有很多不同的方式来定义“中心”。看看at the wikipedia article关于如何做到这一点。您可能需要 Angular 平分线的交点，称为内心。这是内切圆的中心，它为文本提供了最大的空间。

中心坐标计算如下:

设 (x_a,y_a), (x_b,y_b), 和 ( x_c,y_c) 为三 Angular 形三个 Angular 的坐标，设 a、b 和 c 为对边的长度。即，a = ||(x_b,y_b)-(x_c,y_c)| |等最后令P=a+b+c。那么中心就是

((a x_a + b x_b + c x_c)/P, (a y_a + b y _b + c y_c)/P)。

干杯，