FireMonkey Image Effects

From RAD Studio
Jump to: navigation, search

Go Up to FireMonkey Applications Guide

The FireMonkey built-in ImageFX engine provides over 50 GPU-powered effects. These effects are nonvisual components that can be found in the Effects category on the Tool Palette. All the provided effects can be simply enabled or disabled by setting the Enabled flag from the Form Designer, or programmatically.

Almost all the effects have specific properties that you can customize depending on the application. For example, all transition effects have the Progress property, which is used to set the amount of progress (in percentages, %) through the transition from the first texture to the second texture. The specified properties can be found in the Object Inspector when the effect is selected in the Structure View. All numeric properties of any effect can be animated to provide a gradual evolution in time. Image effects can also be triggered.

FireMonkey effects are built using shader filters. The shaders modify pixels, either individually or in concert with others, to achieve various visual effects. These effects are not limited to bitmap image data; effects can be applied to the pixels of any 2D control in the user interface. Effects can be used at run time or at design time to change the look of the user interface of the application. The FireMonkey effects do not disable any controls or functionalities when they are applied.

For more information about applying a FireMonkey effect, see Applying FireMonkey Image Effects.

Kinds of Image Effects

The provided subclasses of TEffect fall into the categories listed in the following table. Each category is further described and illustrated later in this topic.

Effects that modify
pixels individually
Effects that consider
the neighbors of a pixel
Additive effects Effects that modify
the image as a whole
Transition effects

TInvertEffect.png TInvertEffect

TColorKeyAlphaEffect.png TColorKeyAlphaEffect

TMaskToAlphaEffect.png TMaskToAlphaEffect

TMonochromeEffect.png TMonochromeEffect

TBloomEffect.png TBloomEffect

TGloomEffect.png TGloomEffect

TContrastEffect.png TContrastEffect

THueAdjustEffect.png THueAdjustEffect

TFillRGBEffect.png TFillRGBEffect

TFillEffect.png TFillEffect

Blur

TBlurEffect.png TBlurEffect

TDirectionalBlurEffect.png TDirectionalBlurEffect

TBoxBlurEffect.png TBoxBlurEffect

TGaussianBlurEffect.png TGaussianBlurEffect

TRadialBlurEffect.png TRadialBlurEffect

Distortions

TBandedSwirlEffect.png TBandedSwirlEffect

TBandsEffect.png TBandsEffect

TMagnifyEffect.png TMagnifyEffect

TPinchEffect.png TPinchEffect

TRippleEffect.png TRippleEffect

TSmoothMagnifyEffect.png TSmoothMagnifyEffect

TSwirlEffect.png TSwirlEffect

TWaveEffect.png TWaveEffect

TWrapEffect.png TWrapEffect

TGlowEffect.png TGlowEffect

TInnerGlowEffect.png TInnerGlowEffect

TReflectionEffect.png TReflectionEffect

TShadowEffect.png TShadowEffect

TEmbossEffect.png TEmbossEffect

TPaperSketchEffect.png TPaperSketchEffect

TPencilStrokeEffect.png TPencilStrokeEffect

TPixelateEffect.png TPixelateEffect

TSepiaEffect.png TSepiaEffect

TSharpenEffect.png TSharpenEffect

TToonEffect.png TToonEffect

TBevelEffect.png TBevelEffect

TAffineTransformEffect.png TAffineTransformEffect

TCropEffect.png TCropEffect

TNormalBlendEffect.png TNormalBlendEffect

TPerspectiveTransformEffect.png TPerspectiveTransformEffect

TTilerEffect.png TTilerEffect

TBandedSwirlTransitionEffect.png TBandedSwirlTransitionEffect

TBlindTransitionEffect.png TBlindTransitionEffect

TBloodTransitionEffect.png TBloodTransitionEffect

TBlurTransitionEffect.png TBlurTransitionEffect

TBrightTransitionEffect.png TBrightTransitionEffect

TCircleTransitionEffect.png TCircleTransitionEffect

TCrumpleTransitionEffect.png TCrumpleTransitionEffect

TDissolveTransitionEffect.png TDissolveTransitionEffect

TDropTransitionEffect.png TDropTransitionEffect

TFadeTransitionEffect.png TFadeTransitionEffect

TLineTransitionEffect.png TLineTransitionEffect

TMagnifyTransitionEffect.png TMagnifyTransitionEffect

TPixelateTransitionEffect.png TPixelateTransitionEffect

TRippleTransitionEffect.png TRippleTransitionEffect

TRotateCrumpleTransitionEffect.png TRotateCrumpleTransitionEffect

TSaturateTransitionEffect.png TSaturateTransitionEffect

TShapeTransitionEffect.png TShapeTransitionEffect

TSlideTransitionEffect.png TSlideTransitionEffect

TSwipeTransitionEffect.png TSwipeTransitionEffect

TSwirlTransitionEffect.png TSwirlTransitionEffect

TWaterTransitionEffect.png TWaterTransitionEffect

TWaveTransitionEffect.png TWaveTransitionEffect

TWiggleTransitionEffect.png TWiggleTransitionEffect


Effects that modify pixels individually

These effects typically apply changes to color. Each pixel color can be considered on its own. The table below shows some of this kind of effect:

Effect Result Description Effect Result Description

None

InputBitmap.png

No effects applied.

TMonochromeEffect

Monochrome.png

Grayscale transformation.

TInvertEffect

Invert.png

Inverts the color of each pixel

TContrastEffect

Contrast.png

Adjusting contrast

THueAdjustEffect

HueAdjust.png

Adjusting hue

Fill effects

TFillRGBEffect or

TFillEffect

Fill.png

Color filling, either preserving alpha or completely overwriting.

Effects that consider the neighbors of a pixel

This type of effect is applied using algorithms that use the neighbors of a pixel to define the new value of the pixel. The table below shows some of this kind of effect:

Blur effects

Effect Result Description Effect Result Description

None

InputBitmap.png

No effects applied.

TGaussianBlurEffect

GaussianBlur.png

Gaussian blur

TBoxBlurEffect

BoxBlur.png

Box blur

TDirectionalBlurEffect

DirectionalBlur.png

Directional blur

TRadialBlurEffect

RadialBlur.png

Radial blur

TBlurEffect

StackBlur.png

Stack Blur

Various distortions

Effect Result Description Effect Result Description

None

InputBitmap.png

No effects applied.

Swirls effects

TSwirlEffect and

TBandedSwirlEffect

Swirl.png

BandedSwirl.png

Swirls the input image.

TWaveEffect

Wave.png

Applies a wave patterns

TEmbossEffect

Emboss.png

Outlines the input image

TPixelateEffect

Pixelate.png

Reduces the input details

TMagnifyEffect

Magnify.png

Magnifying glass.

Effects that modify the image as a whole

This kinds of effect applies geometric changes over the input image. The table below shows some of this kind of effect:

Effect Result Description Effect Result Description

None

InputBitmap.png

No effects applied.

TCropEffect

Crop.png

Crops the input image.

TAffineTransformEffect

Rotating.png

Rotates and scales the input image.

TPerspectiveTransformEffect

Perspective3D.png

3D perspective

TNormalBlendEffect

NormalBlend.png

Overlies two images. This work when the overlay has some transparency.

TTilerEffect

Tiler.png

Tiles the input image

Additive effects

This kind of effect affects the images by adding new elements to the original image. The elements can be added to the edges of the image or to the entire image. The table below shows some of this kind of effect:

Effect Opaque image Image with transparent areas Description

None

InputBitmap.png

FireMonkey logo NoEffects.PNG

No effects applied.

TGlowEffect

Glow.png

FireMonkey logo TGlowEffect.PNG

Adds a glowing band

|TInnerGlowEffect

InnerGlow.png

FireMonkey logo TInnerGlowEffect.PNG

Adds a glowing band in the interior of the nontransparent areas.

TShadowEffect

Shadow.png

FireMonkey logo TShadowEffect.PNG

Adds shadow to the nontransparent areas.

TReflectionEffect

Reflection.png

FireMonkey logo TReflectionEffect.PNG

Adds reflection to the entire image.

TBevelEffect

Bevel.png

FireMonkey logo TBevelEffect.PNG

Adds a bevel to the entire image.

Transition effects

FireMonkey includes over twenty image transition effects, in which source pixels are progressively transformed into a target bitmap image, from simple fades to fancy banded swirls. The progress of the transformation is deterministic and can be set to an arbitrary percentage. This percentage can be animated to transition over time. To animate the progress of the transformation, see Apply an Animation Effect to a Property of an Image Effect.

The table below shows some animated transitions:

Transition Result Transition Result

TBandedSwirlTransitionEffect

BandedSwirlTransition.gif

TCircleTransitionEffect

CircleTransition.gif

TFadeTransitionEffect

FadeTransition1.gif

TMagnifyTransitionEffect

MagnifyTransition.gif

FireMonkey Image Sample Program

The ShaderFilters sample program demonstrates many of the FireMonkey image effects, except the additive effects and the basic stack blur.

See Also

Samples