Paul Paul - 2 months ago 11
Objective-C Question

UIBezierPath: more control points created on iPad than iPhone?

I have the following code (based on this answer) to create a 'morphable' circle <> square shape.

It's working great on iPhone:

enter image description here

But not so well on iPad (running same version of iOS - 10):

enter image description here

Code is:

-(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;
}


Animation code is:

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"];


On closer inspection of the path, I noticed there are more 'curveto' points on the iPad version (running the same code). From the discussion in the previous issue, I think the number of control points needs to be the same in order to get a smooth transition.

Is the different number of points expected between devices? Is there a more reliable way to achieve a morphable shape?

iPad debug of circle:

<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 version:

<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>


Square on both:

<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>

Rob Rob
Answer

If transforming between two paths, it's important that they have the same number of segments.

There are two basic approaches:

  1. One approach is to create the circle as a number of line segments, and then compose the square of the same number of segments. You just have to use a sufficiently large number of segments such that the circle appears round:

    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;
    }
    

    option 1

  2. Alternatively, you can use arcs, but you might want to make sure that the line segments and arcs match up, one-for-one, in the two paths. For example, I can render the square as a series of zero radius arcs with line segments between them, and render the circle as a series of full-size arcs, with zero length line segments between them. That way, there's a one-for-one correspondence to every call to moveToPoint, addArcWithCenter and 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;
    }
    

    That yields:

    option 2

These two produce different effects, so it just depends upon what you're going for.