iOS UI 优化 - Core Graphics

Core Graphics 实现探索

又是一个常用但是不知怎么开篇博文。🤔🤔🤔

Core GraphicsiOS 整个架构的层次结构可以和上篇 Core Animation 实现,这里仅仅展示 Core Graphics 实现的基础实现架构。

Core Graphics.png

在讲解 Core Graphics 之前还是按照小编的🍉惯,对该框架 API 的接口进行整理。

屏幕快照 2019-03-16 20.43.18.png

作为基于 Quartz 的框架,上面 👆 的 API 类型 CGTypeC 层面的绘图引擎。主要在上面 Core Animation 探索 中验证过程中位置参数、颜色值、路径以及图像等等方面......
讲真这个框架不知道怎么开笔,就按照上面 API 来各个阐述自己理解吧。

Geometric Data Type

集合数据类型 表示 & 使用范围
CGFloat(单精度浮点型) 1、 表示值类型的数据。iOS 中采用宏来进行定义,Swift 采用最长用的 Struct 来实现。 32 位 CPU 占 4 个字节,64 位 CPU 占 8 个字节。2、iOS 开发过程中关于位置,宽高的参数均是采用此值类型。
CGPoint(二维坐标位置) 1、 表示值类型的点。点的基本参数 x, y 均是 CGFloat 值类型参数。2、 二维坐标中来确定控件位置布局中中心点、锚点等。
CGSize(控件大小) 1、 表示值类型的尺寸。尺寸同样是基本值类型参数 width & height2、 坐标中来基于当前控件在基于右上角、右下角或者是中心点控制点三者来确定控件的位置。可以根据在 Layer 确定布局时验证中心点然后确定 Size 的参数可知。可以参考上一篇文章 Core Animation
CGRect(控件位置) 1、 表示值类型的区域。区域的基本值类型参数 Point & Size2、 是根据 iOS 中右上角为坐标系根据初始化控件右上角参数类确定控件位置。
CGVector(二维向量坐标) 1、 表示值类型向量中偏移。偏移的参数 dx, dy 也均是 CGFloat 值类型参数。2、 基于 SceneKitiOS 开发引擎来做刚体位置偏转。
CGAffineTransform(二维仿射变换) 1、 表示值类型仿射变换矩阵。矩阵参数 a, b, c, d, tx 和 ty 均为 Float 值类型。2、 UIKit 中基于 UIView 控件均有此参数,可以实现控件偏移,旋转,缩放或者倾斜。微信读书控件斜向动画

注:上述没有详细讲述其均为 Struct 值类型结构

CGAffineTransform 使用

CGAffineTransform 初始化仿射变换初始化中显示 CGAffineTransform.init(a: , b: , c: , d: , tx: , ty: ) 来作为 33* 的矩阵。

屏幕快照 2019-04-03 23.22.54.png

上面根据在仿射变换后坐标:
X 轴上的坐标 X`= ax + cy + tx, a 表示在 x 轴的缩放比例系数,c 表示在 y 轴偏移系数在旋转时使用, tx 是在当前坐标系的平移距离。

Y 轴上的坐标 Y`= bx + dy + ty, b 表示在 y 轴的缩放比例系数,d 表示在 x 轴偏移系数在旋转时使用, ty 是在当前坐标系的平移距离。

所以下面的方式实现是 ==

let transFormTenPixel1 = CGAffineTransform.init(a: 0, b: 0, c: 0, d: 0, tx: 10, ty: 10)
let transFormTenPiexl2 = CGAffineTransform.init(translationX: 10, y: 10)
    
let transFormScaleTimes1 = CGAffineTransform.init(a: 2, b: 0, c: 0, d: 2, tx: 0, ty: 0)
let transFormScaleTimes2 = CGAffineTransform.init(scaleX: 2, y: 2)
    
let angle = Double.pi * 0.3
let transFormRotationAngle1 = CGAffineTransform.init(a: cos(angle), b: sin(angle), c: -sin(angle), d: cos(angle), tx: 0, ty: 0)
let transFormRotationAngle1 = CGAffineTransform.init(rotationAngle: angle)

2D Drawing

二维绘制 表示 & 使用的优劣
CGContext(绘制渲染上下文) 1、 表示调用 Core Graphics 绘制上下文。2、 在绘制过程中获取上下文 ContextMain Thread 中总是会回去 UIKit 堆栈的最上面,在后台线程可以获取当前上下文。根据获取上下文的绘制目的可以实现:PDFBitmapWindowLayer、和 Printer
CGImage(位图) 1、 表示位图或者是位图的 Mask2、UIKitUIImage 对应的 CGType 类型,当前我们绘制或者对图片进行截取后便是此类型。
CGPath(路径) 1、 表示绘制过程中绘制 Path2、 同样是对应在 UIKit 中对应 UIBerizerPathCGType 对应类型。
CGMutablePath(可变路径) 1、 表示路径的可变类型。2、 CGPath 的可变类型结构。
CGLayer(绘制渲染屏幕外图形绘制画布内容) 1、 表示在绘制渲染中依托的实际绘制画布。2、 类似于在 Core AniationCALayer 作用效果,是绘制渲染上下文实际绘制载体。

注:上述没有详细讲述其均为 Struct 值类型结构

Colors | Font

色彩字体 表示 & 使用范围
CGColor(颜色值) 1、 表示颜色值。 2、 对应在 UIKitUIColor
CGColorConversionInfo(色彩转换) 1、 表示色彩多空间转换。
CGColorSpace(显示颜色值表达格式) 1、 表示颜色值在储存中表达格式。 2、iOS 可以采用的格式有:HSB: Hue, saturation, brightnessRGBRed, green, blueCMYKCyan, magenta, yellow, blackBGRBlue, green, red
CGFont(绘制文本信息) 1、 表示绘制文本详细信息。 2、 在文本绘制过程中对应当前字体格式值,对用在 Core AnimationUIFont

注:上述没有详细讲述其均为 Struct 值类型结构

Working with PDF Decument

色彩字体 表示 & 使用范围
CGPDFDocument() 1、2、
CATransaction() 1、

Utility | Support Classes

多用途以及支持类 表示 & 使用范围
CGDataConsumer() 1、2、
CGDataProvider() 1、2、
CGShading(阴影) 1、 表示设置阴影详细信息。 2、 对应 UIKitLayer 层中 Shadow 属性来设置控件的阴影值。
CGGradient(颜色渐变) 1、 表示设置过渡色彩接口。 2、 对应在 CAGradientLayer 来实现颜色的效果过渡。
CGFunction(协助工具) 1、 表示在 CGType 方法中基础事件回调。 2、 提供事件的基础回调类似与我们在方法定义的 Block 实现。
CGPattern(模式) 1、 表示绘制 2D 模型的一种模式。 2、

此篇博文先停停.... 讲真真心没有思路。。。。

未完待续。。。

参考资料:
绘制像素到屏幕上
Quartz 2D Programming Guide
Overview of Quartz 2D
Core Graphics
Core Graphics, Part 1: In the Beginning
Core Graphics, Part 2: Contextually Speaking
Core Graphics Tutorial: Patterns
Optimizing 2D Graphics and Animation Performance
Advanced Graphics and Animations for iOS Apps
Building Visually Rich User Experiences
Image and Graphics Best Practices
Practical Drawing for iOS Developers

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350