博客原地址:http://blog.csdn.net/hello_hwc?viewmode=list

让我们继续跟着大神的脚步前进吧。这一次 我们学习一些Quartz 2D 最基本的一些用法。

前言:一个路径可以包含由一个或者多个shape以及子路径subpath,Quartz提供了很多方便的shape可以直接调用。例如:point line Arc(圆弧),Curves(曲线),Ellipse(椭圆), Rectangle(矩形)。

对这些path可以进行stroke(描边),也可以进行fill(填充),也可以利用path对一个区域进行截取(clip)

例如 使用截取圆形区域

绘制 Points / lines

Quartz 2D中 使用方法 CGContextMoveToPoint移动画笔到一个点来开始一个新的子路径,使用CGContextAddLineToPint来从当前开始点添加一条线到结束点。

注意:CGContextAddLineToPoint调用后,开始点会重新设置,直到结束点。

举个例子:

- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
//设置填充颜色
CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
//设置描边颜色
CGContextSetStrokeColorWithColor(context, [UIColor darkGrayColor].CGColor); //为了颜色更好的区分 对矩形进行描边
CGContextFillRect(context, rect);
CGContextStrokeRect(context, rect);
//实际line和point代码
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
//设置画笔的宽度
CGContextSetLineWidth(context, 4.0);
//设置线的顶端的样式
CGContextSetLineCap(context, kCGLineCapRound);
//设置线相交处的样式
CGContextSetLineJoin(context, kCGLineJoinRound);
CGPoint selfCent = CGPointMake(self.bounds.size.width / + , self.bounds.size.height / );
CGFloat width = ;
//设置画线的起点
CGContextMoveToPoint(context, selfCent.x - width / , selfCent.y - width / );
//移动画笔到结束点,并将结束点作为下一次画线的起点
CGContextAddLineToPoint(context, selfCent.x - width / , selfCent.y + width / );
CGContextAddLineToPoint(context, selfCent.x + width / , selfCent.y);
CGContextAddLineToPoint(context, selfCent.x - width / , selfCent.y - width / );
//提交 开始渲染
CGContextStrokePath(context);
}

效果:

这里 我们提一下线的顶端模式 使用CGContextLineCao来设置

线的相交模式 使用CGContextLineJoin来设置,一共也有三种

画虚线

//画虚线
- (void)drawDashLineInRect:(CGRect)rect andContext:(CGContextRef)context {
CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor); CGContextFillRect(context, rect);
CGContextStrokeRect(context, rect);
//设置描边颜色
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
//设置下画笔的宽度
CGContextSetLineWidth(context, 1.0);
//设置线的顶端样式
CGContextSetLineCap(context, kCGLineCapRound);
//设置相交线的样式
CGContextSetLineJoin(context, kCGLineJoinRound); //开始画线
CGFloat lengths[] = {,};
//参数说明
/*
context 这个不用多书
phase 表示第一个虚线绘制的时候要跳过多少个点
lengths = {10,10}表示先绘制10个点 跳过十个点 在绘制10个点 如此反复
如果把lengths值改为{10, 20, 10},则表示先绘制10个点,跳过20个点,绘制10个点,跳过10个点,再绘制20个点,如此反复,如图:
count 表示lengths数组的长度
*/
CGContextSetLineDash(context, , lengths, );
CGContextMoveToPoint(context,,);
CGContextAddLineToPoint(context, , );
CGContextAddLineToPoint(context, , );
CGContextAddLineToPoint(context, , );
CGContextStrokePath(context);
}

效果图:

参数说明

void CGContextSetLineDash (
CGContextRef _Nullable c,
CGFloat phase,
const CGFloat * _Nullable lengths,
size_t count
);

c 绘制的context,这个不用多说
phase,第一个虚线段从哪里开始,例如传入3,则从第三个单位开始 如果lengths = {10,10}则从第三个单位开始 画七个单位 跳过十个单位 在画是个单位 跳过十个单位 以此类推。
lengths,一个C数组,表示绘制部分和空白部分的分配。例如传入[2,2],则绘制2个单位,然后空白两个单位,以此重复
count lengths的数量


画圆弧

Quartz 2D提供了两个方法来绘制圆弧

CGContextAddArc:普通的圆弧的一部分(以某个点为圆心,指定半径 和多大弧度的圆弧)

CGContextAddArcToPoint:用来绘制圆角,下文会详细阐述。

CGContextAddArc 参数说明:

void CGContextAddArc (
CGContextRef _Nullable c,
CGFloat x,
CGFloat y,
CGFloat radius,
CGFloat startAngle,
CGFloat endAngle,
int clockwise
);

c,context不用说了 日常传上下文

x , y 指定坐标原点

radius 指定半径的长度

startAngle/endAngle 指定某一段弧度

clockwise 1 表示顺时针 0 表示逆时针

代码示例 哈哈哈哈哈

CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor); CGContextFillRect(context, rect);
CGContextStrokeRect(context, rect);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextAddArc(context, , , , , M_PI, );
CGContextStrokePath(context);

效果:

CGContextAddArcToPoint这个方法比较复杂 但是理解了也没有什么难度

函数体

void CGContextAddArcToPoint (
CGContextRef _Nullable c,
CGFloat x1,
CGFloat y1,
CGFloat x2,
CGFloat y2,
CGFloat radius
);

参数

c context 不用说了

x1,y1和当前点(x0,y0)决定了第一条切线(x0,y0)->(x1,y1)

x2,y2和(x1,y1)决定了第二条切线

radius,想切的半径。

也就是说

绘制一个半径为radius的圆弧 和上述两条直线都相切。

代码

CGContextMoveToPoint(context, , );
CGContextAddArcToPoint(context,,,,, );
CGContextStrokePath(context);

效果

解释为什么

图中的两条红线就是上文提到的两条线,分别是(x0,y0)->(x1,y1)和(x1,y1)->(x2,y2),那么和这两条线都想切的自然就是图中的蓝色圆弧了


椭圆/矩形

这两个比较简单 就不再多说了

- (void)addEllipseAndRectInRect:(CGRect)rect{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor); CGContextFillRect(context, rect);
CGContextStrokeRect(context, rect);
//设置画笔的颜色
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextSetLineWidth(context, 2.0f);
//画椭圆
CGContextAddEllipseInRect(context, CGRectMake(, , , ));
//画矩形
CGContextAddRect(context, CGRectMake(, , , ));
//渲染
CGContextStrokePath(context);
}

效果:


曲线

Quartz 2D 使用计算机图形学中的多项式绘制曲线 支持二次和三次曲线

利用函数CGContextAddCurveToPoint可以绘制三次曲线

函数体

void CGContextAddCurveToPoint (
CGContextRef _Nullable c,
CGFloat cp1x,
CGFloat cp1y,
CGFloat cp2x,
CGFloat cp2y,
CGFloat x,
CGFloat y
);

参数说明

c context 不用多说

cp1/cp2第一个控制点

cp2/cp2第二个控制点

x/y 结束点

具体效果如图

使用函数CGContextAddQuadCurveToPoint 来绘制二次曲线

函数体

void CGContextAddQuadCurveToPoint (
CGContextRef _Nullable c,
CGFloat cpx,
CGFloat cpy,
CGFloat x,
CGFloat y
);

参数说明

c context

cpx/cpy 控制点

x/y 结束点

效果

来个例子看一下

吼吼哈嘿

//画曲线
- (void)addCurveInRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor); CGContextFillRect(context, rect);
CGContextStrokeRect(context, rect);
//画二次曲线
//设置起点
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextMoveToPoint(context, , );
CGContextAddQuadCurveToPoint(context, , , , );
CGContextStrokePath(context); //画三次曲线
//保存上下文 同时也是结束上次的绘制
CGContextSaveGState(context);
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
//设置起点
CGContextMoveToPoint(context, , );
CGContextAddCurveToPoint(context, , , , , , );
CGContextStrokePath(context);
//提出最新的上下文
CGContextRestoreGState(context); }

效果图

当曲线和动画结合起来,用处会很大。如果写到动画那一部分 会结合起来讲解。

iOS 2D绘图 (Quartz2D)之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)的更多相关文章

  1. iOS 2D绘图详解(Quartz 2D)之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)

    前言:一个路径可以包含由一个或者多个shape以及子路径subpath,quartz提供了很多方便的shape可以直接调用.例如:point,line,Arc(圆弧),Curves(曲线),Ellip ...

  2. iOS 2D绘图 (Quartz2D)之路径(stroke,fill,clip,subpath,blend)

    像往常一样 这个系列的博客是跟着大神的脚步来的.按照往例 在此贴出原博客的出处: http://blog.csdn.net/hello_hwc?viewmode=list我对大神的崇拜之情 如滔滔江水 ...

  3. iOS开发之Quartz2D 二:绘制直线,曲线,圆弧,矩形,椭圆,圆

    #import "DrawView.h" @implementation DrawView /** * 作用:专门用来绘图 * 什么时候调用:当View显示的时候调用 * @par ...

  4. iOS 2D绘图 (Quartz2D)之阴影和渐变(shadow,Gradient)

    原博地址:http://blog.csdn.net/hello_hwc/article/details/49507881 Shadow Shadow(阴影) 的目的是为了使UI更有立体感,如图 sha ...

  5. iOS 2D绘图 (Quartz2D)之Transform(CTM,Translate,Rotate,scale)

    前言:Quartz默认采用设备无关的user space来进行绘图,当context(画板)建立之后,默认的坐标系原点以及方向也就确认了,可以通过CTM(current transformation ...

  6. MFC 直线 虚线 折线 圆 椭圆 矩形 弧形

    ****Dlg.h头文件加入: //为project加入画笔.点变量数组 public: CPen m_pen[5]; CPoint m_point[5]; public: void DrawLine ...

  7. iOS 2D绘图 (Quartz 2D) 概述

    本篇博客原文地址:http://blog.csdn.net/hello_hwc?viewmode=list 由于自己的项目需要,从网络上下载了许多关于绘制图形的demo,只是用在自己的项目中,很多地方 ...

  8. iOS 2D绘图详解(Quartz 2D)之概述

    前言:最近在研究自定义控件,由于想要彻底的定制控件的视图还是要继承UIView,虽然对CALayer及其子类很熟练,但是对Quartz 2D这个强大的框架仍然概念模棱两可.于是,决定学习下,暂定7篇文 ...

  9. iOS 2D绘图详解(Quartz 2D)之路径(stroke,fill,clip,subpath,blend)

    Stroke-描边 影响描边的因素 线的宽度-CGContextSetLineWidth 交叉线的处理方式-CGContextSetLineJoin 线顶端的处理方式-CGContextSetLine ...

随机推荐

  1. 【linux草鞋应用编程系列】_6_ 重定向和VT100编程

    一.文件重定向     我们知道在linux shell 编程的时候,可以使用文件重定向功能,如下所示: [root@localhost pipe]# echo "hello world&q ...

  2. ABySS非root权限安装

    本文转自  http://yangl.net/2015/11/12/abyss_install/ ABySS: ABySS is a de novo, parallel, paired-end seq ...

  3. 如何在MAC OS X下安装配置java开发工具

    简介: Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.Java语言作为静态面向对象编程语 ...

  4. css相对定位和绝对定位

    相对定位,是对原来元素的位置为参照物进行定位: 绝对定位,如果父级没有定位,则针对HTML为参照物进行定位:如果父级有定位,则针对父元素为参照物进行定位

  5. HTML5中地图矢量化

    我们可以获取canvas对象为var c=document.getElementById("myCanvas");其应有js属性方法如下列举:1:绘制渲染对象, c.getCont ...

  6. SharePoint 2013 新建网站集图解

    前言:接触SharePoint的人可能是越来越多,但是很多人一接触就很迷茫,在技术群里问如何新建网站集,这样一篇图解,帮助新手学习在搭建好SharePoint环境之后,如何创建一个网站集,做一个基本的 ...

  7. We refined export to Excel for SharePoint

    http://sysmagazine.com/posts/208948/ http://sharepointwikipedia.blogspot.kr/2013/05/export-to-spread ...

  8. Objective-C语言--属性和实例变量

    看到一篇讲解特别清晰的blog,与大家共享:http://blog.csdn.net/addychen/article/details/39525681

  9. iOS crash 追终 ,iOS 如何定位crash 位置

    https://developer.apple.com/library/ios/technotes/tn2151/_index.html 错误分析是基于设备中的crash log 与 编译文件时生成的 ...

  10. scrollWidth,clientWidth,offsetWidth的区别

      通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包 ...