如何判断饼图扇区是否有足够空间容纳标签？

核心思路 #

你提到的弦长公式完全可以用来判断扇区是否能容纳内部标签，以下是具体实现逻辑：

弦长公式（翻译版） #

三角函数计算弦长公式：弦长 = 2 × r × sin(θ/2)，其中r为饼图的半径，θ为当前扇区对应的圆心角（需使用弧度单位）

具体判断步骤 #

• 计算标签文本宽度：通过Canvas API的measureText()方法获取标签的实际渲染宽度，记为textWidth。为了预留边距，可额外加上固定值（比如textWidth + 8），避免标签紧贴扇区边缘。
• 计算扇区弦长：将当前扇区的圆心角（若为度数需转换为弧度，公式：弧度 = 度数 × Math.PI / 180）代入弦长公式，得到当前扇区对应的弦长。
• 空间适配判断：如果计算出的弦长 > 带边距的文本宽度，说明扇区有足够空间容纳标签，可在内部绘制；反之则不在内部绘制标签，避免重叠或溢出。

补充优化 #

除了宽度判断，若标签存在多行或高度较大的情况，还需验证扇区径向方向的可用空间：计算扇区中心到弧边的距离（即饼图半径减去标签绘制的偏移量），确保大于标签的高度，避免纵向溢出。

内容的提问来源于stack exchange，提问作者Richard