【问题标题】：Drawing rounded/movable area over image在图像上绘制圆形/可移动区域
【发布时间】：2020-09-15 12:30:43
【问题描述】：
我想在照片上绘制圆形区域和点。
我决定使用更简单的 svg 来调整大小和移动。
但是，从点列表中，我没有通过所有点的区域。
我使用了二次贝塞尔曲线，但我无法找到数学公式来为“Q 参数”提供值来计算从 A 到 C 的控制点经过 B。
目前，当角度太高时，线在点之前“转弯”，但我想去触摸点。
【问题讨论】：
标签：
reactjs
math
svg
quadratic-curve
【解决方案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