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

Stroke-描边

影响描边的因素

  • 线的宽度-CGContextSetLineWidth
  • 交叉线的处理方式-CGContextSetLineJoin
  • 线顶端的处理方式-CGContextSetLineCap
  • 进一步限制交叉线的处理方式 -CGContextSetMiterLimit
  • 是否要虚线-Line dash pattern
  • 颜色控件-CGContextSetStrokeColorSpace
  • 画笔颜色-CGContextSetStrokeColor/CGContextSetStrokeColorWithColor
  • 描边模式-CGContextSetStrokePattern

虚线,画笔颜色,交叉的处理方式,顶端的处理方式,线宽度在之前这篇文章里有讲过,这里不再赘述。

CGContextSetMiterLimit

如果当前交叉线绘图模式是kCGLineJoinMiter( CGContextSetLineJoin),quartz根据设置的miter值来判断线的join是bevel或者miter。具体的模式是:将miter的长度除以线的宽度,如果小于设置的mitetLimit值,则join style为bevel;

先看看三种join效果

举个例子就懂了

    CGContextMoveToPoint(context,10,10);
    CGContextAddLineToPoint(context, 50, 50);
    CGContextAddLineToPoint(context, 10, 90);
    CGContextSetLineWidth(context, 10.0);
    CGContextSetLineJoin(context, kCGLineJoinMiter);
    CGContextSetMiterLimit(context,20.0);
    CGContextStrokePath(context);

效果

将Miter设置为1,则效果如下

CGContextSetStrokeColorSpace和pattern会在以后的文章详细阐述,这里暂时先略去


Fill-填充

Quartz填充的时候会认为subpath是封闭的,然后根据规则来填充。有两种规则:

nonzero winding number rule.沿着当前点,画一条直线到区域外,检查交叉点,如果交叉点从左到右,则加一,从右到左,则减去一。如果结果不为0,则绘制。参见这个link

even-odd rule,沿着当前点,花一条线到区域外,然后检查相交的路径,偶数则绘制,奇数则不绘制。
具体效果如下

相关函数

  • CGContextEOFillPath - 用even-odd rule来填充
  • CGContextFillPath - 用nonzero winding number rule方式填充
  • CGContextFillRect/CGContextFillRects - 填充指定矩形区域内path
  • CGContextFillEllipseInRect - 填充椭圆
  • CGContextDrawPath - 绘制当前path(根据参数stroke/fill)

Clip-切割

顾名思义,根据path只绘制指定的区域,在区域外的都不会绘制。
举个例子,截取圆形区域
效果

注意,切割是和状态相关的,以为这切割以后都是在切割后context中绘制的。
如果要保存状态,参照这篇文章里讲的压栈和出栈

 - (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextBeginPath (context);
    CGContextAddArc(context,50, 50,20,0, M_PI * 2,true);
    CGContextClosePath (context);
    CGContextClip (context);
    CGContextSetFillColorWithColor(context, [UIColor lightGrayColor].CGColor);
    CGContextFillRect(context, rect);

    //New Code
    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);

    CGContextMoveToPoint(context,10,10);
    CGContextAddLineToPoint(context, 50, 50);
    CGContextAddLineToPoint(context, 10, 90);

    CGContextSetLineWidth(context, 10.0);
    CGContextSetLineJoin(context, kCGLineJoinMiter);
    CGContextSetMiterLimit(context,20.0);
    CGContextStrokePath(context);
}
-(instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        self.opaque = NO;
    }
    return self;
}

相关函数

  • CGContextClip 按照nonzero winding number rule规则切割
  • CGContextEOClip 按照even-odd规则切割
  • CGContextClipToRect 切割到指定矩形
  • CGContextClipToRects 切割到指定矩形组
  • CGContextClipToMask 切割到mask

Subpath - 子路径

很简单,在stroke/fill或者CGContextBeginPath/CGContextClosePath以后就新开启一个子路径。

注意:

CGContextClosePath,会连接第一个点和最后一个点


Blend-混合模式

Quartz中,默认的颜色混合模式采用如下公式
result = (alpha * foreground) + (1 - alpha) * background

可以使用CGContextSetBlendMode来设置不同的颜色混合模式,注意设置blend是与context绘制状态相关的,一切与状态相关的设置都要想到状态堆栈(如果看不懂这句,看我之前的那两篇文章里讲的)。

先看看官方文档里的例子,最后我会写个自己的例子
background

foreGround


Normal Blend Mode

效果


Multiply Blend Mode

交叉部分会显得比较暗,用上一层和底层相乘,至少和一层一样暗


Screen Blend Mode

交叉部分比较亮,上层的reverse和下层的reverse相乘,至少和一个一样亮



blend模式较多,这里不一一列举了,参见官方文档

时间: 2024-09-29 03:06:01

iOS 2D绘图详解(Quartz 2D)之路径(stroke,fill,clip,subpath,blend)的相关文章

canvas绘图详解笔记(一)

声明一下:这里我不会用太多文字去详解介绍canvas是什么,相信了解过canvas的人都知道它的魅力所在,如果你对canvas还比较陌生的话,建议可以查阅相关资料了解一下.这里我将对canvas绘图详解课程做一次详细的笔记,方便大家和自己日后可以学习.那么接下来就是直接进入笔记内容的学习: 首先创建一个canvas元素,我们只需要在html文件中加入这么一句代码: <canvas id="canvas">当前浏览器不支持canvas,请更换浏览器使用!</canvas

【转】Android Canvas绘图详解(图文)

转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Canvas绘图详解(图文) 泡在网上的日子 发表于 2012-12-12 20:29 第 63165 次阅读 Canvas,android 15 Android中使用图形处理引擎,2D部分是android SDK内部自己提供,3D部分是用Open GL ES 1.0.今天我们主要要了解的是2D相关的,如果你想看3D的话那么可以跳

iOS开发者证书-详解

iOS开发者证书-详解/生成/使用 本文假设你已经有一些基本的Xcode开发经验, 并注册了iOS开发者账号. 相关基础 加密算法 现代密码学中, 主要有两种加密算法: 对称密钥加密 和 公开密钥加密. 对称密钥加密 对称密钥加密(Symmetric-key algorithm)又称为对称加密, 私钥加密, 共享密钥加密. 这类算法在加密和解密时使用相同的密钥. 例如: 最常见的应用场景 - 系统登陆. 要成功登陆系统, 你必须输入正确的密码, 这密码是唯一的, 是与创建时一样的. 同样 的,

转:iOS中socket详解

一.网络各个协议:TCP/IP.SOCKET.HTTP等 网络七层由下往上分别为物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 其中物理层.数据链路层和网络层通常被称作媒体层,是网络工程师所研究的对象: 传输层.会话层.表示层和应用层则被称作主机层,是用户所面向和关心的内容. http协议   对应于应用层 tcp协议    对应于传输层 ip协议     对应于网络层 三者本质上没有可比性.  何况HTTP协议是基于TCP连接的. TCP/IP是传输层协议,主要解决数据如何在网络

iOS UIView动画详解(Objective-C)

我在之前的一篇博客中<iOS UIView动画详解(Swift)>讲解了使用Swift来实现UIView类下面提供的多种动画效果,如位置动画.旋转动画.缩放动画.颜色动画.透明度动画等等.为了这个题目的完整性,今天我使用Objective-C来完全重写以上的所有的动画.项目案例已经上传至:https://github.com/chenyufeng1991/iOS-UIView-Animation  中的Animation-OC文件夹下,另一个目录下则是Swift实现的动画. (1)位置动画 P

iOS开发:详解Objective-C runTime

Objective-C总Runtime的那点事儿(一)消息机制 最近在找工作,Objective-C中的Runtime是经常被问到的一个问题,几乎是面试大公司必问的一个问题.当然还有一些其他问题也几乎必问,例如:RunLoop,Block,内存管理等.其他的问题如果有机会我会在其他文章中介绍. 本篇文章主要介绍RunTime. RunTime简称运行时.就是系统在运行的时候的一些机制,其中最主要的是消息机制.对于C语言,函数的调用在编译的时候会决定调用哪个函数( C语言的函数调用请看这里 ).编

iOS开发 - UIActivityViewController详解

昨天在做微信分享的时候, 用到了这个东西.趁热写点东西记录下. UIActivityViewController类是一个标准的view controller,通个使用这个controller,你的应用程序就可以提供各种服务. 系统提供了一些通用的标准服务,例如拷贝内容至粘贴板.发布一个公告至社交网.通过email或者SMS发送内容. 应用程序同样可以自定义服务.(我的微信分享就属于自定义服务, 之后将会写一篇教程介绍) 你的应用程序负责配置.展现和解雇这个view controller. vie

转载]IOS LBS功能详解[0](获取经纬度)[1](获取当前地理位置文本 )

原文地址:IOS LBS功能详解[0](获取经纬度)[1](获取当前地理位置文本作者:佐佐木小次郎 因为最近项目上要用有关LBS的功能.于是我便做一下预研. 一般说来LBS功能一般分为两块:一块是地理定位,就是获取当前精度.纬度和地理位置的功能,这一部分功能主要用到CoreLocation.Frameworks.一部分就是显示地图信息.丰富地图内容等,这一部分主要用到MapKit.Frameworks.以上这几个功能的测试最好都要在真机上进行.模拟器上定位一般会在Apple的加州总部. 首先介绍

IOS开发 Blocks详解(转)

IOS开发 Blocks详解(转) (2013-10-14 16:41:54) 从Mac OS X 10.6以及iOS 4开始,苹果在GCC和Clang编译器中为C语言引入了一个新扩展:Blocks,使得程序员可以在C.Objective-C.C++和Objective-C中使用闭包.Blocks有点像函数,但是它可以在其它函数或方法中进行声明和定义,同时它还是匿名的(匿名函数),并可以捕获其所在作用域中的变量(闭包特性). Blocks的语法 Blocks和C语言中的函数指针有点类似,如果你了