harmony 鸿蒙Image Effect

2025-06-12
浏览 (6)

Image Effect

Image effects include blur, shadow, spherical effect, and much more.

NOTE

The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

blur

blur(value: number, options?: BlurOptions)

Applies a foreground blur effect to the component.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Foreground blur effect to apply to the component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is 0, the content is not blurred.
options¹¹⁺	BlurOptions	No	Grayscale parameters.

blur¹⁸⁺

blur(blurRadius: Optional<number>, options?: BlurOptions, sysOptions?: SystemAdaptiveOptions)

Applies a foreground blur effect to the component. Compared to blur, this API supports the undefined type for the blurRadius parameter.

Widget capability: This API can be used in ArkTS widgets since API version 18.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
blurRadius	Optional<number>	Yes	Foreground blur effect to apply to the component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is 0, the content is not blurred. If blurRadius is set to undefined, the previous value is retained.
options¹⁶⁺	BlurOptions	No	Grayscale parameters.
sysOptions¹⁸⁺	SystemAdaptiveOptions	No	System adaptive adjustment options. Default value: { disableSystemAdaptation: false }

shadow

shadow(value: ShadowOptions|ShadowStyle)

Applies a shadow effect to the component.

Widget capability: Since API version 9, this API is supported in ArkTS widgets. Yet, the ShadowStyle type is not supported in ArkTS widgets.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ShadowOptions \|ShadowStyle¹⁰⁺	Yes	Shadow of the component. When the value type is ShadowOptions, the blur radius, shadow color, and offset along the x-axis and y-axis can be specified. When the value type is ShadowStyle, the shadow style can be specified.

shadow¹⁸⁺

shadow(options: Optional<ShadowOptions|ShadowStyle>)

Applies a shadow effect to the component. Compared to shadow, this API supports the undefined type for the options parameter.

Widget capability: Since API version 18, this API is supported in ArkTS widgets. Yet, the ShadowStyle type is not supported in ArkTS widgets.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	Optional<ShadowOptions \|[ShadowStyle](#shadowstyle10¹⁰⁺>	Yes	Shadow of the component. When the value type is ShadowOptions, the blur radius, shadow color, and offset along the x-axis and y-axis can be specified. When the value type is ShadowStyle, the shadow style can be specified. If options is undefined, the component reverts to its original effect with no shadow.

grayscale

grayscale(value: number)

Applies a grayscale effect to the component.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Grayscale conversion ratio of the component. If the value is 1.0, the component is completely converted to grayscale. If the value is 0.0, the component remains unchanged. Between 0 and 1, the value applies a linear multiplier on the grayscale effect. The unit is percentage. Default value: 0.0 Value range: [0.0, 1.0] NOTE A value less than 0.0 evaluates to the value 0.0. A value greater than 1.0 evaluates to the value 1.0.

grayscale¹⁸⁺

grayscale(grayscale: Optional<number>)

Applies a grayscale effect to the component. Compared to grayscale, this API supports the undefined type for the grayscale parameter.

Widget capability: This API can be used in ArkTS widgets since API version 18.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
grayscale	Optional<number>	Yes	Grayscale conversion ratio of the component. If the value is 1.0, the component is completely converted to grayscale. If the value is 0.0, the component remains unchanged. Between 0 and 1, the value applies a linear multiplier on the grayscale effect. The unit is percentage. Default value: 0.0 Value range: [0.0, 1.0] NOTE A value less than 0.0 evaluates to the value 0.0. A value greater than 1.0 evaluates to the value 1.0. If grayscale is set to undefined, the default value is used, which means the component reverts to its original effect with no grayscale.

brightness

brightness(value: number)

Applies a brightness effect to the component.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Brightness of the component. The value 1 indicates no effects. The value 0 indicates the complete darkness. If the value is less than 1, the brightness decreases. If the value is greater than 1, the brightness increases. A larger value indicates a higher brightness. A brightness of 2 turns the component completely white. Default value: 1.0 Recommended value range: [0, 2] NOTE A value less than 0 evaluates to the value 0. Widget capability: This API can be used in ArkTS widgets since API version 9.

brightness¹⁸⁺

brightness(brightness: Optional<number>)

Applies a brightness effect to the component. Compared to brightness, this API supports the undefined type for the brightness parameter.

Widget capability: This API can be used in ArkTS widgets since API version 18.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
brightness	Optional<number>	Yes	Brightness of the component. The value 1 indicates no effects. The value 0 indicates the complete darkness. If the value is less than 1, the brightness decreases. If the value is greater than 1, the brightness increases. A larger value indicates a higher brightness. A brightness of 2 turns the component completely white. Default value: 1.0 Recommended value range: [0, 2] NOTE A value less than 0 evaluates to the value 0. If brightness is undefined, the brightness level is reset to 1.

saturate

saturate(value: number)

Applies a saturation effect to the component.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Saturation of the component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. If the value is 1, the original image is displayed. If the value is greater than 1, a higher percentage of the chromatic component indicates a higher saturation. If the value is less than 1, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage. Default value: 1.0 Recommended value range: [0, 50) NOTE A value less than 0 evaluates to the value 0.

saturate¹⁸⁺

saturate(saturate: Optional<number>)

Applies a saturation effect to the component. Compared to saturate, this API supports the undefined type for the saturate parameter.

Widget capability: This API can be used in ArkTS widgets since API version 18.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
saturate	Optional<number>	Yes	Saturation of the component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. If the value is 1, the original image is displayed. If the value is greater than 1, a higher percentage of the chromatic component indicates a higher saturation. If the value is less than 1, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage. Default value: 1.0 Recommended value range: [0, 50) NOTE A value less than 0 evaluates to the value 0. If saturate is undefined, the saturation effect is reset to 1.0.

contrast

contrast(value: number)

Applies a contrast effect to the component.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Contrast of the component. The input parameter is a contrast value. If the value is 1, the source image is displayed. If the value is greater than 1, a larger value indicates a higher contrast and a clearer image. If the value is less than 1, a smaller value indicates a lower contrast is. If the value is 0, the image becomes all gray. The unit is percentage. Default value: 1.0 Recommended value range: [0, 10) NOTE A value less than 0 evaluates to the value 0.

contrast¹⁸⁺

contrast(contrast: Optional<number>)

Applies a contrast effect to the component. Compared to contrast, this API supports the undefined type for the contrast parameter.

Widget capability: This API can be used in ArkTS widgets since API version 18.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
contrast	Optional<number>	Yes	Contrast of the component. The input parameter is a contrast value. If the value is 1, the source image is displayed. If the value is greater than 1, a larger value indicates a higher contrast and a clearer image. If the value is less than 1, a smaller value indicates a lower contrast is. If the value is 0, the image becomes all gray. The unit is percentage. Default value: 1.0 Recommended value range: [0, 10) NOTE A value less than 0 evaluates to the value 0. If contrast is undefined, the contrast effect is reset to 1.0.

invert

invert(value: number|InvertOptions)

Inverts the image.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \|InvertOptions¹¹⁺	Yes	How the image is inverted. If the value is of the number type, it indicates the inversion ratio. If the value is 1, the image is completely inverted. If the value is 0, the image remains unchanged. The unit is percentage. Value range: [0, 1]. A value less than 0 evaluates to the value 0. A value larger than 1 is treated as 1. If the value is of the InvertOptions type, the grayscale value of the background color is compared with the threshold range. If the grayscale value is greater than the upper bound of the threshold range, the high value is used. If the grayscale value is less than the lower bound of the threshold range, the low value is used. If the grayscale value is within the threshold range, the background color changes linearly from high to low.

invert¹⁸⁺

invert(options: Optional<number|InvertOptions>)

Inverts the image. Compared to invert, this API supports the undefined type for the options parameter.

Widget capability: This API can be used in ArkTS widgets since API version 18.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	Optional<number \|InvertOptions¹¹⁺>	Yes	How the image is inverted. If the value is of the number type, it indicates the inversion ratio. If the value is 1, the image is completely inverted. If the value is 0, the image remains unchanged. The unit is percentage. Value range: [0, 1]. A value less than 0 evaluates to the value 0. A value larger than 1 is treated as 1. If the value is of the InvertOptions type, the grayscale value of the background color is compared with the threshold range. If the grayscale value is greater than the upper bound of the threshold range, the high value is used. If the grayscale value is less than the lower bound of the threshold range, the low value is used. If the grayscale value is within the threshold range, the background color changes linearly from high to low. If options is undefined, the component reverts to its original effect.

sepia

sepia(value: number)

Converts the image to a sepia tone, reducing color intensity to create a warm, vintage image style.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Intensity of the sepia filter. A value of 1 results in a completely sepia image, values less than or equal to 0 leave the image unchanged, and values greater than 1 increase the color shift, making the image brighter and more yellow or red, though this is not a standard sepia effect. The unit is percentage. Value range: [0, +∞). Recommended value range: (0, 1].

sepia¹⁸⁺

sepia(sepia: Optional<number>)

Converts the image to a sepia tone, reducing color intensity to create a warm, vintage image style. Compared to sepia, this API supports the undefined type for the sepia parameter.

Widget capability: This API can be used in ArkTS widgets since API version 18.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
sepia	Optional<number>	Yes	Intensity of the sepia filter. A value of 1 results in a completely sepia image, values less than or equal to 0 leave the image unchanged, and values greater than 1 increase the color shift, making the image brighter and more yellow or red, though this is not a standard sepia effect. The unit is percentage. If sepia is undefined, the component reverts to its original effect. Value range: [0, +∞). Recommended value range: (0, 1].

hueRotate

hueRotate(value: number|string)

Rotates the hue of the component.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \|string	Yes	Hue rotation angle of the component. Default value: ‘0deg’ Value range: (-∞, +∞) NOTE A rotation of 360 degrees leaves the color unchanged. A rotation of 180 degrees and then -180 degrees also leaves the color unchanged. When the data type is number, the value 90 is equivalent to ‘90deg’.

hueRotate¹⁸⁺

hueRotate(rotation: Optional<number|string>)

Rotates the hue of the component. Compared to hueRotate, this API supports the undefined type for the rotation parameter.

Widget capability: This API can be used in ArkTS widgets since API version 18.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
rotation	Optional<number \|string>	Yes	Hue rotation angle of the component. Default value: ‘0deg’ Value range: (-∞, +∞) For the string type, the value must be a numeric string. NOTE A rotation of 360 degrees leaves the color unchanged. A rotation of 180 degrees and then -180 degrees also leaves the color unchanged. When the data type is number, the value 90 is equivalent to ‘90deg’. If sepia is undefined, the component reverts to its original effect with no hue rotation.

colorBlend⁷⁺

colorBlend(value: Color|string|Resource)

Applies a color blend effect to the component.

System capability: SystemCapability.ArkUI.ArkUI.Full

Atomic service API: This API can be used in atomic services since API version 11.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Parameters

Name	Type	Mandatory	Description
value	Color \|string \|Resource	Yes	Color to blend with the component.

colorBlend¹⁸⁺

colorBlend(color: Optional<Color|string|Resource>)

Applies a color blend effect to the component. Compared to colorBlend⁷⁺, this API supports the undefined type for the color parameter.

System capability: SystemCapability.ArkUI.ArkUI.Full

Atomic service API: This API can be used in atomic services since API version 18.

Widget capability: This API can be used in ArkTS widgets since API version 18.

Parameters

Name	Type	Mandatory	Description
color	Optional<Color \|string \|Resource>	Yes	Color to blend with the component. If color is undefined, the component reverts to its original effect with no color blending.

linearGradientBlur¹²⁺

linearGradientBlur(value: number, options: LinearGradientBlurOptions)

Applies a linear gradient foreground blur effect to the component.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Blur radius. A larger value indicates a higher blur degree. If the value is 0, the content is not blurred. Value range: [0, 1000] Linear gradient blur consists of two parts: fractionStops and direction.
options	LinearGradientBlurOptions	Yes	Linear gradient blur effect.

linearGradientBlur¹⁸⁺

linearGradientBlur(value: Optional<number>, options: Optional<LinearGradientBlurOptions>)

Applies a linear gradient foreground blur effect to the component. Compared to linearGradientBlur¹²⁺, this API supports the undefined type for the value parameter.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Optional<number>	Yes	Blur radius. A larger value indicates a higher blur degree. If the value is 0, the content is not blurred. Value range: [0, 1000] Linear gradient blur consists of two parts: fractionStops and direction. If color is undefined, the gradient blur effect reverts to 0.
options	Optional<LinearGradientBlurOptions>	Yes	Linear gradient blur effect. If options is undefined, the gradient blur effect reverts to 0.

renderGroup¹⁰⁺

renderGroup(value: boolean)

Sets whether the component and its child components are rendered off the screen as a whole before being blended with its parent.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	boolean	Yes	Whether the component and its child components are rendered off the screen as a whole before being blended with its parent. If the opacity of the component is not 1, the drawing effect may vary depending on the value. Default value: false The value true means the component and its child components are rendered off the screen as a whole, and false means the opposite.

renderGroup¹⁸⁺

renderGroup(isGroup: Optional<boolean>)

Sets whether the component and its child components are rendered off the screen as a whole before being blended with its parent. Compared to renderGroup¹⁰⁺, this API supports the undefined type for the isGroup parameter.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
isGroup	Optional<boolean>	Yes	Whether the component and its child components are rendered off the screen as a whole before being blended with its parent. If the opacity of the component is not 1, the drawing effect may vary depending on the value. Default value: false If isGroup is undefined, the component reverts to its original effect of not enabling offscreen rendering as a whole before blending with the parent component.

blendMode¹¹⁺

blendMode(value: BlendMode, type?: BlendApplyType)

Defines how the component’s content (including the content of it child components) is blended with the existing content on the canvas (possibly offscreen canvas) below.

Widget capability: This API can be used in ArkTS widgets since API version 11.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	BlendMode	Yes	Blend mode. Default value: BlendMode.NONE NOTE When BlendMode.NONE is used, the blend effect is BlendMode.SRC_OVER by default, and BlendApplyType does not take effect.
type	BlendApplyType	No	Whether the blend mode is implemented offscreen. Default value: BlendApplyType.FAST NOTE 1. BlendApplyType.FAST: The blend mode is not implemented offscreen. 2. BlendApplyType.OFFSCREEN: An offscreen canvas of the size of the current component is created. The content of the current component (including child components) is then drawn onto the offscreen canvas, and blended with the existing content on the canvas below using the specified blend mode. This approach may cause issues with screen capture for APIs such as linearGradientBlur¹²⁺, backgroundEffect, and brightness.

blendMode¹⁸⁺

blendMode(mode: Optional<BlendMode>, type?: BlendApplyType)

Defines how the component’s content (including the content of it child components) is blended with the existing content on the canvas (possibly offscreen canvas) below. Compared to blendMode¹¹⁺, this API supports the undefined type for the mode parameter.

Widget capability: This API can be used in ArkTS widgets since API version 18.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
mode	Optional<BlendMode>	Yes	Blend mode. Default value: BlendMode.NONE If mode is undefined, the component reverts to its original effect of not enabling offscreen rendering as a whole before blending with the parent component. NOTE When BlendMode.NONE is used, the blend effect is BlendMode.SRC_OVER by default, and BlendApplyType does not take effect.
type	BlendApplyType	No	Whether the blend mode is implemented offscreen. Default value: BlendApplyType.FAST NOTE 1. BlendApplyType.FAST: The blend mode is not implemented offscreen. 2. BlendApplyType.OFFSCREEN: An offscreen canvas of the size of the current component is created. The content of the current component (including child components) is then drawn onto the offscreen canvas, and blended with the existing content on the canvas below using the specified blend mode. This approach may cause issues with screen capture for APIs such as linearGradientBlur¹²⁺, backgroundEffect, and brightness.

BlendApplyType¹¹⁺

Defines how to apply the specified blend mode to the content of a view.

Widget capability: This API can be used in ArkTS widgets since API version 11.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Description
FAST	The content of the view is blended in sequence on the target image.
OFFSCREEN	The content of the component and its child components are drawn on the offscreen canvas, and then blended with the existing content on the canvas.

useShadowBatching¹¹⁺

useShadowBatching(value: boolean)

Sets whether to draw shadows of child nodes in the component at the same layer, so that the shadows of elements at the same layer overlap.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Widget capability: This API can be used in ArkTS widgets since API version 11.

Parameters

Name	Type	Mandatory	Description
value	boolean	Yes	Whether to draw shadows of child nodes in the component at the same layer, so that the shadows of elements at the same layer overlap. Default value: false NOTE 1. When this feature is disabled (default), if the shadow radius of a child node is large, the shadows of the child nodes may overlap. This overlap issue does not occur when the feature is enabled. 2. Avoid nesting useShadowBatching. When used in nested mode, useShadowBatching takes effect for the current child node only and cannot be recursively used.

useShadowBatching¹⁸⁺

useShadowBatching(use: Optional<boolean>)

Sets whether to draw shadows of child nodes in the component at the same layer, so that the shadows of elements at the same layer overlap. Compared to useShadowBatching¹¹⁺, this API supports the undefined type for the use parameter.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Widget capability: This API can be used in ArkTS widgets since API version 18.

Parameters

Name	Type	Mandatory	Description
use	Optional<boolean>	Yes	Whether to draw shadows of child nodes in the component at the same layer, so that the shadows of elements at the same layer overlap. Default value: false NOTE 1. When this feature is disabled (default), if the shadow radius of a child node is large, the shadows of the child nodes may overlap. This overlap issue does not occur when the feature is enabled. 2. Avoid nesting useShadowBatching. When used in nested mode, useShadowBatching takes effect for the current child node only and cannot be recursively used. If use is undefined, the component reverts to its original effect of not using shadow overlapping.

sphericalEffect¹²⁺

sphericalEffect(value: number)

Applies a spherical effect to the component.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Spherical degree of the component. The value ranges from 0 to 1. NOTE 1. If the value is 0, the component remains unchanged. If the value is 1, the component is completely spherical. Between 0 and 1, a larger value indicates a higher spherical degree. A value less than 0 is handled as the value 0. A value greater than 1 is handled as the value 1. 2. The component’s shadow and outer stroke do not support spherical effects. 3. If the value is greater than 0, the component is frozen and not updated, and its content is drawn to the transparent offscreen buffer. To update the component attributes, set the value to 0.

sphericalEffect¹⁸⁺

sphericalEffect(effect: Optional<number>)

Applies a spherical effect to the component. Compared to sphericalEffect¹²⁺, this API supports the undefined type for the effect parameter.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
effect	Optional<number>	Yes	Spherical degree of the component. The value ranges from 0 to 1. NOTE 1. If the value is 0, the component remains unchanged. If the value is 1, the component is completely spherical. Between 0 and 1, a larger value indicates a higher spherical degree. A value less than 0 is handled as the value 0. A value greater than 1 is handled as the value 1. 2. The component’s shadow and outer stroke do not support spherical effects. 3. If the value is greater than 0, the component is frozen and not updated, and its content is drawn to the transparent offscreen buffer. To update the component attributes, set the value to 0. If effect is undefined, the spherical degree reverts to 0.

lightUpEffect¹²⁺

lightUpEffect(value: number)

Applies a light up effect to the component.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	Light up degree of the component. The value ranges from 0 to 1. If the value is 0, the component is dark. If the value is 1, the component is fully illuminated. Between 0 and 1, a larger value indicates higher luminance. A value less than 0 is handled as the value 0. A value greater than 1 is handled as the value 1.

lightUpEffect¹⁸⁺

lightUpEffect(degree: Optional<number>)

Applies a light up effect to the component. Compared to lightUpEffect¹²⁺, this API supports the undefined type for the degree parameter.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
degree	Optional<number>	Yes	Light up degree of the component. The value ranges from 0 to 1. If the value is 0, the component is dark. If the value is 1, the component is fully illuminated. Between 0 and 1, a larger value indicates higher luminance. A value less than 0 is handled as the value 0. A value greater than 1 is handled as the value 1. If degree is undefined, the light up degree reverts to 1.

pixelStretchEffect¹²⁺

pixelStretchEffect(options: PixelStretchEffectOptions)

Applies a pixel stretch effect to the component.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	PixelStretchEffectOptions	Yes	Pixel stretch effect options. The value includes the length by which a pixel is stretched toward the four edges. NOTE 1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges. 2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged: Shrinking mode: (1) The image shrinks from the four edges by the absolute value of length set through options. (2) The image is stretched back to the original size with edge pixels. 3. Constraints on options: (1) The length values for the four edges must be all positive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction. (2) The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed. (3) If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image.

pixelStretchEffect¹⁸⁺

pixelStretchEffect(options: Optional<PixelStretchEffectOptions>)

Applies a pixel stretch effect to the component. Compared to pixelStretchEffect¹²⁺, this API supports the undefined type for the options parameter.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	Optional<PixelStretchEffectOptions>	Yes	Pixel stretch effect options. The value includes the length by which a pixel is stretched toward the four edges. NOTE 1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges. 2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged: Shrinking mode: (1) The image shrinks from the four edges by the absolute value of length set through options. (2) The image is stretched back to the original size with edge pixels. 3. Constraints on options: (1) The length values for the four edges must be all positive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction. (2) The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed. (3) If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image. If options is undefined, the component reverts to its original effect with no pixel stretch.

PixelStretchEffectOptions¹⁰⁺

Describes the pixel stretch effect options.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
left	Length	No	Length by which a pixel is stretched towards the left edge of the image.
right	Length	No	Length by which a pixel is stretched towards the right edge of the image.
top	Length	No	Length by which a pixel is stretched towards the top edge of the image.
bottom	Length	No	Length by which a pixel is stretched towards the right edge of the image.

systemBarEffect¹²⁺

systemBarEffect()

Applies a system bar effect to the component, which means to invert colors based on the background and add a blur.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

ShadowType¹⁰⁺

Shadow type.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Description
COLOR	Color.
BLUR	Blur.

ShadowOptions

Provides the shadow attributes, including the blur radius, color, and offset along the x-axis and y-axis.

System capability: SystemCapability.ArkUI.ArkUI.Full

Widget capability: This API can be used in ArkTS widgets since API version 9.

Name	Type	Mandatory	Description
radius	number \|Resource	Yes	Blur radius of the shadow. Value range: [0, +∞) Unit: px NOTE A value less than 0 evaluates to the value 0. To use a value in the vp unit, call vp2px to convert it into px. If radius is of the Resource type, its value must be of the number type. Atomic service API: This API can be used in atomic services since API version 11.
type¹⁰⁺	ShadowType¹⁰⁺	No	Shadow type. Default value: COLOR Atomic service API: This API can be used in atomic services since API version 11.
color	Color \|string \|Resource\|ColoringStrategy¹⁰⁺	No	Color of the shadow. The default color is black. NOTE Since API version 11, this API supports ColoringStrategy, which cannot be used with ArkTS widgets or the textShadow attribute. With ColoringStrategy, the average color or primary color can be obtained, and the obtained color is applied to the shadow drawing area. The ‘average’ string can be used to trigger the mode for obtaining the average color, and the ‘primary’ string for obtaining the primary color. Atomic service API: This API can be used in atomic services since API version 11.
offsetX	number \|Resource	No	Offset of the shadow along the x-axis. Default value: 0 Unit: px NOTE To use a value in the vp unit, call vp2px to convert it into px. If offsetX is of the Resource type, its value must be of the number type. Atomic service API: This API can be used in atomic services since API version 11.
offsetY	number \|Resource	No	Offset of the shadow along the y-axis. Default value: 0 Unit: px NOTE To use a value in the vp unit, call vp2px to convert it into px. If offsetY is of the Resource type, its value must be of the number type. Atomic service API: This API can be used in atomic services since API version 11.
fill¹¹⁺	boolean	No	Whether to fill the inside of the component with shadow. true: Fill the inside of the component with shadow. false: Do not fill the inside of the component with shadow. The default value is false. NOTE This attribute does not take effect in textShadow. Atomic service API: This API can be used in atomic services since API version 12.

ShadowStyle¹⁰⁺

Atomic service API: This API can be used in atomic services since API version 11.

Name	Description
OUTER_DEFAULT_XS	Mini shadow.
OUTER_DEFAULT_SM	Small shadow.
OUTER_DEFAULT_MD	Medium shadow.
OUTER_DEFAULT_LG	Large shadow.
OUTER_FLOATING_SM	Floating small shadow.
OUTER_FLOATING_MD	Floating medium shadow.

BlendMode¹¹⁺

NOTE

In the blendMode enums, s indicates the source pixel, d indicates the target pixel, sa indicates the opacity of the source pixel, da indicates the opacity of the target pixel, r indicates the pixel after blending, and ra indicates the opacity of the pixel after blending.

Widget capability: This API can be used in ArkTS widgets since API version 11.

Atomic service API: This API can be used in atomic services since API version 12.

Name	Description
NONE	The top image is superimposed on the bottom image without any blending.
CLEAR	The target pixels covered by the source pixels are erased by being turned to completely transparent.
SRC	r = s: Only the source pixels are displayed.
DST	r = d: Only the target pixels are displayed.
SRC_OVER	r = s + (1 - sa) * d: The source pixels are blended based on opacity and cover the target pixels.
DST_OVER	r = d + (1 - da) * s: The target pixels are blended based on opacity and cover on the source pixels.
SRC_IN	r = s * da: Only the part of the source pixels that overlap with the target pixels is displayed.
DST_IN	r = d * sa: Only the part of the target pixels that overlap with the source pixels is displayed.
SRC_OUT	r = s * (1 - da): Only the part of the source pixels that do not overlap with the target pixels is displayed.
DST_OUT	r = d * (1 - sa): Only the part of the target pixels that do not overlap with the source pixels is displayed.
SRC_ATOP	r = s * da + d * (1 - sa): The part of the source pixels that overlap with the target pixels is displayed and the part of the target pixels that do not overlap with the source pixels are displayed.
DST_ATOP	r = d * sa + s * (1 - da): The part of the target pixels that overlap with the source pixels and the part of the source pixels that do not overlap with the target pixels are displayed.
XOR	r = s * (1 - da) + d * (1 - sa): Only the non-overlapping part between the source pixels and the target pixels is displayed.
PLUS	r = min(s + d, 1): New pixels resulting from adding the source pixels to the target pixels are displayed.
MODULATE	r = s * d: New pixels resulting from multiplying the source pixels with the target pixels are displayed.
SCREEN	r = s + d - s * d: Pixels are blended by adding the source pixels to the target pixels and subtracting the product of their multiplication.
OVERLAY	The MULTIPLY or SCREEN mode is used based on the target pixels.
DARKEN	rc = s + d - max(s * da, d * sa), ra = kSrcOver: When two colors overlap, whichever is darker is used.
LIGHTEN	rc = s + d - min(s * da, d * sa), ra = kSrcOver: The darker of the pixels (source and target) is used.
COLOR_DODGE	The colors of the target pixels are lightened to reflect the source pixels.
COLOR_BURN	The colors of the target pixels are darkened to reflect the source pixels.
HARD_LIGHT	The MULTIPLY or SCREEN mode is used, depending on the source pixels.
SOFT_LIGHT	The LIGHTEN or DARKEN mode is used, depending on the source pixels.
DIFFERENCE	rc = s + d - 2 * (min(s * da, d * sa)), ra = kSrcOver: The final pixel is the result of subtracting the darker of the two pixels (source and target) from the lighter one.
EXCLUSION	rc = s + d - two(s * d), ra = kSrcOver: The final pixel is similar to DIFFERENCE, but with less contrast.
MULTIPLY	r = s * (1 - da) + d * (1 - sa) + s * d: The final pixel is the result of multiplying the source pixel by the target pixel.
HUE	The resultant image is created with the luminance and saturation of the source image and the hue of the target image.
SATURATION	The resultant image is created with the luminance and hue of the target image and the saturation of the source image.
COLOR	The resultant image is created with the saturation and hue of the source image and the luminance of the target image.
LUMINOSITY	The resultant image is created with the saturation and hue of the target image and the luminance of the source image.

LinearGradientBlurOptions¹²⁺

Atomic service API: This API can be used in atomic services since API version 12.

Name	Type	Mandatory	Description
fractionStops	Array<FractionStop>	Yes	Gradient blur stops. The value is a set of binary arrays, each of which indicates [blur degree, blur position] and consists of numbers ranging from 0 to 1 (those less than 0 are treated as 0, and those greater than 1 are treated as 1). The blur positions in the arrays must be in strict ascending order. Noncompliance will be logged. For the blur settings to take effect, the number of binary arrays must be greater than or equal to 2.
direction	GradientDirection	Yes	Gradient blur direction. Default value: GradientDirection.Bottom

FractionStop¹²⁺

FractionStop = [ number, number ]

Defines a gradient blur stop.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Value Range	Description
number	Blur degree, represented by a fraction. The value 1 means opaque, and 0 means completely transparent. Value range: [0, 1]
number	Stop position. The value 1 indicates the end position and 0 the end position. Value range: [0, 1]

InvertOptions¹¹⁺

Describes the options for inverting the foreground color.

Atomic service API: This API can be used in atomic services since API version 12.

Name	Type	Mandatory	Description
low	number	Yes	Value when the background color is greater than the grayscale threshold. Value range: [0, 1]
high	number	Yes	Value when the background color is less than the grayscale threshold. Value range: [0, 1]
threshold	number	Yes	Grayscale threshold. Value range: [0, 1]
thresholdRange	number	Yes	Threshold value range. Value range: [0, 1] NOTE This range defines the upper and lower bounds of the grayscale threshold. The grayscale value changes linearly from high to low within the range.

BackgroundImageOptions¹⁸⁺

Defines the background image options.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
syncLoad	boolean	No	Whether to load the background image synchronously. Default value: false true: Load the background image synchronously. false: Load the background image asynchronously.
repeat	ImageRepeat	No	Repeat pattern of the background image.

freeze¹²⁺

freeze(value: boolean)

Sets whether to freeze the component. When frozen, the component and its children are cached for repeated drawing after offscreen rendering, without updating internal attributes.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	boolean	Yes	Whether to freeze the component. When frozen, the component and its children are cached for repeated drawing after offscreen rendering, without updating internal attributes. If the opacity of the component is not 1, the drawing effect may vary depending on the value. Default value: false true: Freeze the component. false: Do not freeze the component.

freeze¹⁸⁺

freeze(freeze: Optional<boolean>)

Sets whether to freeze the component. When frozen, the component and its children are cached for repeated drawing after offscreen rendering, without updating internal attributes. Compared to freeze, this API supports the undefined type for the freeze parameter.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
freeze	Optional<boolean>	Yes	Whether to freeze the component. When frozen, the component and its children are cached for repeated drawing after offscreen rendering, without updating internal attributes. If the opacity of the component is not 1, the drawing effect may vary depending on the value. Default value: false true: Freeze the component. false: Do not freeze the component. If freeze is set to undefined, the previous value is retained.

Example

Example 1: Setting Different Image Attributes

This example applies different image effects.

// xxx.ets
@Entry
@Component
struct ImageEffectsExample {
  build() {
    Column({ space: 5 }) {
      // Apply the shadow effect.
      Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image'))
        .width('90%')
        .height(30)
        .shadow({
          radius: 10,
          color: Color.Green,
          offsetX: 20,
          offsetY: 20
        })

      // Add the internal shadow effect.
      Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image'))
        .width('90%')
        .height(30)
        .shadow({
          radius: 5,
          color: Color.Green,
          offsetX: 20,
          offsetY: 20,
          fill: true
        }).opacity(0.5)

      // Apply the grayscale effect. The grayscale value ranges from 0 to 1. The closer the grayscale value is to 1, the more obvious the grayscale effect is.
      Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).grayscale(0.3)
      Image($r('app.media.image')).width('90%').height(30).grayscale(0.8)

      // Apply the brightness effect. The value 1 indicates no effects. If the value is less than 1, the brightness decreases. If the value is greater than 1, the brightness increases.
      Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).brightness(1.2)

      // Apply the saturation effect. If the value is 1, the source image is displayed.
      Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).saturate(2.0)
      Image($r('app.media.image')).width('90%').height(30).saturate(0.7)

      // Apply the contrast effect. If the value is 1, the source image is displayed. If the value is greater than 1, a larger value indicates a higher contrast and a clearer image. If the value is less than 1, a smaller value indicates a lower contrast is.
      Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).contrast(2.0)
      Image($r('app.media.image')).width('90%').height(30).contrast(0.8)

      // Invert the image.
      Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).invert(0.2)
      Image($r('app.media.image')).width('90%').height(30).invert(0.8)

      // Apply the color blend effect.
      Text('colorBlend').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).colorBlend(Color.Green)
      Image($r('app.media.image')).width('90%').height(30).colorBlend(Color.Blue)

      // Convert the image color to sepia.
      Text('sepia').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).sepia(0.8)

      // Apply the hue rotation effect.
      Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).hueRotate(90)
    }.width('100%').margin({ top: 5 })
  }
}

imageeffect

Example 2: Applying a Linear Gradient Blur Effect

This example demonstrates how to apply a linear gradient blur effect on a component using linearGradientBlur.

// xxx.ets
@Entry
@Component
struct ImageExample1 {
  private_resource1: Resource = $r('app.media.testlinearGradientBlurOrigin')
  @State image_src: Resource = this.private_resource1

  build() {
    Column() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
        Row({ space: 5 }) {
          Image(this.image_src)
            .linearGradientBlur(60,
              { fractionStops: [[0, 0], [0, 0.33], [1, 0.66], [1, 1]], direction: GradientDirection.Bottom })
        }
      }
    }
  }
}

testlinearGradientBlur

Example 3: Setting Offscreen Rendering Effect

This example demonstrates how to use renderGroup to set whether to render a component offscreen before blending it with its parent component.

// xxx.ets
@Component
struct Component1 {
  @Prop renderGroupValue: boolean;

  build() {
    Row() {
      Row() {
        Row()
          .backgroundColor(Color.Black)
          .width(100)
          .height(100)
          .opacity(1)
      }
      .backgroundColor(Color.White)
      .width(150)
      .height(150)
      .justifyContent(FlexAlign.Center)
      .opacity(0.6)
      .renderGroup(this.renderGroupValue)
    }
    .backgroundColor(Color.Black)
    .width(200)
    .height(200)
    .justifyContent(FlexAlign.Center)
    .opacity(1)
  }
}

@Entry
@Component
struct RenderGroupExample {
  build() {
    Column() {
      Component1({ renderGroupValue: true })
        .margin(20)
      Component1({ renderGroupValue: false })
        .margin(20)
    }
    .width("100%")
    .height("100%")
    .alignItems(HorizontalAlign.Center)
  }
}

renderGroup

Example 4: Blending the Current Component Content with Canvas Content

This example demonstrates how to blend the current component content with the canvas content below using blendMode.

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text("blendMode")
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor('#ffff0101')
      Row() {
        Circle()
          .width(200)
          .height(200)
          .fill(Color.Green)
          .position({ x: 50, y: 50 })
        Circle()
          .width(200)
          .height(200)
          .fill(Color.Blue)
          .position({ x: 150, y: 50 })
      }
      .blendMode(BlendMode.OVERLAY, BlendApplyType.OFFSCREEN)
      .alignItems(VerticalAlign.Center)
      .height(300)
      .width('100%')
    }
    .height('100%')
    .width('100%')
    .backgroundImage($r('app.media.image'))
    .backgroundImageSize(ImageSize.Cover)
  }
}

BlendMode.OVERLAY,BlendApplyType.OFFSCREEN
en-us_image_effect_blendMode2
blendMode can be used with offscreen rendering to produce different effects.

Example 5: Inverting the Foreground Color

This example demonstrates how to invert the foreground color using InvertOptions.

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Stack() {
      Column()
      Stack() {
        Image($r('app.media.r')).width('100%')
        Column() {
          Column().width("100%").height(30).invert({
            low: 0,
            high: 1,
            threshold: 0.5,
            thresholdRange: 0.2
          })
          Column().width("100%").height(30).invert({
            low: 0.2,
            high: 0.5,
            threshold: 0.3,
            thresholdRange: 0.2
          })
        }
      }
      .width('100%')
      .height('100%')
    }
  }
}

testDestinationIn_lockDemo

Example 6: Setting Non-Overlapping Same-Layer Shadows

This example demonstrates how to implement non-overlapping shadows at the same layer using useShadowBatching with shadow.

// xxx.ets
@Entry
@Component
struct UseShadowBatchingExample {
  build() {
    Column() {
      Column({ space: 10 }) {
        Stack() {

        }
        .width('90%')
        .height(50)
        .margin({ top: 5 })
        .backgroundColor(0xFFE4C4)
        .shadow({
          radius: 120,
          color: Color.Green,
          offsetX: 0,
          offsetY: 0
        })
        .align(Alignment.TopStart)
        .shadow({
          radius: 120,
          color: Color.Green,
          offsetX: 0,
          offsetY: 0
        })

        Stack() {

        }
        .width('90%')
        .height(50)
        .margin({ top: 5 })
        .backgroundColor(0xFFE4C4)
        .align(Alignment.TopStart)
        .shadow({
          radius: 120,
          color: Color.Red,
          offsetX: 0,
          offsetY: 0
        })
        .width('90%')
        .backgroundColor(Color.White)

        Column() {
          Text()
            .fontWeight(FontWeight.Bold)
            .fontSize(20)
            .fontColor(Color.White)
        }
        .justifyContent(FlexAlign.Center)
        .width(150)
        .height(150)
        .borderRadius(10)
        .backgroundColor(0xf56c6c)
        .shadow({
          radius: 300,
          color: Color.Yellow,
          offsetX: 0,
          offsetY: 0
        })

        Column() {
          Text()
            .fontWeight(FontWeight.Bold)
            .fontSize(20)
            .fontColor(Color.White)
        }
        .justifyContent(FlexAlign.Center)
        .width(150)
        .height(150)
        .backgroundColor(0x67C23A)
        .borderRadius(10)
        .translate({ y: -50 })
        .shadow({
          radius: 220,
          color: Color.Blue,
          offsetX: 0,
          offsetY: 0
        })
      }
      .useShadowBatching(true)
    }
    .width('100%').margin({ top: 5 })
  }
}

testUseShadowBatchingDemo

Example 7: Applying a Spherical Effect to a Component

This example demonstrates how to apply a spherical effect to a component using sphericalEffect.

// xxx.ets
@Entry
@Component
struct SphericalEffectExample {
  build() {
    Stack() {
      TextInput({ placeholder: "Enter a percentage." })
        .width('50%')
        .height(35)
        .type(InputType.Number)
        .enterKeyType(EnterKeyType.Done)
        .caretColor(Color.Red)
        .placeholderColor(Color.Blue)
        .placeholderFont({
          size: 20,
          style: FontStyle.Italic,
          weight: FontWeight.Bold
        })
        .sphericalEffect(0.5)
    }.alignContent(Alignment.Center).width("100%").height("100%")
  }
}

Below is how the component looks with the spherical effect applied.

textInputSpherical1

Below is how the component looks without the spherical effect applied.

textInputSpherical2

Example 8: Applying a Light Up Effect to a Component

This example demonstrates how to apply a light up effect to a component using lightUpEffect.

// xxx.ets
@Entry
@Component
struct LightUpExample {
  build() {
    Stack() {
      Text('This is the text content with letterSpacing 0.')
        .letterSpacing(0)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('50%')
        .lightUpEffect(0.6)
    }.alignContent(Alignment.Center).width("100%").height("100%")
  }
}

Below is how the component looks with the light up effect applied.

textLightUp3

Below is how the component looks with lightUpEffect set to 0.2:

textLightUp2

Below is how the component looks without the light up effect applied.

textLightUp1

Example 9: Applying a Pixel Stretch Effect to a Component

This example demonstrates how to apply a pixel stretch effect to a component using pixelStretchEffect.

// xxx.ets
@Entry
@Component
struct PixelStretchExample {
  build() {
    Stack() {
      Text('This is the text content with letterSpacing 0.')
        .letterSpacing(0)
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .clip(false)
        .width('50%')
        .pixelStretchEffect({
          top: 10,
          left: 10,
          right: 10,
          bottom: 10
        })
    }.alignContent(Alignment.Center).width("100%").height("100%")
  }
}

Below is how the component looks with the pixel stretch effect applied.

textPixelStretch1

Below is how the component looks without the pixel stretch effect applied.

textPixelStretch2

Example 10: Applying a System Bar Effect to a Component

This example demonstrates how to apply a system bar effect to a component using systemBarEffect.

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      Stack() {
        Image($r('app.media.testImage')).width('100%').height('100%')
        Column()
          .width(150)
          .height(10)
          .systemBarEffect()
          .border({ radius: 5 })
          .margin({ bottom: 80 })
      }.alignContent(Alignment.Center)
    }
  }
}

Below is how the component looks with the system bar effect applied.

systemBarEffect

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙Dialog Box (Dialog)

harmony 鸿蒙DialogV2

harmony 鸿蒙DownloadFileButton

0 赞

所属分类： 后端技术
本文标签：
版权声明： 原创文章如转载，请注明本文链接: https://m.seaxiang.com/blog/jc6BNb

harmony 鸿蒙Image Effect

Image Effect

blur

blur18+

shadow

shadow18+

grayscale

grayscale18+

brightness

brightness18+

saturate

saturate18+

contrast

contrast18+

invert

invert18+

sepia

sepia18+

hueRotate

hueRotate18+

colorBlend7+

colorBlend18+

linearGradientBlur12+

linearGradientBlur18+

renderGroup10+

renderGroup18+

blendMode11+

blendMode18+

BlendApplyType11+

useShadowBatching11+

useShadowBatching18+

sphericalEffect12+

sphericalEffect18+

lightUpEffect12+

lightUpEffect18+

pixelStretchEffect12+

pixelStretchEffect18+

PixelStretchEffectOptions10+

systemBarEffect12+

ShadowType10+

ShadowOptions

ShadowStyle10+

BlendMode11+

LinearGradientBlurOptions12+

FractionStop12+

InvertOptions11+

BackgroundImageOptions18+

freeze12+

freeze18+

Example

Example 1: Setting Different Image Attributes

Example 2: Applying a Linear Gradient Blur Effect

Example 3: Setting Offscreen Rendering Effect

Example 4: Blending the Current Component Content with Canvas Content

Example 5: Inverting the Foreground Color

Example 6: Setting Non-Overlapping Same-Layer Shadows

Example 7: Applying a Spherical Effect to a Component

Example 8: Applying a Light Up Effect to a Component

Example 9: Applying a Pixel Stretch Effect to a Component

Example 10: Applying a System Bar Effect to a Component

你可能感兴趣的鸿蒙文章

热门推荐

标签云

最新文章

本文目录

blur¹⁸⁺

shadow¹⁸⁺

grayscale¹⁸⁺

brightness¹⁸⁺

saturate¹⁸⁺

contrast¹⁸⁺

invert¹⁸⁺

sepia¹⁸⁺

hueRotate¹⁸⁺

colorBlend⁷⁺

colorBlend¹⁸⁺

linearGradientBlur¹²⁺

linearGradientBlur¹⁸⁺

renderGroup¹⁰⁺

renderGroup¹⁸⁺

blendMode¹¹⁺

blendMode¹⁸⁺

BlendApplyType¹¹⁺

useShadowBatching¹¹⁺

useShadowBatching¹⁸⁺

sphericalEffect¹²⁺

sphericalEffect¹⁸⁺

lightUpEffect¹²⁺

lightUpEffect¹⁸⁺

pixelStretchEffect¹²⁺

pixelStretchEffect¹⁸⁺

PixelStretchEffectOptions¹⁰⁺

systemBarEffect¹²⁺

ShadowType¹⁰⁺

ShadowStyle¹⁰⁺

BlendMode¹¹⁺

LinearGradientBlurOptions¹²⁺

FractionStop¹²⁺

InvertOptions¹¹⁺

BackgroundImageOptions¹⁸⁺

freeze¹²⁺

freeze¹⁸⁺