iOS 2D绘图 (Quartz2D)之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)
博客原地址: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)之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)的更多相关文章
- iOS 2D绘图详解(Quartz 2D)之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)
前言:一个路径可以包含由一个或者多个shape以及子路径subpath,quartz提供了很多方便的shape可以直接调用.例如:point,line,Arc(圆弧),Curves(曲线),Ellip ...
- iOS 2D绘图 (Quartz2D)之路径(stroke,fill,clip,subpath,blend)
像往常一样 这个系列的博客是跟着大神的脚步来的.按照往例 在此贴出原博客的出处: http://blog.csdn.net/hello_hwc?viewmode=list我对大神的崇拜之情 如滔滔江水 ...
- iOS开发之Quartz2D 二:绘制直线,曲线,圆弧,矩形,椭圆,圆
#import "DrawView.h" @implementation DrawView /** * 作用:专门用来绘图 * 什么时候调用:当View显示的时候调用 * @par ...
- iOS 2D绘图 (Quartz2D)之阴影和渐变(shadow,Gradient)
原博地址:http://blog.csdn.net/hello_hwc/article/details/49507881 Shadow Shadow(阴影) 的目的是为了使UI更有立体感,如图 sha ...
- iOS 2D绘图 (Quartz2D)之Transform(CTM,Translate,Rotate,scale)
前言:Quartz默认采用设备无关的user space来进行绘图,当context(画板)建立之后,默认的坐标系原点以及方向也就确认了,可以通过CTM(current transformation ...
- MFC 直线 虚线 折线 圆 椭圆 矩形 弧形
****Dlg.h头文件加入: //为project加入画笔.点变量数组 public: CPen m_pen[5]; CPoint m_point[5]; public: void DrawLine ...
- iOS 2D绘图 (Quartz 2D) 概述
本篇博客原文地址:http://blog.csdn.net/hello_hwc?viewmode=list 由于自己的项目需要,从网络上下载了许多关于绘制图形的demo,只是用在自己的项目中,很多地方 ...
- iOS 2D绘图详解(Quartz 2D)之概述
前言:最近在研究自定义控件,由于想要彻底的定制控件的视图还是要继承UIView,虽然对CALayer及其子类很熟练,但是对Quartz 2D这个强大的框架仍然概念模棱两可.于是,决定学习下,暂定7篇文 ...
- iOS 2D绘图详解(Quartz 2D)之路径(stroke,fill,clip,subpath,blend)
Stroke-描边 影响描边的因素 线的宽度-CGContextSetLineWidth 交叉线的处理方式-CGContextSetLineJoin 线顶端的处理方式-CGContextSetLine ...
随机推荐
- 【linux草鞋应用编程系列】_6_ 重定向和VT100编程
一.文件重定向 我们知道在linux shell 编程的时候,可以使用文件重定向功能,如下所示: [root@localhost pipe]# echo "hello world&q ...
- ABySS非root权限安装
本文转自 http://yangl.net/2015/11/12/abyss_install/ ABySS: ABySS is a de novo, parallel, paired-end seq ...
- 如何在MAC OS X下安装配置java开发工具
简介: Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.Java语言作为静态面向对象编程语 ...
- css相对定位和绝对定位
相对定位,是对原来元素的位置为参照物进行定位: 绝对定位,如果父级没有定位,则针对HTML为参照物进行定位:如果父级有定位,则针对父元素为参照物进行定位
- HTML5中地图矢量化
我们可以获取canvas对象为var c=document.getElementById("myCanvas");其应有js属性方法如下列举:1:绘制渲染对象, c.getCont ...
- SharePoint 2013 新建网站集图解
前言:接触SharePoint的人可能是越来越多,但是很多人一接触就很迷茫,在技术群里问如何新建网站集,这样一篇图解,帮助新手学习在搭建好SharePoint环境之后,如何创建一个网站集,做一个基本的 ...
- We refined export to Excel for SharePoint
http://sysmagazine.com/posts/208948/ http://sharepointwikipedia.blogspot.kr/2013/05/export-to-spread ...
- Objective-C语言--属性和实例变量
看到一篇讲解特别清晰的blog,与大家共享:http://blog.csdn.net/addychen/article/details/39525681
- iOS crash 追终 ,iOS 如何定位crash 位置
https://developer.apple.com/library/ios/technotes/tn2151/_index.html 错误分析是基于设备中的crash log 与 编译文件时生成的 ...
- scrollWidth,clientWidth,offsetWidth的区别
通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包 ...