js333 > 计算机互联网 > 仿射变换,ios变换示例金沙js333娱乐场

原标题:仿射变换,ios变换示例金沙js333娱乐场

浏览次数:152 时间:2019-11-22

iOS开发之仿射变换示例总结,ios变换示例

本篇博客比较简单,但还是比较实用的。其中的示例依然使用Swift3.0来实现,该博客算是下篇博客的一个引子,因为我们下篇博客要介绍使用Swift开发iOS应用中常用的一些Extension。而在这些Extension中的Image Extension中会用到仿射变换的东西来对图片进行处理。所以本篇博客就先将fang放射变换(CGAffineTransform)的东西拎出来单独的过一下,这样在下篇博客中就可以减少对仿射变换的介绍了。

在之前的博客中,我们聊过仿射变换的东西,不过是使用的放射变换来实现的动画,关于该部分内容请移步于《iOS开发之各种动画各种页面切面效果》。之前的博客主要讲述了CATransition,而本篇博客主要聊的内容是CGAffineTransform。当然本篇博客的内容依然是依托于相关的示例,该示例对应的源代码会在github上进行分享,博文结尾处为github源码分享链接。虽然今天博客中的代码以及示例都比较简单,但是还是有必要单独拎出来介绍一下的。

 

金沙js333娱乐场,一、平移

接下来我们来看一下CGAffineTransform的平移,在使用CGAffineTransform进行平移的时候,我们要注意坐标系的转换。下方是我们在做UI布局时的坐标系,也就是iOS屏幕的坐标系。左上角是原点,x轴右为正,左为负,y轴上为负,下为正。下方就是iPhone的屏幕坐标系。平移时也是采用下方的坐标系结构。

金沙js333娱乐场 1 

下方就是对ImageView的平移的效果。分别使用两个Slider来控制左右移动和上下移动。具体运行效果如下所示。

  金沙js333娱乐场 2

控制平移的代码也是比较简单的,如下所示。x参数为正时则向右移动,x为负数时,向左移动。而参数y为正时,向下移动,y为负值时向上运动。具体代码如下所示:

   金沙js333娱乐场 3

 

二、缩放

聊完平移,接下来我我们来看一下仿射变换的缩放。使用CGAffineTransform进行View的缩放也是比较简单的,下方就是对ImageView进行缩放的运行效果。在缩放的过程中分为x方向上的缩放和y方向的缩放。x和y分别表示在x轴和y轴上缩放的倍数,如果x或者y为负数的话,那么将相应的视图翻转后在进行缩放,运行效果如下所示。

  金沙js333娱乐场 4

实现上述效果也是比较简单的,代码就下方一行,如下所示,x就表示x轴上的缩放量,y就表示y轴上的缩放量。

  金沙js333娱乐场 5

 

 

三、旋转

接下来就来聊聊CGAffineTransform的旋转,直奔主题,下方就是旋转的运行结果。旋转是是按照弧度进行旋转的,一圈是0-2∏,如果弧度为正,则是顺时针旋转,如果弧度为负,则是逆时针旋转。具体运行结果如下所示:

  金沙js333娱乐场 6

实现上述效果的代码也是比较简单的,具体代码如下所示:

  金沙js333娱乐场 7

 

本篇博客的内容就介绍完了,下方是本篇博客所涉及Demo的github源码分享链接。

github分享链接:

 

本篇博客比较简单,但还是比较实用的。其中的示例依然使用Swift3.0来实现,该博客算是下篇博客...

通过变换矩阵左乘向量,将空间中的一个点集从一个坐标系变换到另一个坐标系中,计算方式如下
<center>

//
CGSizeApplyAffineTransform(CGSize size, CGAffineTransform t)
// 使用
CGSize size = CGSizeMake(33, 44);
CGSize sizeNew = CGSizeApplyAffineTransform(size, CGAffineTransformMakeScale(2, 2));

2、CGAffineTransformEqualToTransform可以判断两种transform是否是一样的


三、CGAffineTransform原理

加载

// 格式       angle为弧度
CGAffineTransformMakeRotation(CGFloat angle)
// 使用       
self.imageView.transform = CGAffineTransformMakeRotation(M_PI);
  • 结合手势使用

// transform 可以是移动、放大、旋转
CGPoint CGPointApplyAffineTransform(CGPoint point,
  CGAffineTransform t)
// 使用
CGPoint point =  CGPointMake(123, 222);
CGPoint pointNew =  CGPointApplyAffineTransform(point, CGAffineTransformMakeTranslation(77, 28));

2、CGAffineTransformTranslate在已有的transform基础上,增加 移动 效果

3、CGRectApplyAffineTransform转换rect,使用一种transform来得到转换后的rect

2、CGSizeApplyAffineTransform转换size,使用一种transform来得到转换后的size

// 使用
self.imageView.transform = CGAffineTransformIdentity;

CGAffineTransform可以使控件的产生移动、缩放、旋转效果,其坐标系统采用的是二维坐标系,坐标原点为屏幕的左上角,向右为x轴正方向,向下为y轴正方向。

  • 移动控件
bool CGAffineTransformIsIdentity(CGAffineTransform t)

1、CGAffineTransformMakeScale实现以初始位置为基准,在x轴方向上缩放x倍,在y轴方向上缩放y倍

一、CGAffineTransform介绍

CGAffineTransform transform = CGAffineTransformMakeScale(3, 3);  
//相反  缩小至1/3                
transform = CGAffineTransformInvert(transform);
self.imageView.transform = transform;
  • 缩放控件
[UIView animateWithDuration:1.0 animations:^{
    //缩放
    CGAffineTransform transform = CGAffineTransformMakeScale(2, 2);           
    ws.imageView.transform = transform;
} completion:^(BOOL finished) {
    [UIView animateWithDuration:1.0 animations:^{
        //回到最初
        ws.imageView.transform =  CGAffineTransformIdentity;              
    } completion:nil]; 
}];

CGAffineTransform形变是通过"仿射变换矩阵"来控制的,其中平移是矩阵相加,旋转与缩放则是矩阵相乘,CGAffineTransform形变就是把二维形变使用一个三维矩阵来表示,系统提供了CGAffineTransformMake结构体来控制形变。



  • 移动:[ 1 0 0 1 tx ty ]
// 格式
CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)
// 使用       将图片左(100px)下(150px)方向移动
CGAffineTransform transform = CGAffineTransformMakeTranslation(-100, 150);
self.imageView.transform = transform;

1、CGAffineTransformMakeRotation实现以初始位置为基准,将坐标系统旋转angle弧度(弧度=π/180×角度,M_PI弧度代表180角度)

2、CGAffineTransformScale在已有的transform基础上,增加 缩放 效果

CGAffineTransformMakeScale(2, 0.5);
CGAffineTransformMake(2, 0, 0, 0.5, 0, 0);
  • 最初transform
    控件的transform属性默认值为CGAffineTransformIdentity,可以在形变之后设置该值以还原到最初状态

二、方法介绍

所以以下写法都是等同的

bool CGAffineTransformEqualToTransform(CGAffineTransform t1, CGAffineTransform t2) 

1、CGAffineTransformIsIdentity可以判断view.transform当前状态是否是最初状态

// 格式  
CGAffineTransformRotate(CGAffineTransform t,
  CGFloat angle)
// 使用       
self.imageView.transform = CGAffineTransformRotate(self.imageView.transform,
  M_PI/2.0);
//定义两种ransform
CGAffineTransform transform_A = CGAffineTransformMakeTranslation(0, 200);
CGAffineTransform transform_B = CGAffineTransformMakeScale(0.2, 0.2);
transform = CGAffineTransformConcat(transform_B, transform_A);

计算


2、手势


//点击手势
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction:)];
tap.numberOfTapsRequired = 2;
[self.testView addGestureRecognizer:tap];
//拖拽手势
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panAction:)];
[self.testView addGestureRecognizer:pan];

#pragma mark - 点击手势
-(void)tapAction:(UITapGestureRecognizer *)tap{
    if (CGAffineTransformIsIdentity(self.testView.transform)) {
        [UIView animateWithDuration:0.5 animations:^{
            self.testView.transform = CGAffineTransformScale(self.testView.transform, 1.3, 2);
        }];
    }
    else{
        [UIView animateWithDuration:0.5 animations:^{
            self.testView.transform = CGAffineTransformIdentity;
        }];
    }
}
#pragma mark - 拖拽手势
-(void)panAction:(UIPanGestureRecognizer *)pan{
    //获取手势位置
    CGPoint position = [pan translationInView:self.testView];
    //通过 CGAffineTransformTranslate 获取 新的transform
    self.testView.transform = CGAffineTransformTranslate(self.testView.transform, position.x, position.y);
    //将增加置为 0
    [pan setTranslation:CGPointZero inView:self.testView];
}
  • 旋转控件

3、加载

// 格式  
CGAffineTransformTranslate(CGAffineTransform t,
  CGFloat tx, CGFloat ty)
// 使用
self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, -50, 150); 

计算结果

CGAffineTransformIdentity;
CGAffineTransformMake(1, 0, 0, 1, 0, 0);

2、iOS学习必须了解的七大手势

1、iOS形变之CGAffineTransform

UIView动画

四、应用


变换矩阵

该三维变换矩阵如下:
<center>

手势



1、UIView动画

  • 结合UIView动画使用

下面以使用一个UIImageView图片为例,结合UIView动画、手势进行演示

  • 最初:[ 1 0 0 1 0 0 ]
CGAffineTransformMakeRotation(M_PI*0.5);
CGAffineTransformMake(cos(M_PI * 0.5), sin(M_PI * 0.5), -sin(M_PI * 0.5), cos(M_PI * 0.5), 0, 0);

变换矩阵

  • 结合变换效果
    CGAffineTransformConcat结合两种变换

五、Demo地址
<center>

1、CGAffineTransformMakeTranslation实现以初始位置为基准,在x轴方向上平移x单位,在y轴方向上平移y单位

2、CGAffineTransformRotate在已有的transform基础上,增加 旋转 效果

  • 缩放:[ sx 0 0 sy 0 0 ]

矩阵相乘
<center>

// 格式  
CGAffineTransformScale(CGAffineTransform t,
  CGFloat sx, CGFloat sy)
// 使用       宽度缩小一倍,高度拉伸1.5倍
self.imageView.transform = CGAffineTransformScale(self.imageView.transform, 0.5 1.5); 
  • 反转变换效果
    CGAffineTransformInvert可以实现于transform相反的效果,比如放大3倍效果则缩小为1/3,向x轴正方向平移100px效果则为向负方向平移100px

  • 判断变换
  • 旋转:[ cos(angle) sin(angle) -sin(angle) cos(angle) 0 0 ]
@property(strong,nonatomic)UIImageView *imageView;
- (void)viewDidLoad
{
    [super viewDidLoad];
    [self.view addSubview:self.imageView];
}

-(UIImageView *)imageView{
    if (_imageView==nil) {
        _imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"aa"]];
        _imageView.frame = CGRectMake(0, 0, 100, 80);
    }
    return _imageView;
}

由此可知,
tx:用来控制在x轴方向上的平移
ty:用来控制在y轴方向上的平移
a:用来控制在x轴方向上的缩放
d:用来控制在y轴方向上的缩放
abcd:共同控制旋转


六、参考地址

  • 使用仿射变换转换point,size,rect
// 格式       tx,ty表示的是倍数
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
// 使用       将图片放大2倍
self.imageView.transform = CGAffineTransformMakeScale(2, 2);
CGAffineTransformMake(CGFloat a, CGFloat b, CGFloat c, CGFloat d, CGFloat tx, CGFloat ty)

1、CGPointApplyAffineTransform转换point,使用一种transform来得到转换后的point

//
CGRectApplyAffineTransform(CGRect rect, CGAffineTransform t)
// 使用
CGRect rect = CGRectMake(20, 30, 50, 100);
CGRect rectNew = CGRectApplyAffineTransform(rect, CGAffineTransformMakeRotation(M_PI));

这里写图片描述

CGAffineTransformMakeTranslation(100, 100);
CGAffineTransformMake(1, 0, 0, 1, 100, 100);

本文由js333发布于计算机互联网,转载请注明出处:仿射变换,ios变换示例金沙js333娱乐场

关键词:

上一篇:iOS开源项目周报0323

下一篇:jquery如何动态加载js文件,javascript如何动态加载