Monthly Archives: December 2014

Quartz2D的基本使用(第四讲:图片裁剪-QQ圆形头像制作)

一、基本思路

1、开启位图上下文(UIGraphicsGetCurrentContext()为普通图层上下文,即view的layer层),位图上下文使用函数UIGraphicsBeginImageContext(CGSize size)或UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)开启;

2、描述一个原图加边框大小的圆形区域;(假设原图为正方形,原图边长为10,边框为2,则新区域边长为14)

3、将该区域填充为白色并渲染上去

4、以原图片大小描述一个新的圆形区域并设置合适的大小尺寸使其居于上一个白色圆形的正中心

5、裁剪该圆形区域

6、将原图片渲染到新的圆形区域,由于上面的剪裁关系,超出圆形区域自动不可见

7、获取上下文渲染出来的图片设置某个UIImageView上查看效果

8、为方便使用,将上述方面封装成UIImage的Category,传入图片名及边框大小即可返回新的圆形头像图片[……]

继续阅读

Quartz2D的基本使用(第三讲:图形上下文栈)

1、在Quartz2D的图形样式设置中,所有的样式都是针对图形上下文的,只要设置了即会整个图形上下文生成的图形产生影响;
2、具体一点讲,如果设置了线条宽度为2像素,那么后续绘制的所有线条都是2像素宽;
3、如果后续有些线段只需要1个像素宽则重新设置线条宽度,并且该设置会覆盖前面2个像素的设置参数;
4、基于这种特性,对于图形上下文的参数设置Quartz2D引进了一个图形上下文栈的概念;
5、使用非常简单,只需要2步;
5.1、将当前图形上下文设置入栈:CGContextSaveGState(CGContextRef c);
5.2、将保存的图形上下文恢复到当前的上下文设置中:CGContextRestoreGState(CGContextRef c);
6、入栈与出栈操作一般成对出现,并且可以嵌套;
7、示例说明:
7.1、函数graphOne()为未使用图形上下文栈的效果,graphTwo()为使用了图形上下文栈的效果[……]

继续阅读

Quartz2D的基本使用(第二讲:基本图形绘制)

一、基本绘图方法

1、移动画笔位置方法形式如 CGContextMovexxxx, 如:CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)为移动到坐标(x, y)

2、描述图形方法如 CGContextAddxxxx,如:
CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y),描述一个线段从当前画笔点到点(x,y)
GContextAddRect(CGContextRef c, CGRect rect),根据传入的rect描述一个矩形,rect中指定了位置与尺寸
CGContextAddEllipseInRect(CGContextRef context, CGRect rect),根据传入的rect描述一个在rect中能容纳的最大椭圆,如果为rect中width与height相等则为圆
CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise),该函数为画一段圆弧,传入的参数分别为:上下文,圆心x坐标,圆心y坐标, 半径, 开始弧度值,结束弧度值,顺时钟(1为顺时钟,0为逆时钟)

3、图形设置方法如 CGContextSetxxxx,如:
CGContextSetRGBFillColor(CGContextRef context, CGFloat red, CGFloat green, CGFloat blue, CGFloat alpha),填充图形时使用的颜色RGB与透明度值

4、图形渲染 CGContextxxxxPath(),如:
CGContextFillPath(CGContextRef c), 渲染为实心图形
CGContextStrokePath(CGContextRef c), 渲染为空心图形[……]

继续阅读

Quartz 2D的基本使用(第一讲:画直线)

一、Quartz 2D的基本使用分为三个步骤

1、获取上下文:类似开启一个绘图板
2、绘制图形:通过一些CGContext的描述告诉绘图板接下来将要绘制什么样的图形
3、渲染图形:将描述好的图形渲染到当前的视图,view的layer图层上。

二、代码示例

1、Quartz 2D图形的绘制一定要在drawRect:方法中实现
2、示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//
//  SAView.m
//  Quartz2D
//
//  Created by 余西安 on 14/12/1.
//  Copyright (c) 2014年 Sian. All rights reserved.
//
 
#import "SAView.h"
 
@implementation SAView
 
-(void)drawRect:(CGRect)rect
{
    // 1、获取上下文(开启当前绘图板)
    CGContextRef ctx = UIGraphicsGetCurrentContext();
 
    // 2、绘制图形
    // 将“画笔”移动到点(100, 100)
    CGContextMoveToPoint(ctx, 100, 100);
    // (从当前点开始)添加线段到(100, 100)
    CGContextAddLineToPoint(ctx, 200, 200);
 
    // 3、渲染图像到当前View
    CGContextStrokePath(ctx);
}
 
@end

[……]

继续阅读