core graphic这个框架实例

最新推荐文章于 2022-09-18 21:27:28 发布
最新推荐文章于 2022-09-18 21:27:28 发布
阅读量281 收藏
点赞数
分类专栏： core Graphic 框架学习
1.参考全面的博客：

Bitmap Graphics Context

2.core graphic这个框架能实现的基本功能

1.基本图形绘制

* 线段（线宽、线段样式）

* 矩形（空心、实心、颜色）

* 三角形、梯形等形状

* 椭圆\圆

* 圆弧

* 文字绘制

* 图片绘制（pattern）

* 图形上下文栈


2.练习（画人）

3.模仿UIImageView

4.自定义checkbox

5.图片裁剪

6.图片水印

7.条纹背景

8.截图

9.结尾总结，刷真的方法是setneeddisplay这个方法，也就是刷新的功能

10.如果有creat这个词就需要进行释放用cfrelease(   )这个方法。


3.步骤

• 在 drawRect: 方法中取得上下文后，就可以绘制东西到 view 上
•
• View 内部有个 layer （图层）属性， drawRect: 方法中取得的是一个 Layer  Graphics  Context ，因此，绘制的东西其实是绘制到 view 的 layer 上去了
•

 

• View 之所以能显示东西，完全是因为它内部的 layer

1. 获得图形上下文

CGContextRef ctx = UIGraphicsGetCurrentContext();

•
2. 拼接路径（下面代码是搞一条线段）

CGContextMoveToPoint(ctx, 10, 10);

CGContextAddLineToPoint(ctx, 100, 100);

 

3. 绘制路径

CGContextStrokePath(ctx); // CGContextFillPath(ctx);


• 新建一个起点

void CGContextMoveToPoint(CGContextRef c, CGFloat x,CGFloat y)

 

• 添加新的线段到某个点

void CGContextAddLineToPoint(CGContextRef c, CGFloatx, CGFloat y)

 

• 添加一个矩形

void CGContextAddRect(CGContextRef c, CGRect rect)

 

• 添加一个椭圆

void CGContextAddEllipseInRect(CGContextRef context,CGRect rect)

 

• 添加一个圆弧

void CGContextAddArc(CGContextRef c, CGFloat x,CGFloat y,

 

  CGFloat radius, CGFloat startAngle, CGFloat endAngle, intclockwise)


• Mode 参数决定绘制的模式

void CGContextDrawPath(CGContextRef c,CGPathDrawingMode mode)

 

• 绘制空心路径

void CGContextStrokePath(CGContextRef c)

 

• 绘制实心路径

void CGContextFillPath(CGContextRef c)

 

 

提示：一般以CGContextDraw、CGContextStroke、CGContextFill开头的函数，都是用来绘制路径的


• 将当前的上下文 copy 一份 , 保存到栈顶 ( 那个栈叫做 ” 图形上下文栈 ”)

void CGContextSaveGState(CGContextRef c)

 

• 将栈顶的上下文出栈 , 替换掉当前的上下文

 

void CGContextRestoreGState(CGContextRef c)


4.具体例子

- (void)drawRect:(CGRect)rect

{

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    

    

    CGContextSaveGState(ctx);

    

    CGContextRotateCTM(ctx, M_PI_4 * 0.3);

    CGContextScaleCTM(ctx, 0.5, 0.5);

    CGContextTranslateCTM(ctx, 0, 150);

    

    CGContextAddRect(ctx, CGRectMake(10, 10, 50, 50));

    

    CGContextStrokePath(ctx);

    

    CGContextRestoreGState(ctx);

    

    CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 100, 100));

    CGContextMoveToPoint(ctx, 100, 100);

    CGContextAddLineToPoint(ctx, 200, 250);

    

    

    // 矩阵操作

//    CGContextScaleCTM(ctx, 0.5, 0.5);

    

    CGContextStrokePath(ctx);

 

}


- (void)drawRect:(CGRect)rect

{

    // 1.获得上下文

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    

    // 将ctx拷贝一份放到栈中

    CGContextSaveGState(ctx);

    

    // 设置绘图状态

    CGContextSetLineWidth(ctx, 10);

    [[UIColor redColor] set];

    CGContextSetLineCap(ctx, kCGLineCapRound);

    

    // 第1根线

    CGContextMoveToPoint(ctx, 50, 50);

    CGContextAddLineToPoint(ctx, 120, 190);

    

    CGContextStrokePath(ctx);

    

    // 将栈顶的上下文出栈,替换当前的上下文

    CGContextRestoreGState(ctx);

    

    

    // 第2根线

    CGContextMoveToPoint(ctx, 10, 70);

    CGContextAddLineToPoint(ctx, 220, 290);

    

    CGContextStrokePath(ctx);

//    CGContextDrawPath(ctx, kCGPathStroke);

 

}


#import "MJHumanView.h"


@implementation MJHumanView


- (void)drawRect:(CGRect)rect

{

    // 1.上下文

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    

    // 2.身体

    drawBody(ctx, rect);

    

    // 3.嘴(微笑)

    drawZui(ctx, rect);

    

    // 3.画眼睛

    drawEyes(ctx, rect);

}


 

void drawEyes(CGContextRef ctx, CGRect rect)

{

    // 1.黑色绑带

    CGFloat startX = rect.size.width * 0.5 - MJRadius;

    CGFloat startY = MJTopY;

    CGContextMoveToPoint(ctx, startX, startY);

    CGFloat endX = startX + 2 * MJRadius;

    CGFloat endY = startY;

    CGContextAddLineToPoint(ctx, endX, endY);

    CGContextSetLineWidth(ctx, 15);

    [[UIColor blackColor] set];

    // 绘制线条

    CGContextStrokePath(ctx);

    

    // 2.最外圈的镜框

    [MJColor(61, 62, 66) set];

    CGFloat kuangRadius = MJRadius * 0.4;

    CGFloat kuangY = startY;

    CGFloat kuangX = rect.size.width * 0.5 - kuangRadius;

    CGContextAddArc(ctx, kuangX, kuangY, kuangRadius, 0, M_PI * 2, 0);

    CGContextFillPath(ctx);

    

    // 3.里面的白色框

    [[UIColor whiteColor] set];

    CGFloat whiteRadius = kuangRadius * 0.7;

    CGFloat whiteX = kuangX;

    CGFloat whiteY = kuangY;

    CGContextAddArc(ctx, whiteX, whiteY, whiteRadius, 0, M_PI * 2, 0);

    CGContextFillPath(ctx);

}


 

void drawZui(CGContextRef ctx, CGRect rect)

{

    // 中间的控制点

    CGFloat controlX = rect.size.width * 0.5;

    CGFloat controlY = rect.size.height * 0.4;

    

    // 当前点

    CGFloat marginX = 20;

    CGFloat marginY = 10;

    CGFloat currentX = controlX - marginX;

    CGFloat currentY = controlY - marginY;

    CGContextMoveToPoint(ctx, currentX, currentY);

    

    // 结束点

    CGFloat endX = controlX + marginX;

    CGFloat endY = currentY;

    

    // 贝塞尔曲线

    CGContextAddQuadCurveToPoint(ctx, controlX, controlY, endX, endY);

    

    // 设置颜色

    [[UIColor blackColor] set];

    

    // 渲染

    CGContextStrokePath(ctx);

}


 

void drawBody(CGContextRef ctx, CGRect rect)

{

    // 上半圆

    CGFloat topX = rect.size.width * 0.5;

    CGFloat topY = MJTopY;

    CGFloat topRadius = MJRadius;

    CGContextAddArc(ctx, topX, topY, topRadius, 0, M_PI, 1);

    

    // 向下延伸

    CGFloat middleX = topX - topRadius;

    CGFloat middleH = 100; // 中间身体的高度

    CGFloat middleY = topY + middleH;

    CGContextAddLineToPoint(ctx, middleX, middleY);

    

    // 下半圆

    CGFloat bottomX = topX;

    CGFloat bottomY = middleY;

    CGFloat bottomRadius = topRadius;

    CGContextAddArc(ctx, bottomX, bottomY, bottomRadius, M_PI, 0, 1);

    

    // 合并路径

    CGContextClosePath(ctx);

    

    // 设置颜色

    [MJColor(252, 218, 0) set];

    

    // 利用填充方式画出之前的路径

    CGContextFillPath(ctx);

 

}


- (void)drawRect:(CGRect)rect

{

    // Drawing code

    // 1.获得图形上下文

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    

    // 2.拼接图形(路径)

    // 设置线段宽度

    CGContextSetLineWidth(ctx, 10);

    

    // 设置线段头尾部的样式

    CGContextSetLineCap(ctx, kCGLineCapRound);

    

    // 设置线段转折点的样式

    CGContextSetLineJoin(ctx, kCGLineJoinRound);

    

   

    // 设置颜色

    CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);

    // 设置一个起点

    CGContextMoveToPoint(ctx, 10, 10);

    // 添加一条线段到(100, 100)

    CGContextAddLineToPoint(ctx, 100, 100);

    

    // 渲染一次

    CGContextStrokePath(ctx);

    

    

   

    // 设置颜色

    CGContextSetRGBStrokeColor(ctx, 0, 0, 1, 1);

    // 设置一个起点

    CGContextMoveToPoint(ctx, 200, 190);

    // 添加一条线段到(150, 40)

    CGContextAddLineToPoint(ctx, 150, 40);

    CGContextAddLineToPoint(ctx, 120, 60);

    

    

    // 3.渲染显示到view上面

    CGContextStrokePath(ctx);

 

}


 

void draw4Rect()

{

    // 1.获得上下文

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    

    // 2.画矩形

    CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));

    

    // set : 同时设置为实心和空心颜色

    // setStroke : 设置空心颜色

    // setFill : 设置实心颜色

    [[UIColor whiteColor] set];

    

//    CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);

    

    // 3.绘制图形

    CGContextFillPath(ctx);

}


 

void drawTriangle()

{

    // 1.获得上下文

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    

    // 2.画三角形

    CGContextMoveToPoint(ctx, 0, 0);

    CGContextAddLineToPoint(ctx, 100, 100);

    CGContextAddLineToPoint(ctx, 150, 80);

    // 关闭路径(连接起点和最后一个点)

    CGContextClosePath(ctx);

    

    //

    CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);

    

    // 3.绘制图形

    CGContextStrokePath(ctx);

 

}


- (void)drawRect:(CGRect)rect

{

    // 1.获得上下文

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    

    // 2.画1/4圆

    CGContextMoveToPoint(ctx, 100, 100);

    CGContextAddLineToPoint(ctx, 100, 150);

    CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI, 1);

    CGContextClosePath(ctx);

    

    [[UIColor redColor] set];

    

    // 3.显示所绘制的东西

    CGContextFillPath(ctx);

}


 

void drawArc()

{

    // 1.获得上下文

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    

    // 2.画圆弧

    // x\y : 圆心

    // radius : 半径

    // startAngle : 开始角度

    // endAngle : 结束角度

    // clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)

    CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);

    

    

    // 3.显示所绘制的东西

    CGContextFillPath(ctx);

}


 

void drawCircle()

{

    // 1.获得上下文

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    

    // 2.画圆

    CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 100, 100));

    

    CGContextSetLineWidth(ctx, 10);

    

    // 3.显示所绘制的东西

    CGContextStrokePath(ctx);

}


- (void)drawRect:(CGRect)rect

{

    drawImage();

}


void drawImage()

{

    // 1.取得图片

    UIImage *image = [UIImage imageNamed:@"me"];

    

    // 2.画

//    [image drawAtPoint:CGPointMake(50, 50)];

//    [image drawInRect:CGRectMake(0, 0, 150, 150)];

    [image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)];

    

    // 3.画文字

    NSString *str = @"为xxx所画";

    [str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil];

}


 

void drawText()

{

    // 1.获得上下文

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 2.画矩形

    CGRect cubeRect = CGRectMake(50, 50, 100, 100);

    CGContextAddRect(ctx, cubeRect);

    // 3.显示所绘制的东西

    CGContextFillPath(ctx);

    

    

    

    // 4.画文字

    NSString *str = @"哈哈哈哈Good morning hello hi hi hi hi";

    //    [str drawAtPoint:CGPointZero withAttributes:nil];

    

    NSMutableDictionary *attrs = [NSMutableDictionary dictionary];

    // NSForegroundColorAttributeName : 文字颜色

    // NSFontAttributeName : 字体

    attrs[NSForegroundColorAttributeName] = [UIColor redColor];

    attrs[NSFontAttributeName] = [UIFont systemFontOfSize:50];

    [str drawInRect:cubeRect withAttributes:attrs];

 

}

L_813815
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS core graphic使用分析
zyy的专栏
11-11 3500
core graphics 提供了描绘图形的底层库。 使用Core Graphics可以： 创建基于路径的绘图抗锯齿渲染添加梯度、图片和颜色Use coordinate-space transformations.创建、显示和分析PDF文档 下面就作者在项目中使用到的core graphics做一个总结： core graphics基本概念 对于应用类框架其实
CoreGraphics
qq_32619837的博客
03-31 331
CoreGraphics中最关键的部分是一个名为Quartz 2D的API集合，它包含了各种函数、数据类型以及对象，能够让大家在内存中直接绘制视图和图像。 CoreGraphics框架几个重要概念: 画布（page）：Quartz 2D将正在进行绘制的视图视作一个虚拟的画布，在画布上用画笔画画，就必须遵循一定的规则，例如，绘制的内容是有先后顺序的。 路径（Path）：当你拿到一支画笔时，就能够随心所欲地在画纸上绘画，画笔移动的轨迹就是路径。 绘图上下文（Graphics Context）：绘图上下文有时
Core Graphics框架 : 一个让程序猿成为视觉设计师的框架
得不到的永远是骚栋.
01-17 842
Core Graphics简介 说Core Graphics框架之前,我们首先要先说一下,在iOS中绘制图形的方式,其形式主要有三种. 1.创建一个UI视图,并且使用"drawRect:"方法添加到Quartz 2D绘制代码中,也就是今天所要说的Core Graphics框架. 2.使用Core Animation层,并且通过委托方法想Core Animation层提供图形内容. 3.通过 OpenGL ES 渲染图形 其结构图如下所示.从图中我们看到的是是不管使用者还是开发者最容易接触到的先..
Core Graphic（一）：历史与介绍
程小龙
02-13 1333
Mac和iOS为开发者提供了许多不同的API用于用户界面的开发。UIKit和AppKit库都拥有很多image，color和path类。Core Animation提供了layer层展示的API。使用OpenGL可以渲染3-D画面。Spritekit可以实现一些列动画。AVFoundation提供了播放视频/音频的接口。 Core Graphic又被称作“Quartz”，它是一个早期被被用来在系
Core Graphics基础和实践
zhuxingtianxia的博客
07-13 262
1. 概念二维的绘图库。当控件样式复杂时,可以把控件画出来,就是自定义控件. 2. 基础绘制流程在drawRect方法中实现 1. 获取图形上下文 ​ CGContextRef ctx = UIGraphicsGetCurrentContext(); 2. 画贝塞尔曲线，可以画各种形状等 ​ UIBezierPath *path = [self arcBezierPa
AGE，.NET中的另一个图形引擎
04-09
标题中的"AGE"，全称为"Another Graphic Engine"，是一个专为.NET框架设计的图形处理库，主要目标是在运行时提供便捷的GDI+（Graphics Device Interface Plus）操作。GDI+是Windows操作系统中用于图形绘制和图像处理...
JSF 标签快速参考及示例
11-20
**综上所述**，《corejsf》这本书和提供的"jsf-tags.html"文件将深入介绍JSF标签的使用，包括其功能、属性、事件处理和示例。通过对这些内容的学习，开发者能够更好地掌握JSF，创建出功能丰富、用户体验良好的Web...
Primefaces dataExporter下載時顯示處理中1
08-08
以下是一个示例代码片段，展示了如何利用这个功能： ```xml xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p=...
react-map:使用 React.js 和 Esri 的 Arcgis JavaScript API 构建的简单地图应用程序
07-13
这个项目，称为"react-map"，是基于React框架的，它利用Esri提供的地图服务来展示地理信息。 首先，让我们理解React.js。React是由Facebook开发的一个用于构建用户界面的JavaScript库，尤其适合构建组件化的、可...
学习jsf标签使用文档.pdf
10-05
在JSF（JavaServer Faces）框架中，标签是构建用户界面的重要组成部分，它们提供了一种声明式的方式来创建和管理Web应用程序的UI组件。以下是对学习JSF标签使用文档中的主要知识点的详细说明： 1. **引入JSF核心...
Graphics 框架画各种图形（圆、三角形、扇形、弧线、圆角矩形等等）
热门推荐
图解AI
03-16 2万+
Core Graphics Framework是一套基于C的API框架，使用了Quartz作为绘图引擎。它提供了低级别、轻量级、高保真度的2D渲染。该框架可以用于基于路径的绘图、变换、颜色管理、脱屏渲染，模板、渐变、遮蔽、图像数据管理、图像的创建、遮罩以及PDF文档的创建、显示和分析。 iOS支持两套图形API族：Core Graphics/QuartZ 2D 和OpenGL ES。OpenGL
核心绘图——Core Graphics
诠释完美
10-30 4820
一. Core Graphics简介 Core Graphics是一个基于C的绘图专用的API族，它经常被称为QuartZ或QuartZ 2D，是一个二维绘图引擎，同时支持iOS和Mac系统。它提供了低级别、轻量级、高保真度的2D渲染。该框架可以用于基于路径的绘图、变换、颜色管理、脱屏渲染，模板、渐变。 提示： 引擎：经过包装的函数库，方便开发者使用。QuartZ 2D是苹果帮封装的一套绘
CoreGraphics(转)
weixin_30667301的博客
08-16 142
2.CoreGraphics 上面我们讲过，UIBezierPath是CoreGraphics的封装，使用它可以完成大部分的绘图操作，不过更底层的CoreGraphics更加强大。 CoreGraphics,也称为Quartz 2D 是UIKit下的主要绘图系统，频繁的用于绘制自定义视图。Core Graphics是高度集成于UIView和其他UIKit部分的。Core Graphi...
对CoreGraphics和QuartzCore的理解
Make___的专栏
05-08 6690
一直对于CoreGraphics，QuartzCore，CoreAnimation这三个概念区分不清，在此梳理一下。 首先明确定义，CoreGraphics，核心图形。 QuartzCore，Quartz是位于Mac OS X的Darwin核心之上的绘图层。 CoreAnimation，核心动画。 CoreGraphics： 它是ios的核心图形库，平时使用最
Core Graphics的简介与概述（一）
die_word的博客
09-06 7069
  简介： Core Graphics是Quartz 2D的一个高级绘图引擎，常用与iOS，tvOS，macOS的图形绘制应用开发。Core Graphics是对底层C语言的一个简单封装，其中提供大量的低层次，轻量级的2D渲染API。 Core GraphicsAPI简单易于使用，并且提供了强大的功能访问，如透明层，基于路径的涂层绘制，屏幕外呈现，高级色彩管理，抗锯齿已经PDF文档的生成解析...
【QT学习】Graphics View框架（基础篇）- 图元、场景、视图
孤生i的博客
09-18 3156
Graphics View框架（基础篇）：图元、场景和视图的简单介绍，以及三者组合绘制一个矩形图元的简单应用。
【Qt】Qt图形框架体系中文介绍Graphics View Framework（2021最新）
huanqing2010的专栏
11-13 844
@[TOC](【Qt】Qt图形框架体系介绍Graphics View Framework（机器翻译博主审校）2021最新版)不用关注 Qt5 图形视图框架（Graphics View Framework）官方文档翻译 Qt文档原文：Qt5 Graphics View Framework 翻译/审校：https://blog.csdn.net/qilei2010 以下内容为百度网页翻译后，我逐句审校完善。 部分术语： Graphics Item ：图元。 图形视图框架（Graphics View Framew
源代码-成语在线 ASP (生成html).zip
08-24
源代码-成语在线 ASP (生成html).zip 源代码-成语在线 ASP (生成html).zip 源代码-成语在线 ASP (生成html).zip 源代码-成语在线 ASP (生成html).zip 源代码-成语在线 ASP (生成html).zip 源代码-成语在线 ASP (生成html).zip 源代码-成语在线 ASP (生成html).zip
资源OpenCV3图像分割视频教程开发视频+文档+源码
最新发布
08-24
资源OpenCV3图像分割视频教程开发视频+文档+源码资源大小2G提取方式是百度网盘分享地址
iOS Core Graphic动画编程中文翻译指南详解
"iOS官方开发文档中文翻译版：'Core Graphic 核心动画编程指南'由Apple Inc.原创，翻译者为謝業蘭，可以通过邮箱xyl.layne@gmail.com进行联系。此文档的翻译得到了有米移动广告平台和CocoaChina社区的支持与鸣谢。该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值