沿 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 个不同的控制点。