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

Question

我正在使用 UIBezierPath，但这个问题涉及路径的控制点，而不是绘图。给定一组点，我可以渲染一条路径。但是，我无法弄清楚如何计算控制点以获得像照片曲线编辑器中那样的平滑线（ 如何在 UIKit 中实现 Photoshop 曲线编辑器）。

我见过的最接近的答案在这里： 如何跟踪触摸时的手指运动以绘制平滑曲线？

但是，我仍然无法掌握正确的计算。用代码总结一下：

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: 得到的结果），这两个点是相同的，正如您在方法 此处。

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

这看起来像：

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

cp1 和 cp2 可以通过选择一些恒定的线长度并进行一些几何计算来计算（i现在忘记了我所有的直线方程，但它们很容易在谷歌上搜索）

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

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

Answer 2

我不确定这会有多大帮助，但我必须做一些类似的事情来实现一个弯曲的路径，以便在此应用程序中遵循笔记（www.app.net/hereboy）。本质上，它是一条三曲线路径。

为此，我在每条曲线上创建了 4 个点：一个起点、一个终点以及位于 25% 标记和 75% 标记处的两个控制点。

这是我为此编写的代码：

//create points along the keypath for curve.
CGMutablePathRef curvedPath = CGPathCreateMutable();
const int TOTAL_POINTS = 3;
int horizontalWiggle = 15;

int stepChangeX = (endPoint.x - viewOrigin.x) / TOTAL_POINTS;
int stepChangeY = (endPoint.y - viewOrigin.y) / TOTAL_POINTS;

for(int i = 0; i < TOTAL_POINTS; i++) {
    int startX = (int)(viewOrigin.x + i * stepChangeX);
    int startY = (int)(viewOrigin.y + i * stepChangeY);

    int endX = (int)(viewOrigin.x + (i+1) * stepChangeX);
    int endY = (int)(viewOrigin.y + (i+1) * stepChangeY);

    int cpX1 = (int)(viewOrigin.x + (i+0.25) * stepChangeX);
    if((i+1)%2) {
        cpX1 -= horizontalWiggle;
    } else {
        cpX1 += horizontalWiggle;
    }
    int cpY1 = (int)(viewOrigin.y + (i+0.25) * stepChangeY);

    int cpX2 = (int)(viewOrigin.x + (i+0.75) * stepChangeX);
    if((i+1)%2) {
        cpX2 -= horizontalWiggle;
    } else {
        cpX2 += horizontalWiggle;
    }
    int cpY2 = (int)(viewOrigin.y + (i+0.75) * stepChangeY);

    CGPathMoveToPoint(curvedPath, NULL, startX, startY);
    CGPathAddCurveToPoint(curvedPath, NULL, cpX1, cpY1, cpX2, cpY2, endX, endY);
}

祝你好运！