Composition Modes

Материал из Wiki.crossplatform.ru

Перейти к: навигация, поиск
Image:qt-logo_new.png Image:qq-title-article.png
Qt Quarterly | Выпуск 17 | Документация


by Gunnar Sletta
Recent years have seen great improvements in computer graphics hardware,making it possible for developers to add advanced graphical features toapplications, such as composition modes and partial transparency,previously only used in specialized graphics applications.

Содержание

Composition modes, where an object blends the color properties ofunderlying objects with its own, are often used in graphical applicationsto inexpensively simulate translucency effects. However, they can also beused to create effects that are less realistic, but more useful in anon-screen environment.In this article we will look at some alternative ways of working withtransparency.

center

[править] Background

Composition modes were originally proposed by Thomas Porter and TomDuff in the article Compositing Digital Images in 1984. Itdescribes a model for combining the pixels in a source image with thepixels in a destination image. Porter and Duff proposed 12 basic compositionmodes -- the most common ones are Source, where the source pixelscompletely replace the destination pixels, and Source Over, where thesource pixels are alpha blended with the destination pixels.

The formulas for combining source and destination pixels look like these:

center

Where cdst and csrc represent colorcomponents of the destination and source, and adst andasrc represent the alpha components. Cdstand Csrc are the color componentspremultiplied by the alpha components. The functionf returns a value based on the source and destination color components,where the basic composition modes return either the source or destination colorcomponent.The parameters X, Y and Z are either 0 or 1. Permutationsof X, Y, Z, and f produce the various compositionmodes.

In the above diagram we show how source and destination images are combinedtogether for the various composition modes. To draw any of these modesone can use the following code:

QPainter p(&destImage);
p.setCompositionMode(mode);
p.drawImage(0, 0, sourceImage);

QPainter introduced support for the basiccomposition modes in Qt 4.0 and will most likely introduce support for theextended composition modes in a future version of Qt. Composition modes in Qtapply to all drawing operation done with QPainter, such as drawing a gradient-filledpath.

Composition modes are currently supported when using QPainter on a QImage on all platforms. It is also possibleto use QPixmap on Windows since Qt 4.0 andon X11 since Qt 4.1.

[править] Source and Destination

The simplest composition mode is Source, in which case the sourcepixels replace the destination pixels. This mode is used in QPainter when drawing opaque primitivesand images.

center

In this image we start out with a gray circle and draw three ellipseson top of it using Source. The effect is that each transparentellipses will "punch a hole" for itself in the destination image.

It should be noted that Source only writes the pixels, it does notperform any reads, so it is in general faster than the other composition modes.

The formula for Source is given by

center

Destination, which is the inverse of Source, is providedmostly for completeness. It leaves the destination pixel untouched andhas no visual effect.

The formula for Destination is given by

center

[править] Source Over and Destination Over

The Source Over and Destination Over composition modes areused for what we normally consider alpha blending.We demonstrate this with an initial image containing the text "Qt"and draw a red rectangle on top of it using either Source Over orDestination Over.

center

For Source Over the source is drawn on top of the destination so thatwhen an object is drawn it appears to be in front of what was there before.If the object is translucent the objects under it will shine through.

The formula for Source Over is given by

center
center

For Destination Over the source is drawn under the destination,so the objects in the source image appear to be painted behind whatwas already there in the destination image.

The formula for Destination Over is given by

center

[править] Source In and Destination In

The Source In and Destination In composition modes are usedfor masking one object with the alpha channel of another. The resultfrom a Source In composition is the source pixels merged with thealpha channel of the destination. We demonstrate this by paintinga source image onto a destination image containing the Qt 4 logo.

center

In the above diagram, the opaque rectangle filled with a linear gradientis drawn onto the Qt 4 logo using the Source In composition mode.The result is that the gradient filled rectangle is drawn in the placeswhere the Qt 4 logo is not transparent.

The formula for Source In is given by

center
center

In this case, the image containing a partially transparent radialgradient is drawn onto the Qt 4 logo using the Destination Incomposition mode. The result is that the alpha channel of the sourceis blended with the destination, causing the logo to fade out accordingto the radial gradient.

The formula for Destination In is given by

center

The effect of these composition modes is that the alpha channel ofthe source can be used to describe the alpha channel of the destination orvice versa. A typical application of this is to use a gradient to fadeout an image like we do with the Destination In example above.

[править] Source Out and Destination Out

The Source Out and Destination Out composition modes behavesimilarly to the Source In and Destination In compositionmodes except that they use the inverse of the alpha channel. Again, wedemonstrate this by painting a source image over a destination imagecontaining the Qt 4 logo.

center

In this case, we see that the gradient from the source image isonly drawn in the areas where the destination image is transparent; theresult is a copy of the source image with a hole cut out of it.

The formula for Source Out is given by

center
center

In the above diagram, we see that in the locations where the source image isopaque, it punches a hole in the destination image.

The formula for Destination Out is given by

center

The effect of these operations are that either source can be usedto punch a hole in the destination or vice versa. This is a maskingtechnique that can be used to easily create an inverse mask of anobject.

[править] Source Atop and Destination Atop

The Source Atop and Destination Atop composition modes combinethe alpha channels of the source and destination images, before blending thesource on top of the destination or vice versa.

center

In the above we draw an image containing an elliptical shape over animage containing a rectangular shape using the Source Atop mode.

The formula for Source Atop is given by

center
center

In this case, the Destination Atop mode was used to draw theellipse.

The formula for Destination Atop is given by

center

These modes can be used to colorize an existing object in theareas where it has opacity. Although the Atop composition modes maylook similar to the In modes, the difference lies in that the colorcomponents from both source and destination are used in the result, asopposed to In which uses only one.

[править] Clear

center

The Clear composition mode erases every pixel to fullytransparent.

This is mostly useful for clearing the background orparts of images to fully transparent. The three ellipses from theSource example now make an irregular hole in the background image.

The formula for Clear is given by

center

[править] Xor

The Xor composition mode combines the source and destination alphachannels in an XOR like manner. It differs from a bitwise exclusive ORin that it does a mathematical computation to decide the alpha channel.This means that certain bit patterns do not interfere with the result,and that translucent colors are blended together instead of beingcombined using a bitwise operator.

center

The above image contains a variation of the objects we used for theSource Atop example combined using the Xor composition mode.

The formula for Xor is given by

center

[править] Final Words

center

Composition modes have been available for a while in several high endimage manipulation programs, and now they are also available with QPainter. They can be used to create a variety ofpleasing effects, many of which can be found by just playing a little with thevarious parameters.

Take a look at the Qt 4 Composition Modes demo to seethe effects of each composition mode.

Qt's examples and demonstrations also highlight other aspects of thepaint system, and illustrate basic concepts in 2D graphics.

Whenever you feel you need to iterate through the pixels ofan image to manipulate its alpha channel or color components, first checkto see if there is a composition mode that already does what you want.


Copyright © 2006 Trolltech Trademarks