transform初学习

时间:2022-02-03 23:04:44

1.什么是transform?

transform主要用于形变,位移和旋转,可用于动画。

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px Helvetica; color: #454545 }

CGAffineTransformMakeTranslation

2.transform常用的几种方法。

(1)CGAffineTransformMakeTranslation(a,b)

图片x坐标平移a的距离,y坐标平移b的距离。

(2)CGAffineTransformMakeScale(a,b)

图片水平方向放大x倍,竖直方向放大y倍

(3)CGAffineTransformMakeRotation(a)

图片按照锚点顺时针旋转a的角度。

以上三个方法都是在自身的transform上做一次相应的操作,比如我要旋转90°,调用一次方法三可以实现,但想要再一次旋转,旋转到180°,再调用一次方法三则不能实现,只能重新去更改方法三的旋转角度a的值。

(4)CGAffineTransformTranslation(view.transform,a,b)

(5)CGAffineTransformScale(view.transform,a,b)

(6)CGAffineTransformRotation(view.transform,a)

以上三个方法是在view.transform上调用,可多次调用,例如

_flowerImg.transform=CGAffineTransformRotate(_flowerImg.transform, M_PI/2)

这个多次调用便实现了图片90°,180°,270°的旋转。

3.自定义的平移变换

CGAffineTransformMake(a,b,c,d,tx,ty)

transform是一个结构体,其变量对应一个3*3的矩阵

transform初学习

如何通过这个齐次矩阵来变换坐标呢?

layer在屏幕中的坐标为(x,y),将其看成一个3*1的矩阵(x,y,1),

则变换后的坐标为:

(x' y' 1)= (x y 1) *  transform初学习

则根据上面的矩阵相乘得出:

x'=ax+cy+tx ;

y'=bx+dy+ty ;

(x',y')即为变换后的坐标。

看不懂为什么要用矩阵改变位移的可以参考下面的链接:

为什么要引入齐次坐标来表示平移?

4.改变transform的值后,恢复到原来的形状

CGAffineTransformIdentity

将你想要恢复的layer.transform设置为上面的值,即可恢复没有形变之前的状态。

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #00b1ff }
span.s1 { }

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #4bd157 }
span.s1 { }

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 16.0px "Helvetica Neue"; color: #2f2f2f }
span.s1 { font: 12.0px Menlo; color: #657b83; background-color: #fdf6e3 }
span.s2 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #ffffff }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #ffffff }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px Helvetica; color: #454545 }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px Helvetica; color: #454545 }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px Helvetica; color: #454545 }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px Helvetica; color: #454545 }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #ffffff }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #232323 }
span.s1 { }