沿着CGMutablePathRef绘制uiimage

Question

如何沿CGMutablePathRef绘制自定义uiimage？我可以从CGMutablePathRef中获取点，但它不会给出创建路径的平滑点。

我想知道我是否可以提取所有这些以及创建平滑路径的那个。

我使用过CGPathApply，但我只获得了控制点，而当我绘制图像时，它并不像原始CGMutablePathRef那样保持平滑

void pathFunction(void *info, const CGPathElement *element){
if (element->type == kCGPathElementAddQuadCurveToPoint)
{
    CGPoint firstPoint = element->points[1];
    CGPoint lastPoint = element->points[0];

    UIImage *tex = [UIImage imageNamed:@"myimage.png"];
    CGPoint vector = CGPointMake(lastPoint.x - firstPoint.x, lastPoint.y - firstPoint.y);
    CGFloat distance = hypotf(vector.x, vector.y);
    vector.x /= distance;
    vector.y /= distance;
    for (CGFloat i = 0; i < distance; i += 1.0f) {
        CGPoint p = CGPointMake(firstPoint.x + i * vector.x, firstPoint.y + i * vector.y);
        [tex drawAtPoint:p blendMode:kCGBlendModeNormal alpha:1.0f];
    }
}

}

Answer 1

看起来您正在寻找用于从起点和终点以及两个控制点绘制立方贝塞尔曲线的函数。

start⋅(1-t)^3 + 3⋅c1⋅t(1-t)^2 + 3⋅c2⋅t^2(1-t) + end⋅t^3

通过将t的值设置在0和1之间，您将在曲线长度的某个百分比处获得曲线上的一个点。我在this blog post的末尾简要介绍了它的工作原理。

更新

要找到在起点和终点之间的某处绘制图像的点，你选择一个t（例如0.36并用它来计算那些点的x和y值。

CGPoint start, end, c1, c2; // set to some value of course
CGFloat t = 0.36;
CGFloat x = start.x*pow((1-t),3) + 3*c1.x*t*pow((1-t),2) + 3*c2.x*pow(t,2)*(1-t) + end.x*pow(t,3);
CGFloat y = start.y*pow((1-t),3) + 3*c1.y*t*pow((1-t),2) + 3*c2.y*pow(t,2)*(1-t) + end.y*pow(t,3);

CGPoint point = CGPointMake(x,y); // this is 36% along the line of the curve

给定图像中的路径对应于橙色圆圈

如果对曲线上的许多点执行此操作，则会在曲线上放置许多图像。

更新2

您遗漏kCGPathElementAddQuadCurveToPoint（隐式）有3个点：开始（当前/之前的点，控制点（points[0]）和结束点（points[1]）。四边形曲线两个控制点是相同的c1 = c2;。对于kCGPathElementAddCurveToPoint，您将获得2个不同的控制点。