如何计算饼图段上圆角二次曲线的控制点

问题描述 投票:0回答:1

我正在尝试绘制一个饼图,其中图表的每个部分(饼图块)都有圆角。切口(吃豆人的嘴)也应该有圆角,但我在定位需要在外角绘制的二次贝塞尔曲线的控制点时遇到了一些困难。

所以我想计算橙色箭头指向的点。我知道橙色圆圈内的两点。

我尝试了一种实现方式,我可以找到两个橙色点之间的线的垂直角度,然后使用该角度和两个橙色点之间的中心点,我可以将其从中间点移开所需的量角度。这种方法有点有效,但根据我在圆上的位置,我会得到一些不好的结果,其中某些地方控制点位于橙色点之间的线的错误一侧。这个例子最能说明:

根据我现有的信息计算沿圆的这一点的正确方法是什么?

我正在 JS 中执行此操作,并使用 PDFKit 的工具进行绘图,但是任何可以绘制贝塞尔曲线的语言或工具的帮助都会有所帮助。

javascript bezier
1个回答
0
投票

与往常一样,在实际发布问题、制定问题并拟定问题后,人们很快就能找到答案。

解决这个问题的方法是找到中心线与外圆弧碰撞的位置(如果它被绘制得与半径一样长)。

const cpx = centerX + radius * Math.cos(angleRad);
const cpy = centerY + radius * Math.sin(angleRad);

angleRad
已经被称为首先用来画线的。

© www.soinside.com 2019 - 2024. All rights reserved.