Core Graphics & More

Core Graphics


Core Graphics Tutorial Part 1: Getting Started

There are three fundamentals to know about paths:

  • A path can be stroked and filled.
  • A stroke outlines the path in the current stroke color.
  • A fill will fill up a closed path with the current fill color.
  1. Never call draw(_:) directly. If your view is not being updated, then call setNeedsDisplay() on the view.

setNeedsDisplay() does not itself call draw(_:), but it flags the view as ‘dirty’, triggering a redraw using draw(_:) on the next screen update cycle. Even if you call setNeedsDisplay() five times in the same method you’ll only ever actually call draw(_:) once.

  1. @IBDesignable — Live Rendering — change code then storyboard rendering
  2. @IBInspectable is an attribute you can add to a property that makes it readable by Interface Builder.

Core Graphics Tutorial Part 2: Gradients and Contexts

Drawing a Gradient — CGGradient
Transform Context & fill bezierPath

Core Graphics Tutorial Part 3: Patterns and Playgrounds

UIGraphicsBeginImageContextWithOptions()
UIColor(patternImage: image).setFill()



Quartz 2D Programming Guide


一、Overview of Quartz 2D

  1. The Page

drawing order is important.

  1. Drawing Destinations: The Graphics Context

you can draw the same image to a different device simply by providing a different graphics context to the same sequence of Quartz drawing routines.

  • bitmap graphics context
  • PDF graphics context
  1. Quartz 2D Opaque Data Types

CGLayerRef — for repeated drawing (such as for backgrounds or patterns) and for offscreen drawing.

  1. Graphics States

CGContextSaveGState + CGContextRestoreGState
the current path is not considered part of the graphics state

Parameters
Current transformation matrix (CTM)
Clipping area
Line: width, join, cap, dash, miter limit
Accuracy of curve estimation (flatness)
Anti-aliasing setting
Color: fill and stroke settings
Alpha value (transparency)
Rendering intent
Color space: fill and stroke settings
Text: font, font size, character spacing, text drawing mode
Blend mode
  1. Quartz 2D Coordinate Systems
    In particular, patterns and shadows, which are not affected by the CTM, are adjusted separately so that their conventions match UIKit’s coordinate system.

  2. Memory Management: Object Ownership
    Rules:

  • If you create or copy an object, you own it, and therefore you must release it. That is, in general, if you obtain an object from a function with the words “Create” or “Copy” in its name, you must release the object when you’re done with it. Otherwise, a memory leak results.

  • If you obtain an object from a function that does not contain the words “Create” or “Copy” in its name, you do not own a reference to the object, and you must not release it. The object will be released by its owner at some point in the future.

  • If you do not own an object and you need to keep it around, you must retain it and release it when you’re done with it. You use the Quartz 2D functions specific to an object to retain and release that object. For example, if you receive a reference to a CGColorspace object, you use the functions CGColorSpaceRetain and CGColorSpaceRelease to retain and release the object as needed. You can also use the Core Foundation functions CFRetain and CFRelease, but you must be careful not to pass NULL to these functions.

二、Graphics Contexts

  • 用CG的原因:只是用图片或是图层效果不能轻易地绘制出矢量图形

  • Core Graphics绘制 - 如果对视图实现了-drawRect:方法,或者CALayerDelegate的-drawLayer:inContext:方法,那么在绘制任何东西之前都会产生一个巨大的性能开销。为了支持对图层内容的任意绘制,Core Animation必须创建一个内存中等大小的寄宿图片。然后一旦绘制结束之后,必须把图片数据通过IPC传到渲染服务器。在此基础上,Core Graphics绘制就会变得十分缓慢,所以在一个对性能十分挑剔的场景下这样做十分不好。

  1. Drawing to a View Graphics Context in iOS

UIView - drawRect: — The UIView object modifies the CTM of the Quartz graphics context to match the UIKit conventions

  1. Creating a Window Graphics Context in Mac OS X
  2. Creating a PDF Graphics Context
  3. Creating a Bitmap Graphics Context

UIGraphicsBeginImageContextWithOptions
CGBitmapContextCreate() — all params

Tip: When you create a bitmap graphics context, you’ll get the best performance if you make sure the data and bytesPerRow are 16-byte aligned.

The constant kCGImageAlphaPremultipliedLast indicates that the alpha component is stored in the last byte of each pixel and that the color components have already been multiplied by this alpha value.

三、Paths

  1. Path Creation and Path Painting

fill + stroke

  1. The Building Blocks

Lines — CGContextMoveToPoint + CGContextAddLineToPoint + CGContextAddLines
Arcs — CGContextAddArc + CGContextAddArcToPoint
cubic Bézier curve — CGContextAddCurveToPoint
quadratic Bézier curve — CGContextAddQuadCurveToPoint

Ellipses — CGContextAddEllipseInRect
Rectangles — CGContextAddRect + CGContextAddRects

  1. Creating a Path

Before you begin a new path, call the function CGContextBeginPath

Quartz provides two data types for creating reusable pathsCGPathRef and CGMutablePathRefCGPathCreateMutable

CGContextAddPath + CGContextReplacePathWithStrokedPath

  1. Painting a Path

<1> Parameters That Affect Stroking

Parameter Function to set parameter value
Line width CGContextSetLineWidth
Line join CGContextSetLineJoin
Line cap CGContextSetLineCap
Miter limit CGContextSetMiterLimit
Line dash pattern CGContextSetLineDash
Stroke color space CGContextSetStrokeColorSpace
Stroke color CGContextSetStrokeColorCGContextSetStrokeColorWithColor
Stroke pattern CGContextSetStrokePattern

<2> Functions for Stroking a Path

Function
CGContextStrokePath
CGContextStrokeRect
CGContextStrokeRectWithWidth
CGContextStrokeEllipseInRect
CGContextStrokeLineSegments
CGContextDrawPath

<3> Filling a Path
i. the nonzero winding number rule — left->right+1, right->left-1
ii. even-odd rule — odd-painted, even-not painted

Function Description
CGContextEOFillPath Fills the current path using the even-odd rule
CGContextFillPath Fills the current path using the nonzero winding number rule
CGContextFillRect Fills the area that fits inside the specified rectangle
CGContextFillRects Fills the areas that fits inside the specified rectangles
CGContextFillEllipseInRect Fills an ellipse that fits inside the specified rectangle
CGContextDrawPath Fills the current path if you pass kCGPathFill (nonzero winding number rule) or kCGPathEOFill (even-odd rule). Fills and strokes the current path if you pass kCGPathFillStroke or kCGPathEOFillStroke

<4> Setting Blend Modes

CGContextSetBlendMode
kCGBlendModeNormal
kCGBlendModeMultiply
kCGBlendModeScreen
kCGBlendModeOverlay
kCGBlendModeDarken
kCGBlendModeLighten
  1. Clipping to a Path
Clip Path
CGContextClip
CGContextEOClip
CGContextClipToRect
CGContextClipToRects
CGContextClipToMask


四、Color and Color Spaces

  1. About Color and Color Spaces
  2. The Alpha Value
  3. Creating Color Spaces
Creating Device-Independent Color Spaces
CGColorSpaceCreateLab
CGColorSpaceCreateICCBased
CGColorSpaceCreateCalibratedRGB
CGColorSpaceCreateCalibratedGray
Creating Generic Color Spaces
kCGColorSpaceGenericGray
kCGColorSpaceGenericRGB
kCGColorSpaceGenericCMYK
Creating Device Color Spaces
CGColorSpaceCreateDeviceGray
CGColorSpaceCreateDeviceRGB
CGColorSpaceCreateDeviceCMYK
Creating Indexed and Pattern Color Spaces
CGColorSpaceCreateIndexed
CGColorSpaceCreatePattern
Setting and Creating Colors
CGContextSetFillColorSpace
CGContextSetStrokeColorSpace
CGContextSetStrokeColorWithColor
CGContextSetFillColorWithColor
CGColorCreate
  1. Setting Rendering Intent
CGContextSetRenderingIntent
kCGRenderingIntentDefault
kCGRenderingIntentAbsoluteColorimetric
kCGRenderingIntentRelativeColorimetric
kCGRenderingIntentPerceptual
kCGRenderingIntentSaturation


五、Transforms

  1. About Quartz Transformation Functions
  2. Modifying the Current Transformation Matrix
Modifying CTM
CGContextDrawImage
CGContextTranslateCTM
CGContextRotateCTM
CGContextScaleCTM
CGContextConcatCTM
#include <math.h>
static inline double radians (double degrees) {return degrees * M_PI/180;}
  1. Creating Affine Transforms
Function
CGAffineTransformMakeTranslation
CGAffineTransformTranslate
CGAffineTransformMakeRotation
CGAffineTransformRotate
CGAffineTransformMakeScale
CGAffineTransformScale
Function
CGAffineTransformInvert
CGPointApplyAffineTransform
CGSizeApplyAffineTransform
CGRectApplyAffineTransform
  1. Evaluating Affine Transforms
    CGAffineTransformEqualToTransform
    CGAffineTransformIsIdentity

  2. Getting the User to Device Space Transform

CGContextGetUserSpaceToDeviceSpaceTransform
CGContextConvertPointToDeviceSpace & CGContextConvertPointToUserSpace
CGContextConvertSizeToDeviceSpace & CGContextConvertSizeToUserSpace
CGContextConvertRectToDeviceSpace & CGContextConvertRectToUserSpace
  1. The Math Behind the Matrices

六、Patterns

  1. The Anatomy of a Pattern

  2. Colored Patterns and Stencil (Uncolored) Patterns
    Colored patterns have inherent colors associated with them, but Stencil (Uncolored) Patterns not.
    as part of the pattern cell creation process + as part of the pattern drawing process.

  3. Tiling

  4. How Patterns Work
    CGContextSetFillColor + CGContextFillRect
    CGContextSetFillPattern + CGContextFillRect

<1> Saves the graphics state.
<2> Translates the current transformation matrix to the origin of the pattern cell.
<3> Concatenates the CTM with the pattern matrix.
<4> Clips to the bounding rectangle of the pattern cell.
<5> Calls your drawing callback to draw the pattern cell.
<6> Restores the graphics state.

  1. Painting Colored Patterns

<1> Write a Callback Function That Draws a Colored Pattern Cell
— typedef void (*CGPatternDrawPatternCallback) (void *info, CGContextRef context);

<2> Set Up the Colored Pattern Color Space
— CGColorSpaceCreatePattern + CGContextSetFillColorSpace

<3> Set Up the Anatomy of the Colored Pattern
— CGPatternRef CGPatternCreate ( void *info, …)

<4> Specify the Colored Pattern as a Fill or Stroke Pattern
— CGContextSetFillPattern + CGContextSetStrokePattern

<5> Draw With the Colored Pattern
— CGContextSetFillPattern (myContext, myPattern, &alpha);

  1. Painting Stencil Patterns

七、Shadows

  1. How Shadows Work
    CGContextSetShadow + CGContextSetShadowWithColor
  2. Shadow Drawing Conventions Vary Based on the Context
  3. Painting with Shadows

八、Gradients

  • CGShadingRef and CGGradientRef
  1. Axial and Radial Gradient Examples

  2. A Comparison of CGShading and CGGradient Objects

<1> CGShading

CGFunctionRef(for computing colors in the gradient) -> CGShadingRef -> CGContextDrawShading

<2> CGGradient — subset of CGShading

<3>

CGGradient CGShading
Can use the same object to draw axial and radial gradients Need to create separate objects for axial and radial gradients
Set the geometry of the gradient at drawing time Set the geometry of the gradient at object creation time
Quartz calculates the colors for each point in the gradient You must supply a callback function that calculates the colors for each point in the gradient
Easy to define more than two locations and colors Need to design your callback to use more than two locations and colors, so it takes a bit more work on your part
  1. Extending Color Beyond the End of a Gradient

  2. Using a CGGradient Object
    <1> CGGradient
    <2> CGContextDrawLinearGradient or CGContextDrawRadialGradient

  3. *Using a CGShading Object
    <1> CGShadingCreateAxial or CGShadingCreateRadial


九、Transparency Layers

— The resulting composite is treated as a single object. Ex: shadow

  1. How Transparency Layers Work
    CGContextBeginTransparencyLayer
    CGContextEndTransparencyLayer

  2. Painting to a Transparency Layer

十、Data Management in Quartz 2D

  1. Moving Data into Quartz 2D
  • CGImageSourceRef(preferred way)

<1> CGImageSourceCreateImageAtIndex, CGImageSourceCreateThumbnailAtIndex, or CGImageSourceCreateIncremental.

<2> CGImageSourceUpdateData or CGImageSourceUpdateDataProvider.

<3> CGImageSourceGetCount , CGImageSourceCopyProperties, and CGImageSourceCopyTypeIdentifiers.

  • CGDataProviderRef

<1> CGImageCreate, CGImageCreateWithPNGDataProvider, or CGImageCreateWithJPEGDataProvider.

<2> CGPDFDocumentCreateWithProvider.

<3> CGImageSourceUpdateDataProvider

  1. Moving Data out of Quartz 2D

<1> CGImageDestinationAddImage or CGImageDestinationAddImageFromSource.

<2> CGImageDestinationSetProperties.

<3> CGImageDestinationCopyTypeIdentifiers or CGImageDestinationGetTypeID.

<1> CGPDFContextCreate.

<2> CGImageDestinationCreateWithDataConsumer

  1. Moving Data Between Quartz 2D and Core Image in Mac OS X

十一、Core Graphics Layer Drawing

<1> High-quality offscreen rendering of drawing that you plan to reuse.
<2> Repeated drawing.
<3> Buffering

  1. How Layer Drawing Works

CGLayerCreateWithContext + CGLayerGetContext
CGContextDrawLayerInRect or CGContextDrawLayerAtPoint

  1. Drawing with a Layer

<1> Create a CGLayer Object Initialized with an Existing Graphics Context

<2> Get a Graphics Context for the Layer

<3> Draw to the CGLayer Graphics Context

<4> Draw the Layer to the Destination Graphics Context

  1. Example: Using Multiple CGLayer Objects to Draw a Flag

十二、Text

十三、Todolist

Bitmap Images and Image Masks



Swift Functional Programming Tutorial

Briefly put, functional programming is a programming paradigm that emphasizes calculations via mathematical-style functions, immutability and expressiveness, and minimizes the use of variables and state.

  • .filter — 遍历所有,用colure过滤
func isEven(number: Int) -> Bool {
    return number % 2 == 0
}
evens = Array(1...10).filter(isEven)
var evens = Array(1...10).filter { (number) in number % 2 == 0 }
evens = Array(1...10).filter { $0 % 2 == 0 }
func myFilter<T>(source: [T], predicate:(T) -> Bool) -> [T] {
    var result = [T]()
    for i in source {
         if predicate(i) {
            result.append(i)
        }
    }
    return result
}


  • .reduce — reduce function, which takes a set of inputs and generates a single output.
    — 遍历所有,item+initValue,下次遍历
evenSum = Array(1...10)
            .filter { (number) in number % 2 == 0 }
            .reduce(0) { (total, number) in total + number }
let maxNumber = Array(1...10)
                  .reduce(0) { (total, number) in max(total, number) }
let numbers = Array(1...10)
                  .reduce("numbers: ") {(total, number) in total + "\(number) "}
extension Array {
    func myReduce<T, U>(seed:U, combiner:(U, T) -> U) -> U {
        var current = seed 
        for item in self {
            current = combiner(current, item as T)
        }
        return current
    }
}



.map — 遍历所有,

func buildIndex(words: [String]) -> [Entry] {
    let letters = words.map {
        (word) -> Character in
        Character(word.substringToIndex(advance(word.startIndex, 1)
         ).uppercaseString)
     }
     println(letters)
     return [Entry]()
}
func distinct<T: Equatable>(source: [T]) -> [T] {
    var unique = [T]()
    for item in source {
        if !contains(unique, item) {
            unique.append(item)
        }
     }
    return unique
}
func buildIndex(words: [String]) -> [Entry] {
    let letters = words.map {
        (word) -> Character in
        Character(word.substringToIndex(advance(word.startIndex, 1)
        ).uppercaseString)
    }

    let distinctLetters = distinct(letters)

    return distinctLetters.map {
        (letter) -> Entry in
        return (letter, words.filter {
            (word) -> Bool in
            Character(word.substringToIndex(advance(word.startIndex, 1)
            ).uppercaseString) == letter
        })
    }
}
func buildIndex(words: [String]) -> [Entry] {
    func firstLetter(str: String) -> Character {
        return Character(str.substringToIndex(
            advance(str.startIndex, 1)).uppercaseString)
 }

 let letters = words.map {
     (word) -> Character in
     firstLetter(word)
 }

let distinctLetters = distinct(letters)
    return distinctLetters.map {
        (letter) -> Entry in
            return (letter, words.filter {
                (word) -> Bool in
                firstLetter(word) == letter
            })
     }
}
func buildIndex(words: [String]) -> [Entry] {
    func firstLetter(str: String) -> Character {
        return Character(str.substringToIndex(
            advance(str.startIndex, 1)).uppercaseString)
}

 return distinct(words.map(firstLetter))
    .map {
        (letter) -> Entry in
        return (letter, words.filter {
            (word) -> Bool in
            firstLetter(word) == letter
         })
     }
}

You should strive for immutability; immutable types are easier to test and aid concurrency.




Introducing Core ML

Training
Tempalte -> Learning Algorithm -> Model

image.png

Vision — Object Tracking

Core ML
Model -> get -> from open source
Drag -> instantiate

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

推荐阅读更多精彩内容