Apple Developer Connection
Member Login Log In | Not a Member? Contact ADC

< Previous PageNext Page > Hide TOC

Color Blend Modes

CopyBits uses transfer modes to combine pixels in a source and destination image in different ways. As stated earlier, Quartz has no replacement for QuickDraw transfer modes. But depending on what you want to achieve, Quartz blend modes might provide the answer. In Quartz, compositing is based on alpha information. A graphics context has a global alpha parameter that determines the opacity of any object that’s drawn, including images. In addition, an image can have its own alpha channel that determines the opacity of each pixel when the image is composited with the background.

In Mac OS X v10.4 and later, Quartz provides an additional compositing parameter, called the blend mode, that determines how source and background colors interact. (Quartz blend modes are based on PDF blend modes.) You can use the blend mode to get special compositing effects such as tinting and colorizing when drawing images. The blend mode is a part of the graphics state in a context, and you can change it by passing a constant to the function CGContextSetBlendMode.

When the blend mode is the default value (kCGBlendModeNormal), the blend color is simply the source color. In the normal blend mode Quartz performs alpha blending by combining the components of the source color with the components of the destination color using the formula:

destination = (alpha * source) + (1 - alpha) * destination

Other blend modes combine source and background colors in various ways. For example, the darken blend mode selects the darker of the source and background colors. While blend modes and transfer modes are not the same mathematically, there may be some blend modes that could be used as replacements for transfer modes.

Blend modes are described in detail in Quartz 2D Programming Guide. In the next two sections you’ll see how you can use the color blend mode to colorize an image and the lighten blend mode to show part of an image. But for detailed information about using all the Quartz blend modes, including examples of the sorts of results you can get, see Setting Blend Modes. If you depend heavily on transfer modes for advanced imaging effects, also take a look at the Core Image Programming Guide, which describes Core Image blend mode filters.

In this section:

Colorizing an Image
Showing Part of an Image


Colorizing an Image

One way that you can use the color blend mode is to colorize an image. Draw the image you want to colorize. Then set the blend mode by passing the constant kCGBlendModeColor to the function CGContextSetBlendMode. Draw and fill a rectangle (or other shape) using the color you want to use for colorizing the image. The code in Listing 2-2 draws a fully opaque red rectangle (see Figure 2-2) over the image of the jumper, to achieve the result shown on the right side of the figure. Note that the entire image of the jumper is not colorized because the red rectangle is smaller than the image.

Listing 2-2  Code that uses the color blend mode

 CGContextSaveGState (context);
 CGContextDrawImage(context, myRect1, image);
 CGContextSetBlendMode(context, kCGBlendModeColor);
 CGContextSetRGBFillColor (context, 0.8, 0.0, 0.0, 1.0);
 CGContextFillRect (context, myRect2);
 CGContextSaveGState (context);

Figure 2-2  A jumper, a red rectangle, and the jumper image colorized

A jumper, a red rectangle, and the jumper image colorized

Showing Part of an Image

Another interesting effect you can achieve by using a blend mode is to show only a portion of an image. Normally you would achieve this effect using clipping. You use the lighten blend mode and an opaque black shape that defines the area of the image that you want to show. As shown in Listing 2-3, you fill a shape (here the code uses a rectangle) with opaque black, set the blend mode to kCGBlendModeLighten, and then draw the image. Figure 2-3 shows the rectangle, the original image of a jumper, and the resulting image. The part of the image you can see coincides exactly with the rectangle.

Listing 2-3  Code that uses the lighten blend mode to show part of an image

 CGContextSaveGState (context);
 CGContextSetRGBFillColor (context, 0.0, 0.0, 0.0, 1.0);
 CGContextFillRect (context, myRect);
 CGContextSetBlendMode (context, kCGBlendModeLighten);
 CGContextDrawImage (context, contextRect, image);
 CGContextRestoreGState (context);

Figure 2-3  An opaque black rectangle, a jumper, and the resulting image

An opaque black rectangle, a jumper, and the resulting image



< Previous PageNext Page > Hide TOC


Last updated: 2006-09-05




Did this document help you?
Yes: Tell us what works for you.

It’s good, but: Report typos, inaccuracies, and so forth.

It wasn’t helpful: Tell us what would have helped.
Get information on Apple products.
Visit the Apple Store online or at retail locations.
1-800-MY-APPLE

Copyright © 2007 Apple Inc.
All rights reserved. | Terms of use | Privacy Notice