《Programming with Quartz》的笔记-第1页

 

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