iphone - 给定一组点，如何计算平滑路径的控制点？

Question

我正在使用 UIBezierPath，但这个问题涉及路径的控制点，而不是绘图。给定一组点，我可以渲染一条路径。但是，我无法弄清楚如何计算控制点以像在照片曲线编辑器(How to implement a Photoshop Curves editor in UIKit)中那样拥有平滑的线条。

我看到的最接近的答案在这里:how can i trace the finger movement on touch for drawing smooth curves?

然而，我仍然无法掌握正确的计算方法。用代码总结一下:

for (int i = 0; i< points; i++) 
{
     ...

     [path addQuadCurveToPoint:nextPoint controlPoint:WTF];
}

Answer 1

你链接到的图像是一个不使用二次曲线的例子，所以我要运行使用图像而不是代码。

下面的 ios(和 os x)上的贝塞尔曲线路径基本上是绘图命令和点的列表。例如:

[path moveTo:CGMakePoint(1,1)];
[path curveToPoint:(10,10) controPoint1:(3,7) controlPoint2:(4,1)];
[path curveToPoint:(10,10) controPoint1:(15,17) controlPoint2:(21,11)];
[path closePath];

结果:

moveto (1,1)      
curveto (10,10) (3,7) (4,1) 
curveto (20,0) (15,17) (21,11)    
closepath 

贝塞尔曲线路径上的控制点控制曲线离开点的方向和速率。第一个控制点 (cp) 控制曲线离开前一个点的方向和速率，第二个 cp 控制您要弯曲到的点的方向和速率。对于二次曲线(使用 addQuadCurveToPoint:controlPoint: 得到的)，这两个点都是相同的，正如您在文档中看到的方法 here .

沿着一组点获得平滑曲线涉及使 cp1 和 cp2 彼此共线，并且该线平行于该线段两端的点。

这看起来像:

[path moveTo:2];
[path curveTo:3 controlPoint1:cp1 controlPoint2:cp2];

cp1 和 cp2 可以通过选择一些恒定的线长度和做一些几何来计算(我现在忘记了我所有的线方程，但它们是 easily googleable)

将使用#-># 指定一个段，并使用#->#(cp#) 为该段的 curveto 调用指定一个控制点。

下一个问题是使曲线从 2->3 段平滑进入 3->4 段。此时在您的代码中，您应该为 2->3(cp2) 计算出一个控制点。给定之前的恒定线长(这将控制您获得的曲线的锐度)，您可以通过获得与 2->3(cp2) 和图中点 3 共线的点来计算 3->4 的 cp1。然后计算与 3->4(cp1) 共线并平行于点 3 和点 4 形成的直线的 3->4(cp2)。冲洗并重复您的点阵列。