在图像上绘制 rounded/movable 区域

Question

我想在照片上绘制圆形区域和点。我决定用一个 svg 来做，它更简单，可以调整大小和移动。

但是，从点列表中我没有经过所有点的区域。我使用了 Quadratic Bezier CurveTo，但我无法找到数学公式来为“Q 参数”提供值来计算从 A 到 C 经过 B 的控制点。目前，当角度太高时，线在点之前“转”，但我想去触摸点。

Answer 1

通过B点的曲线有无数条。

让我们定义 B 位于参数 t=1/2

处的曲线上

控制点未知的二次曲线Q有方程

P(t) = A*(1-t)^2 + 2*Q*t*(1-t) + C*t^2

代入点B和t=1/2，我们有

B = A/4 + Q/2 + C/4

Q = 2*B - A/2 - C/2
or in coordinates
Q.x = 2*B.x - A.x/2 - C.x/2
Q.y = 2*B.y - A.y/2 - C.y/2

当 B 相对于 A 和 C

接近对称时，这种非常简单的方法应该很有效

Q.x = 2*7 - 0 - 20/2 = 4
Q.y = 2*10 - 0 - 0 = 20

Drawing rounded/movable area over image