美文网首页iOS UI 心得经
iOS UI 优化 - Core Graphics

iOS UI 优化 - Core Graphics

作者: JackJin | 来源:发表于2019-06-14 14:58 被阅读0次

    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

    相关文章

      网友评论

        本文标题:iOS UI 优化 - Core Graphics

        本文链接:https://www.haomeiwen.com/subject/qyqpfctx.html