概述
CoreGraphics也称为Quartz 2D 是UIKit下的主要绘图系统,频繁的用于绘制自定义视图。Core Graphics是高度集成于UIView和其他UIKit部分的。Core Graphics数据结构和函数可以通过前缀CG来识别。
视图可以通过子视图、图层或实现drawRect:方法来表现内容,如果说实现了drawRect:方法,那么最好就不要混用其他方法了,如图层和子视图。自定义绘图大部分是由UIKit或者Core Graphics来实现的。
2D绘图一般可以拆分成以下几个操作:
由于像素是依赖于目标的,所以2D绘图并不能操作单独的像素,我们可以从上下文(Context)读取它。
绘图就好比在画布上拿着画笔机械的进行画画,通过制定不同的参数来进行不同的绘制。
绘入字符串
调用NSString类里的实例方法drawAtPoint: withFont:方法可以进行绘制。
我们可以遍历设备支持的字体来随机选择一个,然后绘制到drawRect中。
NSString *fontName = @"";
NSUInteger count1 = arc4random() % ([UIFont familyNames].count);
NSString *familyName = [UIFont familyNames][count1];
NSUInteger count2 = [UIFont fontNamesForFamilyName:familyName].count;
fontName = [UIFont fontNamesForFamilyName:familyName][arc4random() % count2];
UIFont *font = [UIFont fontWithName:fontName size:30.0f];
NSString *string = @"Core Graphics";
[string drawAtPoint:CGPointMake(30.0f, 100.0f) withFont:font];
效果
绘制图片
绘制图片方法类似于绘入字符串,调用UIImage的实例方法drawAtPoint:或者drawInRect:来实现对图片的绘制,前者是从某点开始绘制,而后一个方法是在制定的矩形内进行绘制,会进行适当的缩放。
画线
线的画法比较简单,首先获取当前上下文,然后调用其设置线的相关信息,例如线条的宽度,起始点和终点等。
//DrawingLine
[[UIColor brownColor] set]; //设置上下文使用的颜色
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0f);
CGContextMoveToPoint(context, 30.0f, 150.0f); // 画笔移动到某点
CGContextAddLineToPoint(context, 290.0f, 150.0f);
CGContextStrokePath(context); //执行绘制
效果如下
我们看到字的下面有了一条棕色的线。
连续绘制线条,并设置交界样式
上下文在绘制一条直线后会定格在刚才绘制的线的末端,这样我们可以再通过CGContextAddLineToPoint方法来设置立即进行下一条线的绘制。在线的交界处,我们可以设置交界的样式(CGLineJoin),这个枚举中有三种样式:
kCGLineJoinMiter——尖角
kCGLineJoinBevel——平角
kCGLineJoinRound——圆形
//DrawingLinesContinuously
CGContextSetLineWidth(context, 6.0f);
CGContextSetLineJoin(context, kCGLineJoinRound); //线条交汇处样式:圆角
CGContextMoveToPoint(context, 20.0f, 150.0f);
CGContextAddLineToPoint(context, 20.0f, 80.0f);
CGContextAddLineToPoint(context, 290.0f, 80.0f);
CGContextStrokePath(context);
效果如下
我们也可以在绘制图像前和后来使用CGContextSaveGState(CGContextRef)和CGContextRestoreContext(CGContextRef)方法来保存和清除上下文的状态,这种实现类似于把相应内容推入栈中,然后调用Restore方法之后再全部推出,是上下文状态恢复到绘制之前。
绘制矩形
//DrawingRect
CGRect strokeRect = CGRectMake(25, 85, 263, 60);
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetLineWidth(context, 2.0f);
CGContextStrokeRect(context, strokeRect);
绘制完成后效果
然后可以调用CGContextFillRect(CGContextRef)方法来填充矩形
//FillRect
UIColor *clearRed = [UIColor colorWithRed:0.5 green:0.0 blue:0.0 alpha:0.2];
CGContextSetFillColorWithColor(context, clearRed.CGColor);
CGContextFillRect(context, strokeRect);
效果
绘制线性渐变效果
绘制渐变效果首相要创建一个CGGradientRef,创建它需要调用一个方法CGGradientRef CGGradientCreateWithColors(
CGColorSpaceRef space,
CFArrayRef colors,
const CGFloat locations[]
);
需要一个色彩空间梯度,还有颜色的数组以及只读位置数组。
首先先把之前填充颜色的代码注释掉,然后开始绘制渐变。
//DrawingGradient
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
NSArray *colors = @[(__bridge id)[UIColor colorWithRed:0.3 green:0.0 blue:0.0 alpha:0.2].CGColor,
(__bridge id)[UIColor colorWithRed:0.0 green:0.0 blue:1.0 alpha:0.8].CGColor];
const CGFloat locations[] = {0.0, 1.0};
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colors, locations);
CGPoint startPoint = CGPointMake(CGRectGetMinX(strokeRect), CGRectGetMinY(strokeRect)); //矩形最小x,y
CGPoint endPoint = CGPointMake(CGRectGetMaxX(strokeRect), CGRectGetMaxY(strokeRect)); //矩形最大x,y
CGContextSaveGState(context);
CGContextAddRect(context, strokeRect);
CGContextClip(context);
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0); //开始绘制
CGContextRestoreGState(context);
//释放资源
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
效果如下
这时背景的渐变效果就出来了。
以上为本篇文章全部内容,欢迎指正和交流。转载注明出处~
分享到:
相关推荐
文章目录0. 本篇重点1. Table Views2. 新建工程Tabbed App3. 准备主界面3.1 删除 Second View3.2 添加一个 TableViewController,并关联到 TabBar3.3 再加一个 TableViewController,并关联到 TabBar,命名为...
core Graphics与UIKit绘图由基础入门到深入研究,所有代码与详细注释
参考资料:Apple官方KeyNote文件 文章目录1. 常见的系统视图2. 标签(UILabel)3. 图像视图(UIImageView)4. 文本视图(UITextView)5. 滚动视图(UIScrollView)6. 表格视图(UITableView)7....
本篇涉及到的页面布局及所在位置[1] 上下左右距离约束 —— 2[2] 垂直水平居中约束 —— 2[3] 子视图占父视图的比例约束 —— 4[4] 栈视图水平垂直自带约束 —— 6-3[5] 栈视图等分约束 —— 6-3[6] 栈视图间隔约束 ...
苹果官网文档,Core Graphics 是一种基于 C 语言的低...毕竟,UIKit 是一种高层次的框架,它同时还提供用于自定绘图的类,包括路径、颜色、图案、渐变、图像、文本和变换,请尽可能地使用它们来代替 Core Graphics。
苹果官网文档,Core Animation 是一种能让您制作高级动画和视觉效果的技术。UIKit 提供的动画,是建立在 Core Animation 技术之上的。如果您需要超出 UIKit 功能的高级动画,可以直接使用 Core Animation。
MPWDrawingContext协议本身不依赖于AppKit,UIKit或CoreGraphics。 还包括 MPWView,这是一个 View 类,它是 iOS 上的 UIView 和 OSX 上的 NSView 的子类,并使用 MPWDrawingContext 进行渲染。 OSX 和 iOS 的示例...
在UIKit中轻松使用渐变。 Gradient View是围绕CGGradient的简单UIView包装器。 用法 // Initialize a gradient view let gradientView = GradientView ( frame : CGRect ( x : 20 , y : 20 , width : 280 , height :...
Demo里实现了7个动画,从7个角度详细阐述了如何从UIKit的角度进行CoreAnimation。 博客链接:blog.csdn.net/hello_hwc
uikit前端demo
iPhone UIKit详解.pdf
UIkit是一款轻量级、模块化的前端开发框架用于开发快速且强大的Web界面。UIkit为你提供较为全面的HTML、CSS、JS组件,使用简单、易定制和可扩展。 UIkit 是用LESS开发,编写机构良好、代码可扩展易于维护。这款...
IPHONE UIKIT详解
iOS Drawing Practical UIKit Solutions iOS 绘图基于两个库: 1. UIKit 2. Quartz 2D When to Draw? 如果符合下面4种情况之一,你可以考虑去draw: Creating custom views ... building with Core Graphics
苹果App设计必备资源 UIkit -- iOS10 UiKit PSD源文件
ios7 UIKit 框架文档,多看一些总是用好处的
iPhone.UIKit.Framework
iphone UIKit的实例代码。《iphone UIKit》书上的实例代码。
UIKit框架的说明,对各个类给与对应的说明。为了让读者更好了解UIKit