OC绘制基本图形1. UIKit中封装了一些最常用的绘图方法2. 贝塞尔路径常用方法列表(BezierPath)3. 保存屏幕截图,并存储至相册

好了,在之前的两篇文章里面写了Quartz2D的一些基本知识。从这篇开始写一下OC绘制基本图形的方法。

1. UIKit中封装了一些最常用的绘图方法

1.1 矩形

  • 填充 UIRectFill(rect)
  • 画线 UIRectFrame(rect)

1.2 字符串

  • 绘制 [str drawInRect:rect withAttributes:attr];

1.3 图像

  • 拉伸 [image drawInRect:rect]
  • 绘制 [image drawAtPoint:CGPointZero];
  • 平铺 [image drawAsPatternInRect:rect];

2. 贝塞尔路径常用方法列表(BezierPath)

2.1 贝塞尔路径的常用方法列表

2.1.1 构造函数

  • 矩形 bezierPathWithRect
  • 圆角矩形 bezierPathWithRoundedRect:cornerRadius:
  • 椭圆 bezierPathWithOvalInRect:
  • 圆弧 bezierPathWithArcCenter:

2.1.2 路径操作

  • 移动到点 moveToPoint:
  • 添加线 addLineToPoint:
  • 添加曲线 addCurveToPoint:
  • 关闭路径 closePath
  • 追加路径 appendPath:

2.1.3 绘图方法

  • 填充 fill
  • 描边 stroke
  • 剪切 addClip

2.2 画线段

  • 线头样式及交叉线样式

线头样式及交叉线样式.png

- (void)drawRect:(CGRect)rect {
    //    创建路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    //    移动到起点
    [path moveToPoint:CGPointMake(10, 10)];
    
    //    添加线段到终点
    [path addLineToPoint:CGPointMake(90, 90)];
    
    [path moveToPoint:CGPointMake(90, 10)];
    [path addLineToPoint:CGPointMake(10, 90)];
    
    //    设置线宽
    path.lineWidth = 10.0f;
    
    //    设置线头样式
    path.lineCapStyle = kCGLineCapRound;
    
    //    设置线交叉样式
    path.lineJoinStyle = kCGLineJoinMiter;
    
    //    渲染
    [path stroke];
}

2.3 画圆角矩形,也可以用这种方式画圆

- (void)drawRect:(CGRect)rect {
    //    创建路径
    //    参数1:矩形的左上角圆点及矩形的宽高。参数2:矩形圆角的半径
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 80, 80) cornerRadius:10];
    
    
    //    渲染
    [path stroke];
}

2.4 画椭圆,根据这种方法也可以画圆

  • 画出来的也是矩形的内切椭圆
- (void)drawRect:(CGRect)rect {
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 90, 30)];
    
    [path stroke];
}

2.5 画扇形,并进行填充。利用这种方法也可以画圆

  • 在渲染的时候,会自动关闭路径。
- (void)drawRect:(CGRect)rect {
    //    绘制扇形。参数:1,圆点坐标。参数2:半径。参数3+4,起点和终点的弧度。参数5:YES表示顺时针,NO表示逆时针。
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:30 startAngle:0 endAngle:M_PI_2 clockwise:YES];
    
    //连接圆心
    [path addLineToPoint:CGPointMake(50, 50)];
    
    //    渲染
    [path fill];
}

2.6 绘制文字

- (void)drawRect:(CGRect)rect {
    //    准备文字
    NSString *str = @"今天天气不错,挺风和日丽的";
    //    设置文字属性:字号为12,颜色为灰色,描边宽度为10
    NSDictionary *attriStr = @{NSFontAttributeName:[UIFont systemFontOfSize:12.0],NSForegroundColorAttributeName:[UIColor grayColor],NSStrokeWidthAttributeName:@10
                               };
    
    //    绘制方式一:在限定的rect范围内进行绘制,文字会自动换行
    [str drawInRect:CGRectMake(0, 0, 45, 100) withAttributes:attriStr];
    
    //    绘制方式二:从指定的点开始绘制。超出view 的区域就不再显示了。
    [str drawAtPoint:CGPointMake(0, 45) withAttributes:attriStr];
    
}

2.7 绘制图片

  1. 使用drawInrect进行绘制 图片比区域小,就会拉伸;图片比区域大,就会压缩。
  2. 使用drawAtPoint进行绘制 有多大就绘制多大,不做任何压缩、拉伸
  3. 使用drawAsPatten进行绘制 如果图片比区域小,会进行平铺;如果图片比区域大,有多少绘制多少
- (void)drawRect:(CGRect)rect {
    UIImage *image = [UIImage imageNamed:@"image"];
    //    方式一:
    [image drawInRect:CGRectMake(10, 10, 50, 50)];
    //    方式二:
    [image drawAtPoint:CGPointMake(55, 55)];
    //    方式三:
    [image drawAsPatternInRect:CGRectMake(50, 50, 100, 100)];
    
}

3. 保存屏幕截图,并存储至相册

  • 开启一个图形的context。开启就别忘了关闭。
  • iOS8.0 以后还需要获得用户许可的权限。之前的iOS不需要。
  • 在plist中设置申请用户许可时的提示文字。
/**
 保存图片事件
 
 @param sender 保存按钮
 */
- (IBAction)savePicture:(id)sender {
    
    //    开启图片context。参数1:context的大小。参数2:是否不透明。参数三:缩放比,0 表示当前屏幕的缩放比    UIGraphicsBeginImageContextWithOptions(self.patinView.bounds.size, NO, 0);
    
    //    获取图片的范围
    [self.patinView drawViewHierarchyInRect:self.patinView.bounds afterScreenUpdates:YES];
    
    //    从context获取图片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    
    //    结束context,开启一定要结束
    UIGraphicsEndImageContext();
    
    //    将图片保存至照片库
    UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
    
}

//系统指定的保存后结束要执行的方法
- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo{
    
}

系统指定的保存后结束要执行的方法.png

OS8.0 之后,访问相册,给出提示文字。

访问相册,给出提示文字.png

接下来,会分享如何使用OC绘制饼状图、柱状图和扇形图。以及如何使用它们来绘制动态的进度条等等

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏超然的博客

深入了解——CSS3新增属性

写过 CSS 的人应该对 CSS 选择器不陌生,我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式。参考下述代码:

681
来自专栏吴小龙同學

uCrop使用及源码浅析

uCrop使用 github地址 https://github.com/Yalantis/uCrop 然后clone或下载到本地,运行之。 效果预览 ? app...

3636
来自专栏小灰灰

cocos2dx-v3.4 2048(四):单元格的设计与实现

前言 ---- 单元格即显示2、4、8等数字的不同颜色的方格,如下图。本项目中Grid类实现单元格的相关内容,包括数字、背景更新,移动、新增、消除特效 ? ...

1896
来自专栏一“技”之长

Android开发之LinearLayout布局详解

        LinaerLayout又被称为线性布局,是Android界面开发中常用的一种容器视图控件。可以使用XML布局文件配置和代码动态创建两种方式来使...

773
来自专栏姬小光

姬小光前端小讲堂【第003期】

在上一期的代码中,我们用到 h1,p,a 等标签,这些标签确定了我们想在网页中展示一个标题,一个段落,和一个链接。

651
来自专栏听雨堂

从MapX到MapXtreme2004[9]-标注的强调显示

        如果想要将一个选中的图元强调显示,用红色醒目的文字显示的话,我的思路如下:             1、不可能直接改原先的图元,所以必须要在一个...

1925
来自专栏前端知识分享

第157天:canvas基础知识详解

    github地址: https://github.com/malun666/AndyJS2

1662
来自专栏GIS讲堂

Arcgis for JavaSctipt之常用Layer详解

概述:Arcgis for Javasctipt中常见的layer有动态图层(ArcGISDynamicMapServiceLayer

1105
来自专栏我分享我快乐

web前端设计基础单词表

A align 对齐 active 激活 absolute 绝对 alpha 图像通道 animate 动画 animation 动画片 alert 提醒 ad...

3618
来自专栏哈雷彗星撞地球

iOS下使状态栏颜色与H5中背景色一致

iOS 中有的页面也能会内嵌WebView,然后WebView中用H5做了一个导航,而iOS 中状态栏的颜色很难调整的与H5中导航颜色一致。如下图所示:

984

扫码关注云+社区