reactjs - 在图像上绘制圆形/可移动区域

Question

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

但是，从点列表中，我没有通过所有点的区域。我使用了二次贝塞尔曲线，但我无法找到数学公式来为“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

代入点Band 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