Quartz 2D (ProgrammingWithQuartz) note

阅读更多

http://www.evernote.com/shard/s20/sh/c54af718-b04e-4645-b482-9fd1012160ef/809d946e19b8fd1f0d78b82e7157cf88

 

书链接: http://book.douban.com/subject/2003121/

 

 

Context 上下文  画板   可以是window  printer  bitmap  显示屏

 

Filling 填充

alpha (opacity)  不透明度 1为不透明  0透明  此属性决定能否看到下面的画面

opaque 不透明

stroking  画边框  在rectangle的边框（此边框无限thin）2侧画线  线有宽度

CGContextRef context = UIGraphicsGetCurrentContext();   // drawRect 方法中拿到context

CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0)   // 设置颜色

CGContextFillRect(context, ourRect);   //填充

CGContextSetRGBStrokeColor(context, 0.482, 0.62, 0.871, 1.0);

CGContextStrokeRectWithWidth(context, ourRect, 3.0);   // 画边框 设置边框宽度3.0

边框是画在2侧的 所以画完框在填充 会把内侧的边框覆盖掉

CGContextTranslateCTM

CGContextScaleCTM

CGContextRotateCTM

arbitrary  任意的

path   任何图像都是由path构成的a sequence of lines and curves that make up a shape, and then performing painting operations on that path

CGContextBeginPath  用空白路径替换context中已存在路径  replaces any existing path in the context with an empty path

CGContextMoveToPoint   path的起点   establishes the first point on the path and makes that the current point

CGContextAddLineToPoint  画线   add a line segment from the existing current point to the point passed to CGContextAdd- LineToPoint 

CGContextClosePath    在当前点和起点之间画一条线 完成一个shape.   This function adds a straight line segment from the current point to the initial point on the path

CGContextDrawPath    path不会产生任何图像  draw才会，同时这个方法也会清除path。 actually paint the stroked, filled, and stroked-and-filled paths， also clears the path from the context

kCGPathFill   kCGPathStroke   kCGPathFillStroke   //This type of fill-then-stroke operation is so common that Quartz defines the special kCGPathFillStroke painting mode used here

CGContextTranslateCTM(context, 200.0, 0.0);   坐标偏移x轴正向200, 之后的draw都依据改变后的坐标  Drawing performed after calling CGContextTranslateCTM takes place in the transformed coordinate system.

CGContextSetLineWidth      sets the width of the stroke 

CGContextSaveGState(context);   保持context当前状态

CGContextRestoreGState(context); 回复context状态

CGContextRotateCTM(context, rotateAngle);   旋转坐标系 顺时针 单位是radians  一圈是2*M_PI

// 画点线

CGContextSetLineDash(context, 0., lengths, 4); //第2个参数 指定起点坐标是多少，假如是18（lengths[0]+lengths[1]）,那么第一个点实际是5（lengths[2]）了，  第4个参数指的用几个lengths(必须小于length总长度)

float lengths[6] = { 12.0, 6.0, 5.0, 6.0, 5.0, 6.0 };

Clipping  裁剪

Setting up a clipping area requires creating a path to clip to, then calling the function CGContextClip to tell Quartz to constrain drawing to the area inside that path.  裁剪时先指定一个path, 然后执行裁剪方法

CGContextBeginPath(context);

CGContextAddRect(context, ourRect); 

CGContextClip(context)

CGContextClipToRect    //clipping to a rectangle specified by a CGRect

CGContextAddArc(context, circleCenter.x, circleCenter.y, circleRadius, startingAngle, endingAngle, 0);  画圆， 参数：圆心，半径， 起始角度，终点角度, 最后一个应该是否顺时针

CGContextScaleCTM(context, 1, -1);   放缩坐标   -1是倒转坐标Y轴

Window context

Bitmap graphics context

PDF graphics context

PostScript context

GLContext context

You can perform the same drawing without regard to the type of context that you are drawing to. You do the drawing and Quartz takes care of converting that drawing into the best representation for the device, or context, into which you are drawing. Device independence is one of the most powerful features of Quartz.

Using the NSImage class to draw images can result in the creation of multiple CGImage objects when drawing a given image. This produces larger PDF doc- uments since drawing the same NSImage to a given PDF context multiple times does not produce a single copy of the image data. In addition, JPEG image data is not treated specially by NSImage; therefore, during PDF genera- tion, uncompressed data is written to the PDF document

User Space and Device Space

For a PDF context, the size of a default user space unit is 1/72 of an inch, a unit of measure called a point. For a printing context, 1 user space unit is a point, regardless of the resolution of the output device used for printing. This means that for a printing context corresponding to a 300-dpi raster printer, 1 user space unit is 1/72 of an inch, so 72 user space units equals 1 inch or 300 device pixels.

The term point has its origins in the printing industry where historically the size of a printer point was approximately 1/72 of an inch. Quartz has adopted the same definition of a point as the PostScript and PDF imaging models with 1 point being exactly 1/72 of an inch.

Because Quartz drawing calls take user space coordinates as parameters and the output device coordinates are in device space, Quartz must map all user space coordinates into device space coordinates as part of its rendering. By providing an abstract user space coordinate system and taking care of the mapping of those coordinates onto the output device, Quartz provides a device-independent coor- dinate system. The coordinate mapping performed by Quartz also provides the flexibility of additional user space transformations, such as the translation, rota- tion, and scaling of coordinates as seen in the examples in “Quartz 2D Drawing Basics” (page 15).

current transformation matrix    // CTM

CGAffineTransform   //   This data structure consists of six floating-point values: a, b, c, d, tx, and ty.

x′ = a * x + c * y + tx

y′ = b * x + d * y + ty

一个不对称的坐标缩放，接上一个旋转会制造一个倾斜的坐标系  Nonuniform scaling of a coordinate system, followed by a rotation, produces a skew or shear to the coordinate axes

// alpha is 22.5 degrees and beta is 15 degrees. 

float alpha = M_PI/8, beta = M_PI/12;

CGAffineTransform skew = CGAffineTransformMake(1, tan(alpha), tan(beta), 1, 0, 0);

CGContextConcatCTM(context, skew);

所有的Quartz绘画分为3类， 画线，图像， 文字。  All Quartz drawing falls into of one of three fundamental categories: line art (graphics that consist of paths that are filled, stroked, or both), sampled images, and text.

quadratic 二次

cubic 立方体

Path  可以是open，  closed, 有方向(direction)

一个Path可以有许多subpath 这些subpath未必相连, CGContextMoveToPoint 就创建了一个subpath

    CGContextSetRGBStrokeColor(context, 0, 0, 1, 0.7);

    CGContextBeginPath(context);

    

    CGContextMoveToPoint(context, 0, 0);

    CGContextAddLineToPoint(context, 30, 40);

    

    CGContextMoveToPoint(context, -20, 10);

    CGContextAddLineToPoint(context, 100, 70);

   

    CGContextDrawPath(context, kCGPathStroke); 

所以的path都由下面5种基本方法创建  All paths in Quartz can be constructed using one or more of the following five basic path construction primitive functions,

I CGContextMoveToPoint begins a new subpath in the current path.

I CGContextAddLineToPoint adds a straight line segment to the current path.

I CGContextAddCurveToPoint adds a cubic Bézier curve segment to the current path.

I CGContextAddQuadCurveToPoint adds a quadratic Bézier curve segment to the current path.

I CGContextClosePath ends the current path.  // 在当前点和起点之间画一条线

CGContextBeginPath.   clear path

Cubic Bézier curves are defined by two endpoints together with two additional control points.

P(t) = (1 – t)3P0 + 3t (1 – t)2C1 + 3t2(1 – t)C2 + t3P1

CGContextAddCurveToPoint(context, c1.x, c1.y, c2.x, c2.y, p1.x, p1.y);

quadratic Bézier curve are defined by two endpoints and a single control point

P(t) = (1 – t)2P0 + 2t(1 – t)C + t2P1

CGContextAddQuadCurveToPoint(<#CGContextRef c#>, <#CGFloat cpx#>, <#CGFloat cpy#>, <#CGFloat x#>, <#CGFloat y#>)

CGContextClosePath 执行的时候看起点和最后一点是不是在一起， 不在一起的话会添加一条线把她们连起来。 Quartz subpaths are either open or closed. A closed subpath has its initial point connected to the last point on the subpath. The function CGContextClosePath connects the last point on the subpath with the initial point on the subpath

CGContextAddRect

CGContextAddRects

CGContextAddLines

CGContextAddArc   //The result- ing subpath is open; you must call CGContextClosePath if you want to close it. 如果之前有点的话， 会在此点和圆的起点连一条线 

CGContextAddEllipseInRect

CGContextFillEllipseInRect

CGContextStrokeEllipseInRect

CGContextStrokeLineSegments

CGContextStrokeRect

CGContextStrokeRectWithWidth

CGContextFillRect

CGContextFillRects

CGContextClipToRect

CGContextClipToRects

line width    //line width is affected by the scaling aspects of the CTM

line join   //  three different types of joins—miter, round, or bevel        kCGLineJoinMiter, kCGLineJoinRound, or kCG- LineJoinBevel

line cap    // butt, square, or rounded    kCGLineCap- Butt, kCGLineCapSquare, or kCGLineCapRound

line dash

Filling a path

Filling 是填充path的内部， 但复杂path的内部不好判断. Quartz defines two distinct rules to determine the interior of a path. You choose which rule to apply when filling a path—the non- zero winding number rule or the even-odd (kCGPathEOFillStroke) rule  

CGPathRef

CGMutablePathRef path = CGPathCreateMutable();

CGPathAddArc(path, &theTransform, 0., 0., 45., 0., 2*M_PI, false); 

CGPathCloseSubpath(path);

utility

CGContextSetAllowsAntialiasing

CGContextGetPathBoundingBox

CGRectNull

CGRectEqualToRect

CGContextIsPathEmpty

CGContextGetPathCurrentPoint

CGPointZero

CGContextReplacePathWithStrokedPath

CGContextPathContainsPoint     // 看点在path内不

Color  包括颜色组件，透明度     还有全局透明度 //Quartz supports a global alpha, applied to all drawing

graphics state

  Fill and stroke colors

  current transformation matrix (CTM)

  the clipping area, the font, and more than a dozen other parameters

Color Spaces 

    RGB uses three—red, green, and blue

     CMYK uses four—cyan, magenta, yellow, and black

Quartz color spaces fall into three basic categories

  Calibrated color spaces specify color  is reproduc- ible across a wide range of output devices.  ICCBased, CalibratedGray, CalibratedRGB, and Lab color spaces.

   Device-dependent color spaces      DeviceGray, DeviceRGB, and DeviceCMYK color spaces

   Special color spaces      Pattern color space   Indexed color space

intrinsic自带

Quartz also uses the current fill color space and fill color component values when painting images without intrinsic color

 

CGContextSetRGBFillColor implicitly uses the DeviceRGB color space 

CGColorSpaceRef

CGColorRef

CGColorSpaceRef deviceRGB = CGColorSpaceCreateDeviceRGB();

float opaqueRed[] = {0.663, 0.0, 0.031, 1.0}

CGContextSetFillColorSpace(context, theColorSpace);

CGContextSetFillColor(context, opaqueRed);

Fill alpha = 0.25 

Global alpha = 0.5 

Effective alpha = .125

CGDataProviderCreateWithURL

CGDataProviderCreateWithData

CGDataProviderCreate

CGDataProviderCreateDirectAccess

CGDataProviderCreateWithCFData

CGImageCreateWithJPEGDataProvider

CGImageCreateWithPNGDataProvider

CGImageCreate

CGImageSourceCreateWithDataProvider

CGImageSourceCreateWithData

CGImageSourceCreateWithURL

GraphicsImportCreateCGImage

CFURLRef url = …..;

CGRect jpgRect;

CGImageRef jpgImage = NULL;

CGDataProviderRef jpgProvider = CGDataProviderCreateWithURL(url);

jpgImage = CGImageCreateWithJPEGDataProvider(jpgProvider, NULL,  true, kCGRenderingIntentDefault);

CGDataProviderRelease(jpgProvider);

jpgRect = CGRectMake(0., 0.,  CGImageGetWidth(jpgImage)/4, CGImageGetHeight(jpgImage)/4);

CGContextDrawImage(context, jpgRect, jpgImage);

image mask, masking image,  and  mask

stencil 模板

image mask 就是模板图片  就象在白纸上盖上模板， 然后喷漆，纸上就会留下印迹

The terms  image mask, masking image,  and  mask  are interchange- able terms to describe an image whose sample values indicate a percentage of paint to apply but not the color of the paint itself. Such an image is sometimes called a  stencil mask  because the mask does not itself have any intrinsic color; instead, color “pours” through the stencil. An image mask has only one compo- nent value, the coverage value.

1bit mask只显示on/off，  8bit可以显示色深，

An image mask can be 1, 2, 4, or 8 bits per sample. A sample value that decodes to  0  allows paint to go through it—it’s the “hole” in the stencil. A sample value that decodes to  1  doesn’t allow paint through—it’s the solid part of the stencil. A 1-bit mask, by definition, has only “on/off” options—0 or  1.  Deeper masks, such as an 8-bit mask, can contain intermediate values (0 <  x  <  1)  that specify grada- tions of paint that get through the mask, with lower values allowing more paint than higher values.

Quartz provides three masking devices that can control how pixels are painted— image masks, images that are used for the purpose of masking another image, and masking colors.

Text

CGContextSelectFont      sets both the font and the font size

CGContextSetFont          sets only the font

text space         Quartz text is drawn in a special coordinate system called  text space

text matrix        an affine transform that maps text space coordinates into user space coordinates