淘先锋技术网

首页 1 2 3 4 5 6 7

Quartz2D 使用介绍

简介:Quartz2D是一个二维绘图引擎.只能在mac和ios系统中使用

功能:

  • 1.绘制图形:线段,三角形,矩形,弧形,圆等

  • 2.绘制文字

  • 3.绘制图片

  • 4.截图/裁剪图片

  • 5.自定义UI控件

  • 6.读取/生成PDF

使用基本步骤:

  • 1.自定义view

  • 2.重写drawRect方法

    • 获取图形上下文

    • 创建路径对象,添加路径到上下文

    • 渲染

  • 3.在需要刷新图形的时候进行重绘

    • [self setNeedsDisplay];

    • 指定刷新的区域重绘

      [self setNeedsDisplayInRect:CGRectMake(0, 0, 100, 100)];


绘制基本图形

  • 1.0 线段-(C语言函数实现)

 - (void)drawRect:(CGRect)rect{

    //获取图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();  

    //添加路径
    CGContextMoveToPoint(context, 50, 50);  
    CGContextAddLineToPoint(context, 100, 100);
    CGContextAddLineToPoint(context, 150, 80);
    CGContextAddLineToPoint(context, 50, 50);

    //设置线的接头
    CGContextSetLineJoin(context, kCGLineJoinRound);

    //设置线宽
    CGContextSetLineWidth(context, 10);

    //设置线的颜色
    [[UIColor cyanColor] setStroke];

    //渲染
    CGContextStrokePath(context);
}

  • 1.1 线段 -(BezierPath实现)

 // 使用贝塞尔创建路径
UIBezierPath *bezierPath = [UIBezierPath bezierPath];

[bezierPath moveToPoint:CGPointMake(10, 10)];
[bezierPath addLineToPoint:CGPointMake(100, 100)];
 //设置线宽
 bezierPath.lineWidth = 10;
 //设置线的首尾样式
 bezierPath.lineCapStyle = kCGLineCapRound;
// 直接进行渲染
[bezierPath stroke];


截图的功能:

  • 截图

//参数1:图片
//参数2:相框大小
//参数3:放置到相框上的图片的大小(进行相应缩放后的尺寸)..
- (void)drawImage:(UIImage *)image withImageRect:(CGRect)rect toImageView:(UIImageView *)imageView withImageViewSize:(CGSize)size{

    /*
     思想:先根据屏幕宽度,计算出对应的图片高度self.disposeImageHeight,也就是将原始图片按照屏幕宽度计算得到缩放后的尺寸,  然后这就是需要进行绘制的尺寸.再将其绘制到设定好的图片框中.由于对图片框做了高度限制.所以也就相当于对缩放后的图片进行了一个高度的截取.
     */

    /**
     *  参数1:图片框的大小,就是需要绘制多大的图片
     参数2:是否透明
     参数3:缩放,0代表不缩放
     */
    //开启图片上下文,也就是相框的大小
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);

    //图片按照设定的尺寸缩放后设置到相框.也就是最终放置到相框上的照片的大小.由于相框设置是不进行压缩处理,所以超出边框的部分就会被截掉了.
    [image drawInRect:rect];

    //获取当前图片上下文的图片,获取当前相框中的照片.不包括边框外边的部分.
    imageView.image = UIGraphicsGetImageFromCurrentImageContext();

    //关闭图片上下文
    UIGraphicsEndImageContext();

}