Understanding CALayer anchorPoint and position property

For me understanding position and anchorPoint was easiest when I started comparing it with my understanding of frame.origin in UIView. A UIView with frame.origin = (20,30) means that the UIView is 20 points from left and 30 points from top of its parent view. This distance is calculated from which point of a UIView? Its calculated from top-left corner of a UIView.

In layer anchorPoint marks the point (in normalized form or unit-coordinates i.e. 0 to 1) from where this distance is calculated so e.g. layer.position = (20, 30) means that the layer anchorPoint is 20 points from left and 30 points from top of its parent layer. By default a layer anchorPoint is (0.5, 0.5) so the distance calculation point is right in the center of the layer. The following figure will help clarify my point:

anchorPoint also happens to be the point around which rotation will happen in case you apply a transform to the layer.

Advertisements

4 thoughts on “Understanding CALayer anchorPoint and position property

  1. charlesr1971

    This diagram seems to imply that changing the value of the anchor point changes its position. I thought that the anchor point’s only purpose was to set a view’s rotation point. I wasn’t aware that an anchor point has any affect on a view’s position, unless it is rotated. Please could you clarify this point?

    Reply
  2. charlesr1971

    To find the CGPoint of a views anchor point, it should be possible to use the following equation:

    – (CGPoint)convertAnchorPoint:(CGPoint)anchorPoint{

    CGPoint point;

    float x = view.frame.origin.x+(view.frame.size.width*anchorPoint.x);

    float y = view.frame.origin.y+(view.frame.size.height*anchorPoint.y);

    point = CGPointMake(x,y);

    return point;

    }

    Obviously for default anchor points, you can just access the ‘center’ property:

    view.center

    Or:

    CGPoint point = [self convertAnchorPoint:view.anchorPoint]; // default anchor point [0.5,0.5]

    But, lets say you need to set the anchor point to a non default value, this method could come in handy to find out the non unit co-ordinate value of the new anchor point.

    CGPoint point = [self convertAnchorPoint:view.anchorPoint]; // default anchor point [0.75,1]

    Reply
    1. charlesr1971

      UPDATE:

      My apologies.
      The method was incomplete.
      Here is a more complete implementation.

      To find the CGPoint of a views anchor point, it should be possible to use the following equation:

      – (CGPoint)convertAnchorPoint:(UIView*)view anchorPoint:(CGPoint)anchorPoint{

      CGPoint point;

      float x = view.frame.origin.x+(view.frame.size.width*anchorPoint.x);

      float y = view.frame.origin.y+(view.frame.size.height*anchorPoint.y);

      point = CGPointMake(x,y);

      return point;

      }

      Obviously for default anchor points, you can just access the ‘center’ property:

      view.center

      Or:

      CGPoint point = [self convertAnchorPoint:view anchorPoint:view.layer. anchorPoint]; // default anchor point [0.5,0.5]

      But, lets say you need to set the anchor point to a non default value, this method could come in handy to find out the non unit co-ordinate value of the new anchor point.

      view.layer.anchorPoint = CGPointMake(0.75,1);

      CGPoint point = [self convertAnchorPoint:view anchorPoint:view.layer. anchorPoint]; // default anchor point [0.75,1]

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s