Reactjs 在图像上绘制圆形/可移动区域_Reactjs_Math_Svg_Quadratic Curve

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

reactjs math svg

Reactjs 在图像上绘制圆形/可移动区域,reactjs,math,svg,quadratic-curve,Reactjs,Math,Svg,Quadratic Curve,我想画一张照片上的圆形区域和点。我决定用一个svg来实现它，它更简单，可以调整大小和移动但是，从一系列的点来看，我并没有一个区域可以穿过所有的点。我使用了二次贝塞尔曲线，但我无法找到数学公式来给出“Q参数”值，以计算从A到C经过B的控制点。目前，当角度太高时，线“转”在点之前，但我想去触摸点通过点B的曲线数量是无限的让我们定义B位于参数t=1/2 控制点未知的二次曲线Q具有方程 P(t) = A*(1-t)^2 + 2*Q*t*(1-t) + C*t^2 子基点B和t=1/2，我们

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

但是，从一系列的点来看，我并没有一个区域可以穿过所有的点。我使用了二次贝塞尔曲线，但我无法找到数学公式来给出“Q参数”值，以计算从A到C经过B的控制点。目前，当角度太高时，线“转”在点之前，但我想去触摸点

通过点B的曲线数量是无限的

让我们定义

位于参数

t=1/2

控制点未知的二次曲线

具有方程

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

子基点

和

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

当

与

和

接近对称时，这种非常简单的方法应该可以很好地工作

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