136

I want to alter the anchorPoint, but keep the view in the same place. I've tried NSLog-ing self.layer.position and self.center and they both stay the same regardless of changes to the anchorPoint. Yet my view moves!

Any tips on how to do this?

self.layer.anchorPoint = CGPointMake(0.5, 0.5);
NSLog(@"center point: %f %f", self.layer.position.x, self.layer.position.y);
self.layer.anchorPoint = CGPointMake(1, 1);
NSLog(@"center point: %f %f", self.layer.position.x, self.layer.position.y);

The output is:

2009-12-27 20:43:24.161 Type[11289:207] center point: 272.500000 242.500000
2009-12-27 20:43:24.162 Type[11289:207] center point: 272.500000 242.500000
0

13 Answers 13

211

I had the same problem. Brad Larson's solution worked great even when the view is rotated. Here is his solution translated into code.

-(void)setAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view
{
    CGPoint newPoint = CGPointMake(view.bounds.size.width * anchorPoint.x, 
                                   view.bounds.size.height * anchorPoint.y);
    CGPoint oldPoint = CGPointMake(view.bounds.size.width * view.layer.anchorPoint.x, 
                                   view.bounds.size.height * view.layer.anchorPoint.y);

    newPoint = CGPointApplyAffineTransform(newPoint, view.transform);
    oldPoint = CGPointApplyAffineTransform(oldPoint, view.transform);

    CGPoint position = view.layer.position;

    position.x -= oldPoint.x;
    position.x += newPoint.x;

    position.y -= oldPoint.y;
    position.y += newPoint.y;

    view.layer.position = position;
    view.layer.anchorPoint = anchorPoint;
}

And the swift equivalent:

func setAnchorPoint(anchorPoint: CGPoint, forView view: UIView) {
    var newPoint = CGPointMake(view.bounds.size.width * anchorPoint.x, view.bounds.size.height * anchorPoint.y)
    var oldPoint = CGPointMake(view.bounds.size.width * view.layer.anchorPoint.x, view.bounds.size.height * view.layer.anchorPoint.y)

    newPoint = CGPointApplyAffineTransform(newPoint, view.transform)
    oldPoint = CGPointApplyAffineTransform(oldPoint, view.transform)

    var position = view.layer.position
    position.x -= oldPoint.x
    position.x += newPoint.x

    position.y -= oldPoint.y
    position.y += newPoint.y

    view.layer.position = position
    view.layer.anchorPoint = anchorPoint
}

SWIFT 4.x

func setAnchorPoint(anchorPoint: CGPoint, forView view: UIView) {
    var newPoint = CGPoint(x: view.bounds.size.width * anchorPoint.x,
                           y: view.bounds.size.height * anchorPoint.y)


    var oldPoint = CGPoint(x: view.bounds.size.width * view.layer.anchorPoint.x,
                           y: view.bounds.size.height * view.layer.anchorPoint.y)

    newPoint = newPoint.applying(view.transform)
    oldPoint = oldPoint.applying(view.transform)

    var position = view.layer.position
    position.x -= oldPoint.x
    position.x += newPoint.x

    position.y -= oldPoint.y
    position.y += newPoint.y

    view.layer.position = position
    view.layer.anchorPoint = anchorPoint
}
9
  • 2
    I use this code in my awakeFromNib/initWithFrame methods, but it still doesn't work, do I need to update the display? edit: setNeedsDisplay doesn't work Dec 16, 2012 at 14:52
  • 2
    Why are you using view.bounds? Shouldn't you be using layer.bounds?
    – zakdances
    Apr 11, 2013 at 10:20
  • 1
    in my case setting value to: view.layer.position does not change anything
    – AndrewK
    Jul 9, 2015 at 21:38
  • 5
    FWIW, I had to wrap the setAnchor method in a dispatch_async block for it to work. Not sure why as I'm calling it inside viewDidLoad. Is viewDidLoad no longer on the main thread queue? Sep 23, 2015 at 8:56
  • 1
    @Magnus You are a genius. This works 100% perfectly. The only thing I changed was the UIView argument for CALayer argument, and all the references thereafter. This allows your solution to work for sub layers. And I had to remove the CGPointApplyAffineTransform lines. I have up voted this and why hasn't this been accepted as the official answer? And you have provided Swift/objective c solutions. Brilliant work. Thanks... Nov 23, 2016 at 17:53
143

The Layer Geometry and Transforms section of the Core Animation Programming Guide explains the relationship between a CALayer's position and anchorPoint properties. Basically, the position of a layer is specified in terms of the location of the layer's anchorPoint. By default, a layer's anchorPoint is (0.5, 0.5), which lies at the center of the layer. When you set the position of the layer, you are then setting the location of the center of the layer in its superlayer's coordinate system.

Because the position is relative to the anchorPoint of the layer, changing that anchorPoint while maintaining the same position moves the layer. In order to prevent this movement, you would need to adjust the layer's position to account for the new anchorPoint. One way I've done this is to grab the layer's bounds, multiply the bounds' width and height by the old and new anchorPoint's normalized values, take the difference of the two anchorPoints, and apply that difference to the position of the layer.

You might even be able to account for rotation this way by using CGPointApplyAffineTransform() with your UIView's CGAffineTransform.

9
  • 4
    See the example function from Magnus to see how Brad's answer can be implemented in Objective-C. Feb 9, 2012 at 5:30
  • Thanks but I don't understand how the anchorPoint and position are related together? Feb 6, 2013 at 12:11
  • 7
    @ss1271 - As I describe above, the anchorPoint of a layer is the basis of its coordinate system. If it is set to (0.5, 0.5), then when you set the position for a layer, you are setting where its center will lie in the coordinate system of its superlayer. If you set the anchorPoint to (0.0, 0.5), setting the position will set where the center of its left edge will be. Again, Apple has some nice images in the above-linked documentation (which I've updated the reference to).
    – Brad Larson
    Feb 6, 2013 at 15:27
  • I used the method provided by Magnus. When I NSLog position and frame they look correct but my view is still moved. Any idea why? It's like the new position isn't taken into account.
    – Alexis
    Jun 19, 2014 at 13:29
  • In my case I want to add an animation on the layer using the AVVideoCompositionCoreAnimationTool class's videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer method. What happens is, half of my layer keeps getting dissapeared while I am rotating it around y - axis.
    – devdoe
    Oct 11, 2014 at 8:13
47

The key to solving this was to use the frame property, which is weirdly the only thing that changes.

Swift 2

let oldFrame = self.frame
self.layer.anchorPoint = CGPointMake(1, 1)
self.frame = oldFrame

Swift 3

let oldFrame = self.frame
self.layer.anchorPoint = CGPoint(x: 1, y: 1)
self.frame = oldFrame

Then I do my resize, where it scales from the anchorPoint. Then I have to restore the old anchorPoint;

Swift 2

let oldFrame = self.frame
self.layer.anchorPoint = CGPointMake(0.5,0.5)
self.frame = oldFrame

Swift 3

let oldFrame = self.frame
self.layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
self.frame = oldFrame

EDIT: this flakes out if the view is rotated, as the frame property is undefined if a CGAffineTransform has been applied.

2
  • 10
    Just wanted to add why this works and seems to be the easiest way: according to the docs, the frame property is a "composed" property: "The value of frame is derived from the bounds, anchorPoint and position properties." That's also why the "frame" property isn't animatable.
    – DarkDust
    Nov 24, 2010 at 9:36
  • 2
    This is honestly my preferred approach. If you aren't trying to manipulate the bounds and position independently or animate either of them, just capturing the frame before you change the anchor point is usually sufficient. No math necessary.
    – CIFilter
    Oct 6, 2016 at 19:33
28

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

enter image description here

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

1
  • 1
    Please can you tell how can I solve this anchor point jumping who's UIView is set using auto layout, means with auto layout we are not suppose to get or set frames and bounds properties.
    – S.J
    Aug 27, 2015 at 9:35
18

There is such a simple solution. This is based on Kenny's answer. But instead of applying the old frame, use it's origin and the new one to calculate the translation, then apply that translation to the center. It works with rotated view too! Here's the code, a lot simpler than other solutions:

func setAnchorPoint(anchorPoint: CGPoint, view: UIView) {
   let oldOrigin = view.frame.origin
   view.layer.anchorPoint = anchorPoint
   let newOrigin = view.frame.origin

   let translation = CGPoint(x: newOrigin.x - oldOrigin.x, y: newOrigin.y - oldOrigin.y)

   view.center = CGPoint(x: view.center.x - translation.x, y: view.center.y - translation.y)
}
3
  • 2
    Nice little method... works ok with a couple minor fixes: Line 3: capital P in anchorPoint. Line 8: TRANS.Y = NEW - OLD
    – bob
    Dec 6, 2013 at 8:26
  • 2
    still i am in confusion how can I use it. I am facing same problem right now for rotating my view with uigesturerotation. I am in strange that where should I call this method. If I am calling in gesture recognizer handler. It makes view disappear.
    – JAck
    Aug 16, 2016 at 9:30
  • 3
    This answer is so sweet I now have diabetes.
    – GeneCode
    Apr 23, 2017 at 4:37
16

For those who need it, here is Magnus's solution in Swift:

func setAnchorPoint(anchorPoint: CGPoint, view: UIView) {
    var newPoint: CGPoint = CGPointMake(view.bounds.size.width * anchorPoint.x, view.bounds.size.height * anchorPoint.y)
    var oldPoint: CGPoint = CGPointMake(view.bounds.size.width * view.layer.anchorPoint.x, view.bounds.size.height * view.layer.anchorPoint.y)

    newPoint = CGPointApplyAffineTransform(newPoint, view.transform)
    oldPoint = CGPointApplyAffineTransform(oldPoint, view.transform)

    var position: CGPoint = view.layer.position

    position.x -= oldPoint.x
    position.x += newPoint.x

    position.y -= oldPoint.y
    position.y += newPoint.y

    view.setTranslatesAutoresizingMaskIntoConstraints(true)     // Added to deal with auto layout constraints
    view.layer.anchorPoint = anchorPoint
    view.layer.position = position
}
3
  • 2
    upvote for view.setTranslatesAutoresizingMaskIntoConstraints(true). thanks man Mar 22, 2018 at 3:09
  • 2
    view.setTranslatesAutoresizingMaskIntoConstraints(true) is necessary when use auto layout constraints.
    – SamirChen
    Jun 8, 2018 at 9:56
  • 2
    Thank you so much for this! The translatesAutoresizingMaskIntoConstraints is just what I was missing, could've learned by now
    – zbx
    Aug 22, 2018 at 7:43
6

Here is user945711's answer adjusted for NSView on OS X. Besides NSView not having a .center property, the NSView's frame doesn't change (probably because NSViews do not come with a CALayer by default) but the CALayer frame origin changes when the anchorPoint is changed.

func setAnchorPoint(anchorPoint: NSPoint, view: NSView) {
    guard let layer = view.layer else { return }

    let oldOrigin = layer.frame.origin
    layer.anchorPoint = anchorPoint
    let newOrigin = layer.frame.origin

    let transition = NSMakePoint(newOrigin.x - oldOrigin.x, newOrigin.y - oldOrigin.y)
    layer.frame.origin = NSMakePoint(layer.frame.origin.x - transition.x, layer.frame.origin.y - transition.y)
}
4

If you change anchorPoint, its position will change too, UNLESS you origin is zero point CGPointZero.

position.x == origin.x + anchorPoint.x;
position.y == origin.y + anchorPoint.y;
1
  • 1
    You can't compare position and anchorPoint, anchorPoint scales between 0 to 1.0 Jun 26, 2016 at 22:07
4

Edit and See UIView's Anchor Point Right on Storyboard (Swift 3)

This is an alternate solution which allows you to change the anchor point through the Attributes Inspector and has another property to view the anchor point for confirmation.

Create new file to include in your project

import UIKit

@IBDesignable
class UIViewAnchorPoint: UIView {

    @IBInspectable var showAnchorPoint: Bool = false
    @IBInspectable var anchorPoint: CGPoint = CGPoint(x: 0.5, y: 0.5) {
        didSet {
            setAnchorPoint(anchorPoint: anchorPoint)
        }
    }

    override func draw(_ rect: CGRect) {
        if showAnchorPoint {
            let anchorPointlayer = CALayer()
            anchorPointlayer.backgroundColor = UIColor.red.cgColor
            anchorPointlayer.bounds = CGRect(x: 0, y: 0, width: 6, height: 6)
            anchorPointlayer.cornerRadius = 3

            let anchor = layer.anchorPoint
            let size = layer.bounds.size

            anchorPointlayer.position = CGPoint(x: anchor.x * size.width, y: anchor.y * size.height)
            layer.addSublayer(anchorPointlayer)
        }
    }

    func setAnchorPoint(anchorPoint: CGPoint) {
        var newPoint = CGPoint(x: bounds.size.width * anchorPoint.x, y: bounds.size.height * anchorPoint.y)
        var oldPoint = CGPoint(x: bounds.size.width * layer.anchorPoint.x, y: bounds.size.height * layer.anchorPoint.y)

        newPoint = newPoint.applying(transform)
        oldPoint = oldPoint.applying(transform)

        var position = layer.position
        position.x -= oldPoint.x
        position.x += newPoint.x

        position.y -= oldPoint.y
        position.y += newPoint.y

        layer.position = position
        layer.anchorPoint = anchorPoint
    }
}

Add View to Storyboard and set the Custom Class

Custom Class

Now set the New Anchor Point for the UIView

Demonstration

Turning on the Show Anchor Point will show a red dot so you can better see where the anchor point will be visually. You can always turn it off later.

This really helped me when planning transforms on UIViews.

1
  • No one dot on UIView, i used Objective-C with Swift, attached UIView custom class from your code and switched on Show anch...but no one dot
    – Genevios
    Apr 20, 2018 at 7:31
1

For Swift 3:

func setAnchorPoint(_ anchorPoint: CGPoint, forView view: UIView) {
    var newPoint = CGPoint(x: view.bounds.size.width * anchorPoint.x, y: view.bounds.size.height * anchorPoint.y)
    var oldPoint = CGPoint(x: view.bounds.size.width * view.layer.anchorPoint.x, y: view.bounds.size.height * view.layer.anchorPoint.y)

    newPoint = newPoint.applying(view.transform)
    oldPoint = oldPoint.applying(view.transform)

    var position = view.layer.position
    position.x -= oldPoint.x
    position.x += newPoint.x

    position.y -= oldPoint.y
    position.y += newPoint.y

    view.layer.position = position
    view.layer.anchorPoint = anchorPoint
}
1
  • 1
    Thank you for this :) I just pasted it into my project as a static func and works like a charm :D
    – Kjell
    Dec 12, 2016 at 18:12
0

Expanding on Magnus' great & thorough answer, I have created a version that works on sub layers:

-(void)setAnchorPoint:(CGPoint)anchorPoint forLayer:(CALayer *)layer
{
    CGPoint newPoint = CGPointMake(layer.bounds.size.width * anchorPoint.x, layer.bounds.size.height * anchorPoint.y);
    CGPoint oldPoint = CGPointMake(layer.bounds.size.width * layer.anchorPoint.x, layer.bounds.size.height * layer.anchorPoint.y);
    CGPoint position = layer.position;
    position.x -= oldPoint.x;
    position.x += newPoint.x;
    position.y -= oldPoint.y;
    position.y += newPoint.y;
    layer.position = position;
    layer.anchorPoint = anchorPoint;
}
0

Let a be the center of the layer in terms of anchorPoint coords (0.5, 0.5). Think unit coordinates/or uv coords if you are familiar with Metal/Vulkan/OpenGL/DirectX. Let n be the new anchor position (x, y). Let d be the dimensions of the bounds of the layer, (width, height).

Then to move back the layer to its original position after a layer anchorPoint position change, compute the offset vector from a to n multiplied by d: v = d(n-a). So then, to get your layer back to it's original position, add offset vector to the layer.position: layer.position += v

Swift/iOS

let vx = (layer.anchorPoint.x - 0.5) * layer.bounds.width
let vy = (layer.anchorPoint.y - 0.5) * layer.bounds.height
layer.position.x += vx
layer.position.y += vy

Your view.center moves when the layer.position changes(and vice versa) if the layer is the view's backing layer. If it was a sublayer.position, then that would not move view.center. So if in the above code, the layer was the view's backing layer, I could have offset view.center instead of layer.position, both would have worked.

0

iOS CALayer anchorPoint and position

[iOS CALayer]

CALayer.anchorPoint is a source for UIView.anchorPoint uses Unit coordinate spaceAnout to specify internal point which will be used in geometric manipulations(like transsformations)

CALayer.position is a source for UIView.center uses Point-based coordinate systems to reflect a CALayer.anchorPoint in superview's coordinate systems

Simple rules:

  • when you change CALayer.anchorPoint, and based on CALayer.position(and additional parameters like CALayer.bounds, transforms...) content will be redrawn
  • when you change CALayer.position content will be moved to a new point

Example:

  • step 1. We have a UIView frame: CGRect(origin: CGPoint(x: 50, y: 60), size: CGSize(width: 200, height: 300)) and anchorPoint = CGPoint(x: 0.5, y: 0.5)// by default
  • step 2. Let's change anchorPoint = CGPoint(x: 0, y: 0)

sorce code:

//step 1
let viewA = UIView(
    frame: CGRect(
        origin: CGPoint(x: 50, y: 60),
        size: CGSize(width: 200, height: 300)
    )
)
viewA.anchorPoint = CGPoint(x: 0.5, y: 0.5) //by default

viewA.translatesAutoresizingMaskIntoConstraints = false
viewA.backgroundColor = .gray
self.view.addSubview(viewA)

//step 2
viewA.anchorPoint = CGPoint(x: 0, y: 0)

Based on this information and answering for the question - you should recalculate CALayer.position after changing CALayer.anchorPoint.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.