UIBezierPath：在 iPad 上创建的控制点比 iPhone 多？答案

【问题标题】：UIBezierPath: more control points created on iPad than iPhone?UIBezierPath：在 iPad 上创建的控制点比 iPhone 多？
【发布时间】：2016-09-26 18:30:25
【问题描述】：

我有以下代码（基于this 答案）来创建一个“可变形”圆形方形。

在 iPhone 上运行良好：

但在 iPad 上不太好（运行相同版本的 iOS - 10）：

代码是：

-(UIBezierPath*)circlePathWithCenter:(CGPoint)center andRadius:(CGFloat)radius {
    UIBezierPath *circlePath = [UIBezierPath bezierPath];
    [circlePath addArcWithCenter:center radius:radius startAngle:-M_PI endAngle:-M_PI/2 clockwise:YES];
    [circlePath addArcWithCenter:center radius:radius startAngle:-M_PI/2 endAngle:0 clockwise:YES];
    [circlePath addArcWithCenter:center radius:radius startAngle:0 endAngle:M_PI/2 clockwise:YES];
    [circlePath addArcWithCenter:center radius:radius startAngle:M_PI/2 endAngle:M_PI clockwise:YES];
    [circlePath closePath];

    NSLog(@"%@", [circlePath debugDescription]);

    return circlePath;
}

- (UIBezierPath *)squarePathWithCenter:(CGPoint)center andSize:(CGFloat)size
{
    CGFloat startX = center.x-size/2;
    CGFloat startY = center.y-size/2;

    UIBezierPath *squarePath = [UIBezierPath bezierPath];
    [squarePath moveToPoint:CGPointMake(startX, startY)];
    [squarePath addLineToPoint:squarePath.currentPoint];
    [squarePath addLineToPoint:CGPointMake(startX+size, startY)];
    [squarePath addLineToPoint:squarePath.currentPoint];
    [squarePath addLineToPoint:CGPointMake(startX+size, startY+size)];
    [squarePath addLineToPoint:squarePath.currentPoint];
    [squarePath addLineToPoint:CGPointMake(startX, startY+size)];
    [squarePath addLineToPoint:squarePath.currentPoint];
    [squarePath closePath];

    NSLog(@"%@", [squarePath debugDescription]);

    return squarePath;
}

动画代码是：

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration = 0.5;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

animation.fromValue = (__bridge id)(_innerShape.path);
animation.toValue = (__bridge id)(_innerSquare.CGPath);
_innerShape.path = _innerSquare.CGPath;

[_innerShape addAnimation:animation forKey:@"animatePath"];

仔细检查路径后，我注意到 iPad 版本上有更多“曲线”点（运行相同的代码）。从上一期的讨论来看，我认为控制点的数量需要相同才能顺利过渡。

设备之间的预期点数是否不同？有没有更可靠的方法来实现可变形的形状？

圆的iPad调试：

<UIBezierPath: 0x6c4f0d0; <MoveTo {13.5, 45.000004}>,
 <CurveTo {44.999996, 13.5} {13.499998, 27.603035} {27.603027, 13.500002}>,
 <CurveTo {45, 13.5} {44.999996, 13.5} {45, 13.5}>,
 <LineTo {45, 13.5}>,
 <CurveTo {76.5, 45} {62.396969, 13.499999} {76.5, 27.603031}>,
 <CurveTo {76.5, 45} {76.5, 45} {76.5, 45}>,
 <LineTo {76.5, 45}>,
 <CurveTo {45, 76.5} {76.5, 62.396969} {62.396969, 76.5}>,
 <CurveTo {45, 76.5} {45, 76.5} {45, 76.5}>,
 <LineTo {45, 76.5}>,
 <CurveTo {13.5, 45} {27.603031, 76.5} {13.499999, 62.396969}>,
 <CurveTo {13.5, 44.999996} {13.5, 45} {13.5, 44.999996}>,
 <Close>

iPhone 版本：

<UIBezierPath: 0x6180000b24e0; <MoveTo {13.5, 44.999999999999993}>,
 <CurveTo {45, 13.5} {13.500000000000002, 27.603030380330004} {27.603030380330011, 13.499999999999998}>,
 <LineTo {45, 13.5}>,
 <CurveTo {76.5, 45} {62.396969619669989, 13.500000000000002} {76.5, 27.603030380330011}>,
 <LineTo {76.5, 45}>,
 <CurveTo {45, 76.5} {76.5, 62.396969619669989} {62.396969619669989, 76.5}>,
 <LineTo {45, 76.5}>,
 <CurveTo {13.5, 45.000000000000007} {27.603030380330011, 76.5} {13.500000000000002, 62.396969619669996}>,
 <Close>

两个正方形：

<UIBezierPath: 0x6000000b0f80; <MoveTo {29.25, 29.25}>,
 <LineTo {29.25, 29.25}>,
 <LineTo {60.75, 29.25}>,
 <LineTo {60.75, 29.25}>,
 <LineTo {60.75, 60.75}>,
 <LineTo {60.75, 60.75}>,
 <LineTo {29.25, 60.75}>,
 <LineTo {29.25, 60.75}>,
 <Close>

【问题讨论】：

你为什么要打所有[squarePath addLineToPoint:squarePath.currentPoint] 电话？如果两条贝塞尔路径的段数不同，则在两条不同的贝塞尔路径之间制作动画可能会产生奇怪的中间形状。而那些使用currentPoint 的addLineToPoint 似乎会在路径中添加不必要的点。此外，我会将这些圆弧值移动 π/4，以便它们与正方形的角更好地对齐。
好问题！我链接到的帖子提到 arcWithCenter 是我认为添加了两个部分？所以最初的解决方法是在正方形中添加更多内容。

标签： ios objective-c iphone ipad uibezierpath

【解决方案1】：

如果在两条路径之间转换，重要的是它们具有相同数量的段。

有两种基本方法：

一种方法是将圆创建为多个线段，然后组成相同数量的线段的正方形。您只需要使用足够多的线段以使圆圈看起来是圆形的：

static NSInteger segments = 360;

- (UIBezierPath*)circlePathWithCenter:(CGPoint)center andRadius:(CGFloat)radius {

    CGFloat startAngle = -M_PI * 3.0 / 4.0;
    CGPoint point = CGPointMake(radius * cos(startAngle) + center.x, radius * sinf(startAngle) + center.y);

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:point];

    for (NSInteger angle = 1; angle <= segments; angle++) {
        point = CGPointMake(radius * cos(startAngle + ((CGFloat)angle / 360.0 * M_PI * 2.0)) + center.x,
                            radius * sin(startAngle + ((CGFloat)angle / 360.0 * M_PI * 2.0)) + center.y);
        [path addLineToPoint:point];
    }

    return path;
}

- (UIBezierPath *)squarePathWithCenter:(CGPoint)center andSize:(CGFloat)size {
    CGFloat startX = center.x-size/2;
    CGFloat startY = center.y-size/2;

    CGFloat endX = startX+size;
    CGFloat endY = startY;

    UIBezierPath *path = [UIBezierPath bezierPath];
    CGPoint point = CGPointMake(startX, startY);
    [path moveToPoint:point];

    for (NSInteger i = 1; i <= segments / 4; i++) {
        CGPoint point = CGPointMake(startX + (endX - startX) * (CGFloat) i / 90.0,
                                    startY + (endY - startY) * (CGFloat) i / 90.0);
        [path addLineToPoint:point];
    }

    startX = endX; startY = endY;
    endY += size;

    for (NSInteger i = 1; i <= segments / 4; i++) {
        CGPoint point = CGPointMake(startX + (endX - startX) * (CGFloat) i / 90.0,
                                    startY + (endY - startY) * (CGFloat) i / 90.0);
        [path addLineToPoint:point];
    }

    startX = endX; startY = endY;
    endX -= size;

    for (NSInteger i = 1; i <= segments / 4; i++) {
        CGPoint point = CGPointMake(startX + (endX - startX) * (CGFloat) i / 90.0,
                                    startY + (endY - startY) * (CGFloat) i / 90.0);
        [path addLineToPoint:point];
    }

    startX = endX; startY = endY;
    endY -= size;

    for (NSInteger i = 1; i <= segments / 4; i++) {
        CGPoint point = CGPointMake(startX + (endX - startX) * (CGFloat) i / 90.0,
                                    startY + (endY - startY) * (CGFloat) i / 90.0);
        [path addLineToPoint:point];
    }

    return path;
}

或者，您可以使用弧线，但您可能需要确保线段和弧线在两条路径中一对一地匹配。例如，我可以将正方形渲染为一系列零半径弧，它们之间有线段，而将圆渲染为一系列全尺寸弧，它们之间有零长度线段。这样一来，对moveToPoint、addArcWithCenter 和addLineToPoint 的每次调用都会有一对一的对应关系：

- (UIBezierPath*)circlePathWithCenter:(CGPoint)center andRadius:(CGFloat)radius {
    UIBezierPath *path = [UIBezierPath bezierPath];

    CGFloat startAngle = -M_PI;

    [path moveToPoint:CGPointMake(center.x - radius, center.y)];

    for (NSInteger angle = 0; angle < 4; angle++) {
        [path addArcWithCenter:center radius:radius startAngle:startAngle endAngle:startAngle + M_PI_2 clockwise:true];
        [path addLineToPoint:path.currentPoint];
        startAngle += M_PI_2;
    }

    return path;
}

- (UIBezierPath *)squarePathWithCenter:(CGPoint)center andSize:(CGFloat)size {
    CGFloat startX = center.x-size/2;
    CGFloat startY = center.y-size/2;
    CGFloat angle = -M_PI;

    CGFloat endX = startX+size;
    CGFloat endY = startY;

    UIBezierPath *path = [UIBezierPath bezierPath];
    CGPoint point = CGPointMake(startX, startY);
    [path moveToPoint:point];

    [path addArcWithCenter:point radius:0 startAngle:angle endAngle:angle + M_PI_2 clockwise:true];
    point = CGPointMake(endX, endY);
    [path addLineToPoint:point];

    angle += M_PI_2;
    startX = endX; startY = endY;
    endY += size;

    [path addArcWithCenter:point radius:0 startAngle:angle endAngle:angle + M_PI_2 clockwise:true];
    point = CGPointMake(endX, endY);
    [path addLineToPoint:point];

    angle += M_PI_2;
    startX = endX; startY = endY;
    endX -= size;

    [path addArcWithCenter:point radius:0 startAngle:angle endAngle:angle + M_PI_2 clockwise:true];
    point = CGPointMake(endX, endY);
    [path addLineToPoint:point];

    angle += M_PI_2;
    startX = endX; startY = endY;
    endY -= size;

    [path addArcWithCenter:point radius:0 startAngle:angle endAngle:angle + M_PI_2 clockwise:true];
    point = CGPointMake(endX, endY);
    [path addLineToPoint:point];

    return path;
}

产生：

这两个产生不同的效果，所以这取决于你的目标。

【讨论】：