CoreGraphics 之CGAffineTransform仿射变换(3)

Stella981
• 阅读 913

 CoreGraphics 的 仿射变换 可以用于 平移、旋转、缩放变换路径 或者图形上下文。

   (1)平移变换将路径或图形上下文中的形状的当前位置平移到另一个相对位置。举例来说,如果你在(10,20)的位置处画一个点,对它应用(30,40)的平移变换,然后绘制它,这个点将被绘制在(40,60)的位置处。为了创建一个平移变换,使用CGAffineTransformMakeTranslation函数,它将返回一个CGAffineTransform类型的仿射变换,这个函数的两个参数指定x和y方向上以点为单位的平移量。我们还可以使用CGContextTranslateCTM过程对图形上下文应用变换。

 平移变换路径

//平移变换

-(void)drawRect:(CGRect)rect
{
    CGMutablePathRef path = CGPathCreateMutable();
    CGRect rectangle = CGRectMake(10.0f, 10.0f, 200.0f, 200.0f);
    
    CGAffineTransform transform = CGAffineTransformMakeTranslation(100.0f, 0.0f);


    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    CGPathAddRect(path, &transform, rectangle);
    CGContextAddPath(currentContext, path);
    [[UIColor brownColor] setStroke];
    [[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];
    CGContextSetLineWidth(currentContext, 5.0f);
    CGContextDrawPath(currentContext, kCGPathFillStroke);
    CGPathRelease(path);
}

平移变换图形上下文

-(void)drawRect:(CGRect)rect
{
    CGMutablePathRef path = CGPathCreateMutable();
    CGRect rectangle = CGRectMake(10.0f, 10.0f, 200.0f, 300.0f);
    CGPathAddRect(path, NULL, rectangle);
    
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    CGContextSaveGState(currentContext);
    
    CGContextTranslateCTM(currentContext, 100.0f, 40.0f);

    CGContextAddPath(currentContext, path);
    [[UIColor colorWithRed:0.20f green:0.6f blue:0.8f alpha:1.0f] setFill];
    [[UIColor brownColor] setStroke];
    
    CGContextSetLineWidth(currentContext, 5.0f);
    CGContextDrawPath(currentContext, kCGPathFillStroke);
    
    CGPathRelease(path);
    
    CGContextRestoreGState(currentContext);
    
    
    
}

    (2)缩放是另外一个你可以使用的变换。你可以很容易地让CoreGraphics 对形状进行缩放,例如一个圆形缩放到原来的100倍。要创建一个仿射缩放变换,使用CGAffineTransformMakeScale函数,它返回一个CGAffineTransform 类型的变换对象。如果你想直接对一个图形上下文使用缩放变换,使用CGContextScaleCTM过程来缩放当前变换矩阵。

 缩放路径

-(void)drawRect:(CGRect)rect
{
    CGMutablePathRef path = CGPathCreateMutable();
    CGRect rectangle = CGRectMake(10.0f, 10.0f, 200.0f, 200.0f);
    

    CGAffineTransform transform = CGAffineTransformMakeScale(0.5f, 0.5f);

    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    CGPathAddRect(path, &transform, rectangle);
    CGContextAddPath(currentContext, path);
    [[UIColor brownColor] setStroke];
    [[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];
    CGContextSetLineWidth(currentContext, 5.0f);
    CGContextDrawPath(currentContext, kCGPathFillStroke);
    CGPathRelease(path);
}

  缩放图形上下文

-(void)drawRect:(CGRect)rect
{
    CGMutablePathRef path = CGPathCreateMutable();
    CGRect rectangle = CGRectMake(10.0f, 10.0f, 200.0f, 300.0f);
    CGPathAddRect(path, NULL, rectangle);
    
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    CGContextSaveGState(currentContext);
    

    CGContextScaleCTM(currentContext, 0.5f, 0.5f);

    CGContextAddPath(currentContext, path);
    [[UIColor colorWithRed:0.20f green:0.6f blue:0.8f alpha:1.0f] setFill];
    [[UIColor brownColor] setStroke];
    
    CGContextSetLineWidth(currentContext, 5.0f);
    CGContextDrawPath(currentContext, kCGPathFillStroke);
    
    CGPathRelease(path);
    
    CGContextRestoreGState(currentContext);
    
    
    
}

  (3)就像缩放和平移,你可以对绘制在路径上的形状和图形上下文应用旋转变换。你可以使用CGAffineTransformMakeRoation函数和一个旋转的弧度值来获取一个CGAffineTransform类型的变换.如果你想对整个图形上下文旋转指定角度,可以使用CGContextRotateCTM过程。

  旋转路径

-(void)drawRect:(CGRect)rect
{
    CGMutablePathRef path = CGPathCreateMutable();
    CGRect rectangle = CGRectMake(10.0f, 10.0f, 200.0f, 200.0f);
    
    CGAffineTransform transform = CGAffineTransformMakeRotation((45.0f * M_PI) / 180.0f);
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    CGPathAddRect(path, &transform, rectangle);
    CGContextAddPath(currentContext, path);
    [[UIColor brownColor] setStroke];
    [[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];
    CGContextSetLineWidth(currentContext, 5.0f);
    CGContextDrawPath(currentContext, kCGPathFillStroke);
    CGPathRelease(path);
}

  旋转图形上下文

-(void)drawRect:(CGRect)rect
{
    CGMutablePathRef path = CGPathCreateMutable();
    CGRect rectangle = CGRectMake(10.0f, 10.0f, 200.0f, 300.0f);
    CGPathAddRect(path, NULL, rectangle);
    
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    CGContextSaveGState(currentContext);
    CGContextRotateCTM(currentContext, (45.0f * M_PI) / 180.0f);
    CGContextAddPath(currentContext, path);
    [[UIColor colorWithRed:0.20f green:0.6f blue:0.8f alpha:1.0f] setFill];
    [[UIColor brownColor] setStroke];
    
    CGContextSetLineWidth(currentContext, 5.0f);
    CGContextDrawPath(currentContext, kCGPathFillStroke);
    
    CGPathRelease(path);
    
    CGContextRestoreGState(currentContext);
    
    
    
}

   另外我们还可以组合变换效果,使用 CGAffineTransformConcact函数组合两个变换效果,这个函数的两个参数都是类型为CGAffineTransform类型的变换。

组合多个变换效果,同时进行平移和缩放

-(void)drawRect:(CGRect)rect
{
    CGMutablePathRef path = CGPathCreateMutable();
    CGRect rectangle = CGRectMake(10.0f, 10.0f, 200.0f, 200.0f);
    
    CGAffineTransform transform1 = CGAffineTransformMakeTranslation(100.0f, 0.0f);
    CGAffineTransform transform2 = CGAffineTransformMakeScale(0.5f, 0.5f);
    CGAffineTransform transform = CGAffineTransformConcat(transform1, transform2);
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    CGPathAddRect(path, &transform, rectangle);
    CGContextAddPath(currentContext, path);
    [[UIColor brownColor] setStroke];
    [[UIColor colorWithRed:0.20f green:0.60f blue:0.80f alpha:1.0f] setFill];
    CGContextSetLineWidth(currentContext, 5.0f);
    CGContextDrawPath(currentContext, kCGPathFillStroke);
    CGPathRelease(path);
}
点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
OpenCV实现仿射变换
什么是仿射变换?¶(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.opencv.org.cn%2Fopencvdoc%2F2.3.2%2Fhtml%2Fdoc%2Ftutorials%2Fimgproc%2Fimgtrans%2Fwarp_affine%2Fwarp_af
Stella981 Stella981
3年前
HTML5中canvas知识点详解4
一.变换的三种方式1.平移:translate(25,25);2.扩大缩小:scale(0.9,0.9);//注意:在一个循环的操作中,倍数是可以累加的,还有border也是可以放大缩小的。3.旋转:rotate(Math.PI/10);二.实例操作<!DOCTYPEhtmlPUBLIC"/
Wesley13 Wesley13
3年前
10、图像的几何变换——平移、镜像、缩放、旋转、仿射变换
1.几何变换的基本概念  图像几何变换又称为图像空间变换,它将一副图像中的坐标位置映射到另一幅图像中的新坐标位置。我们学习几何变换就是确定这种空间映射关系,以及映射过程中的变化参数。图像的几何变换改变了像素的空间位置,建立一种原图像像素与变换后图像像素之间的映射关系,通过这种映射关系能够实现下面两种计算:1.原图像任意像素
Wesley13 Wesley13
3年前
D3D12学习笔记3.3——仿射变换
·仿射变换是由一个线性变换与一个平移变换组合而成。对于向量来说平移操作是没有意义的,而平移变换只能应用于点。·齐次坐标表示,是将原先的三元组扩展成四元组,第四个坐标w的取值将根据被描述对象是点还是向量而定。具体如下:w0是向量,w1是点。·说完两个基本概念后,我们来说说仿射变换的具体公式:!a(u)\iota(u)b
Wesley13 Wesley13
3年前
GAMES101 作业0 图形学
简介作业用来校验自己做的是否正确。请不用copy,因为这是cheatyouself。题目给定一个点P(2,1),将该点绕原点先逆时针旋转45◦,再平移(1,2),计算出变换后点的坐标(要求用齐次坐标进行计算)。codeinclude<cmathinclude<eigen3/Eig
Wesley13 Wesley13
3年前
View绘制系列(10)
Canvas基础变换前面学习了Canvas相关的一些绘制方法,不知道大家发现没?我们都是根据左上角(0,0)点算出来新的坐标,然后再绘制,这样明显不符合我们平常基于坐标原点绘制的习惯,那么我们能不能直接在原点绘制图形,然后通过操作Canvas来实现移动到目标位置呢?答案是肯定的,这就需要用到Canvas变换方法了。Canvas变
Stella981 Stella981
3年前
OpenCV仿射变换+投射变换+单应性矩阵
OpenCV仿射变换投射变换单应性矩阵(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fwqj1212%2Fp%2F3915859.html)
Wesley13 Wesley13
3年前
View动画和Drawable动画
View动画你可以使用view动画系统执行Views的补间动画。补间动画通过诸如起始点,终止点,大小,旋转,和一个动画其他通用的aspects等信息来计算动画。一个补间动画可以在一个View对象的内容上执行一系列简单的变换(位置,大小,旋转,透明度)。因此,如果你有一个TextView(https://www.oschina.net
Stella981 Stella981
3年前
OpenCV代码实践之图像的旋转,平移,仿射变换和透视变换操作
读取原始图像!(https://oscimg.oschina.net/oscnet/df3ce99629454e4b959909cc35581cdc.png)!(https://oscimg.oschina.net/oscnet/4ae3777012694886b1a11597ada0447f.png)
Stella981 Stella981
3年前
OpenCV实现仿射变换
什么是仿射变换?¶(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.opencv.org.cn%2Fopencvdoc%2F2.3.2%2Fhtml%2Fdoc%2Ftutorials%2Fimgproc%2Fimgtrans%2Fwarp_affine%2Fwarp_af