Programming with Quartz

按有用程度 按页码先后 最新笔记

• 

  第1页

  lich0079

  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) // 设置颜色 CGC... (更多)

  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 (收起)

  2011-10-10 15:16:48   回应

  收藏

  推荐

• 

  第1页

  lich0079

  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) // 设置颜色 CGC... (更多)

  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 (收起)

  2011-10-10 15:16:48   回应

  收藏

  推荐

• 

  第1页

  lich0079

  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) // 设置颜色 CGC... (更多)

  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 (收起)

  2011-10-10 15:16:48   回应

  收藏

  推荐