码迷,mamicode.com
首页 > 移动开发 > 详细

ios中关于对锚点的理解

时间:2014-08-18 23:38:43      阅读:308      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   os   io   ar   

锚点在ios中见到的地方不多,大部分用在动画中。

今天看到一个动画,上面都是关于锚点的,锚点这个概念在两年前看cocos2d得基本概念时接触过,当时没怎么看,今天看到了,就在好好的学一下。

看了一篇blog,是关于锚点的,就借鉴一些上面的图像:

cocos2d里采用OpenGL ES坐标系,坐标原点在屏幕左下角。而ios采用的是Quartz 2D坐标系,坐标原点在屏幕左上角。

在cocos2d和ios中分别把视图的坐标点设为(10,10),结果如下:

bubuko.com,布布扣

那么什么是锚点呢?下面以一个例子来说明:
比如要创建以下两个视图,蓝色视图左上角在坐标(5,4)处,而橙色视图右边和蓝色视图对齐,有一半的高度处于蓝色视图外面。

bubuko.com,布布扣

按照ios标准的创建视图的写法可以这样写代码:

  1. UIView *blueView = [[UIView alloc] initWithFrame:CGRectMake(5, 4, W, H)];
  2. blueView.backgroundColor = [UIColor blueColor];
  3. [self.view addSubview:blueView];
  4.  
  5. UIView *orangeView = [[UIView alloc] initWithFrame:CGRectMake(W-w, H-h/2, w, h)];
  6. orangeView.backgroundColor = [UIColor orangeColor];
  7. [blueView addSubview:orangeView];

可以看到创建视图时就要计算视图左上角的坐标,非常麻烦。而使用了锚点的代码可以这样写:

  1. UIView *blueView = [[UIView alloc] initWithSize:CGSizeMake(W, H)];
  2. [blueView setPosition:CGPointMake(5, 4) atAnchorPoint:CGPointMake(0, 0)];
  3. blueView.backgroundColor = [UIColor blueColor];
  4. [self.view addSubview:blueView];
  5.  
  6. UIView *orangeView = [[UIView alloc] initWithSize:CGSizeMake(w, h)];
  7. [orangeView setPosition:CGPointMake(W, H) atAnchorPoint:CGPointMake(1, 0.5)];
  8. orangeView.backgroundColor = [UIColor orangeColor];
  9. [blueView addSubview:orangeView];
可见,使用锚点省去了苦逼的计算过程。当然了,锚点也是针对子视图去设计的,锚点掌握好了,我们就不用再去计算x,y坐标了。

就拿上面这个例子分析一下吧:

把俯视图蓝色view的左边点(W,H)作为自身的锚点(1,0.5)【注意:锚点是在自身上找,这个点一一映射的有一个父view的坐标,可以通过这两个值来计算子视图的view.frame.origin】.

好好理解上句话,锚点的坐标范围如下:

bubuko.com,布布扣

这是在Quartz 2D坐标系中得锚点。

下面看一下代码中把父视图的点作为自身锚点的方法。

- (void)setPosition:(CGPoint)point atAnchorPoint:(CGPoint)anchorPoint
{
    CGFloat x = point.x - anchorPoint.x * self.width;
    CGFloat y = point.y - anchorPoint.y * self.height;
    [self setOrigin:CGPointMake(x, y)];
}


ios中关于对锚点的理解,布布扣,bubuko.com

ios中关于对锚点的理解

标签:style   blog   http   color   使用   os   io   ar   

原文地址:http://blog.csdn.net/jijunyuan/article/details/38668267

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!