鸿蒙HarmonyOS NEXT开发：图像效果（ArkTS通用属性）

最新推荐文章于 2024-08-29 11:01:35 发布
最新推荐文章于 2024-08-29 11:01:35 发布
阅读量1.1k 收藏 17
点赞数 27
分类专栏： 鸿蒙 ArkTS 文章标签： harmonyos 华为 鸿蒙 android 驱动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanBBQ/article/details/141063621
版权
鸿蒙 同时被 2 个专栏收录
99 篇文章 0 订阅
订阅专栏
ArkTS
94 篇文章 0 订阅
订阅专栏

图像效果

设置组件的模糊、阴影、球面效果以及设置图片的图像效果。

说明：

从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

blur

blur(value: number, options?: BlurOptions)

为组件添加内容模糊效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
options11+BlurOptions否灰阶梯参数。

backdropBlur

backdropBlur(value: number, options?: BlurOptions)

为组件添加背景模糊效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
options11+BlurOptions否灰阶梯参数。

shadow

shadow(value: ShadowOptions | ShadowStyle)

为组件添加阴影效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用，ArkTS卡片上不支持参数为 ShadowStyle类型。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueShadowOptions | ShadowStyle10+是为当前组件添加阴影效果。
入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。
入参类型为ShadowStyle时，可指定不同阴影样式。

grayscale

grayscale(value: number)

为组件添加灰度效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参0.0则图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)
默认值：0.0
取值范围：[0.0, 1.0]
说明：
设置小于0.0的值时，按值为0.0处理，设置大于1.0的值时，按值为1.0处理。

brightness

brightness(value: number)

为组件添加高光效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑，大于1时亮度增加，数值越大亮度越大，但大于2后亮度效果变化不明显。
默认值：1.0
推荐取值范围：[0, 2]
说明：
设置小于0的值时，按值为0处理。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

saturate

saturate(value: number)

为组件添加饱和度效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大，小于1时消色成分越大，饱和度越小。（百分比）
默认值：1.0
推荐取值范围：[0, 50)
说明：
设置小于0的值时，按值为0处理。

contrast

contrast(value: number)

为组件添加对比度效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是为当前组件添加对比度效果，入参为对比度的值。值为1时，显示原图，大于1时，值越大对比度越高，图像越清晰醒目，小于1时，值越小对比度越低，当对比度为0时，图像变为全灰。（百分比）
默认值：1.0
推荐取值范围：[0, 10)
说明：
设置小于0的值时，按值为0处理。

invert

invert(value: number | InvertOptions)

反转输入的图像。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | InvertOptions11+是反转输入的图像。
入参对象为number时,入参为图像反转的比例，值为1时完全反转，值为0则图像无变化。（百分比）
取值范围：[0, 1]
设置小于0的值时，按值为0处理。
入参对象为 InvertOptions时，对比背景颜色灰度值和阈值区间，背景颜色灰度值小于阈值区间时反色取high值，当背景颜色灰度值大于阈值区间时反色取low值，背景颜色灰度值在阈值区间内取值由high线性渐变到low。

sepia

sepia(value: number)

将图像转换为深褐色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是将图像转换为深褐色。入参为图像反转的比例，值为1则完全是深褐色的，值为0图像无变化。 （百分比）

hueRotate

hueRotate(value: number | string)

色相旋转效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | string是色相旋转效果，输入参数为旋转角度。
默认值：‘0deg’
取值范围：(-∞, +∞)
说明：
色调旋转360度会显示原始颜色。先将色调旋转180 度，然后再旋转-180度会显示原始颜色。数据类型为number时，值为90和’90deg’效果一致。

colorBlend7+

colorBlend(value: Color | string | Resource)

为组件添加颜色叠加效果。

系统能力： SystemCapability.ArkUI.ArkUI.Full

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数名类型必填说明
valueColor | string | Resource是为当前组件添加颜色叠加效果，入参为叠加的颜色。

linearGradientBlur12+

linearGradientBlur(value: number, options: LinearGradientBlurOptions)

为组件添加内容线性渐变模糊效果。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是为模糊半径，模糊半径越大越模糊，为0时不模糊。
取值范围：[0, 60]
线性梯度模糊包含两个部分fractionStops和direction。
optionsLinearGradientBlurOptions是设置线性渐变模糊效果。

renderGroup10+

renderGroup(value: boolean)

设置当前控件和子控件是否先整体离屏渲染绘制后再与父控件融合绘制。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是设置当前控件和子控件是否先整体离屏渲染绘制后再与父控件融合绘制。当前控件的不透明度不为1时绘制效果可能有差异。
默认值：false

blendMode11+

blendMode(value: BlendMode, type?: BlendApplyType)

将当前控件的内容（包含子节点内容）与下方画布（可能为离屏画布）已有内容进行混合。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueBlendMode是混合模式。
默认值：BlendMode.NONE
typeBlendApplyType否blendMode实现方式是否离屏。
默认值：BlendApplyType.FAST
说明：
1. 设置BlendApplyType.FAST时，不离屏。
2. 设置BlendApplyType.OFFSCREEN时，会创建当前组件大小的离屏画布，再将当前组件（含子组件）的内容绘制到离屏画布上，再用指定的混合模式与下方画布已有内容进行混合。

useShadowBatching11+

useShadowBatching(value: boolean)

控件内部子节点的阴影进行同层绘制，同层元素阴影重叠。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

参数：

参数名类型必填说明
valueboolean是控件内部子节点的阴影进行同层绘制，同层元素阴影重叠。
默认值：false
说明：
1. 默认不开启，如果子节点的阴影半径较大，节点各自的阴影会互相重叠。 当开启时，元素的阴影将不会重叠。
2. 不推荐useShadowBatching嵌套使用，如果嵌套使用，只会对当前的子节点生效，无法递推。

sphericalEffect12+

sphericalEffect(value: number)

设置组件的图像球面化程度。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是设置组件的图像球面化程度。
取值范围：[0,1]。
说明：
1. 如果value等于0则图像保持原样，如果value等于1则图像为完全球面化效果。在0和1之间，数值越大，则球面化程度越高。
value < 0 或者 value > 1为异常情况，value < 0按0处理，value > 1按1处理。
2. 如果组件的图像使用异步加载，则不支持球面效果。例如Image组件默认使用异步加载，如果要使用球面效果，就要设置syncLoad为true，但是这种做法不推荐。backgroundImage也是使用异步加载，所以如果设置了backgroundImage，不支持球面效果。
3. 如果组件设置了阴影，不支持球面效果。
4. 设置value大于0时，组件冻屏不更新并且把组件内容绘制到透明离屏buffer上，如果要更新组件属性则需要把value设置为0。

lightUpEffect12+

lightUpEffect(value: number)

设置组件图像亮起程度。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是设置组件图像亮起程度。
取值范围：[0,1]。
如果value等于0则图像为全黑，如果value等于1则图像为全亮效果。0到1之间数值越大，表示图像亮度越高。value < 0 或者 value > 1为异常情况，value < 0按0处理，value > 1按1处理。

pixelStretchEffect12+

pixelStretchEffect(options: PixelStretchEffectOptions)

设置组件的图像边缘像素扩展距离。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
optionsPixelStretchEffectOptions是设置组件的图像边缘像素扩展距离。
参数options包括上下左右四个方向的边缘像素扩展距离。
说明：
1. 如果距离为正值，表示向外扩展，放大原来图像大小。上下左右四个方向分别用边缘像素填充，填充的距离即为设置的边缘扩展的距离。
2. 如果距离为负值，表示内缩，但是最终图像大小不变。
内缩方式：
图像根据options的设置缩小，缩小大小为四个方向边缘扩展距离的绝对值。
图像用边缘像素扩展到原来大小。
3. 对options的输入约束：
上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩，方向一致。
所有方向的输入均为百分比或者具体值，不支持百分比和具体值混用。
所有异常情况下，显示为{0，0，0，0}效果，即跟原图保持一致。

systemBarEffect12+

systemBarEffect()

根据背景进行智能反色并且带有模糊效果。

系统能力： SystemCapability.ArkUI.ArkUI.Full

ShadowOptions对象说明

阴影属性集合，用于设置阴影的模糊半径、阴影的颜色、X轴和Y轴的偏移量。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

名称类型必填说明
radiusnumber | Resource是阴影模糊半径。
取值范围：[0, +∞)
单位：px
说明：
设置小于0的值时，按值为0处理。
如需使用vp单位的数值可用vp2px进行转换。
如果radius为Resource类型，则传入的值需为number类型。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
type10+ShadowType10+否阴影类型。
默认为COLOR。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
colorColor | string | Resource| ColoringStrategy10+否阴影的颜色。
默认为黑色。
说明：
从API version 11开始，该接口支持使用ColoringStrategy实现智能取色，智能取色功能不支持在ArkTS卡片、textShadow中使用。
当前仅支持平均取色和主色取色，智能取色区域为shadow绘制区域。
支持使用’average’字符串触发智能平均取色模式，支持使用’primary’字符串触发智能主色模式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
offsetXnumber | Resource否阴影的X轴偏移量。
默认值：0
单位：px
说明：
如需使用vp单位的数值可用vp2px进行转换。
如果offsetX为Resource类型，则传入的值需为number类型。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
offsetYnumber | Resource否阴影的Y轴偏移量。
默认值：0
单位：px
说明：
如需使用vp单位的数值可用vp2px进行转换。
如果offsetY为Resource类型，则传入的值需为number类型。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
fill11+boolean否阴影是否内部填充。
默认为false。
说明：
textShadow中该字段不生效。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

ShadowStyle10+枚举说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称描述
OUTER_DEFAULT_XS超小阴影。
OUTER_DEFAULT_SM小阴影。
OUTER_DEFAULT_MD中阴影。
OUTER_DEFAULT_LG大阴影。
OUTER_FLOATING_SM浮动小阴影。
OUTER_FLOATING_MD浮动中阴影。

BlendMode11+枚举说明

说明：

blendMode枚举中，s表示源像素，d表示目标像素，sa表示原像素透明度，da表示目标像素透明度，r表示混合后像素，ra表示混合后像素透明度。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

名称描述
NONE将上层图像直接覆盖到下层图像上，不进行任何混合操作。
CLEAR将源像素覆盖的目标像素清除为完全透明。
SRCr = s，只显示源像素。
DSTr = d，只显示目标像素。
SRC_OVERr = s + (1 - sa) * d，将源像素按照透明度进行混合，覆盖在目标像素上。
DST_OVERr = d + (1 - da) * s，将目标像素按照透明度进行混合，覆盖在源像素上。
SRC_INr = s * da，只显示源像素中与目标像素重叠的部分。
DST_INr = d * sa，只显示目标像素中与源像素重叠的部分。
SRC_OUTr = s * (1 - da)，只显示源像素中与目标像素不重叠的部分。
DST_OUTr = d * (1 - sa)，只显示目标像素中与源像素不重叠的部分。
SRC_ATOPr = s * da + d * (1 - sa)，在源像素和目标像素重叠的地方绘制源像素，在源像素和目标像素不重叠的地方绘制目标像素。
DST_ATOPr = d * sa + s * (1 - da)，在源像素和目标像素重叠的地方绘制目标像素，在源像素和目标像素不重叠的地方绘制源像素。
XORr = s * (1 - da) + d * (1 - sa)，只显示源像素与目标像素不重叠的部分。
PLUSr = min(s + d, 1)，将源像素值与目标像素值相加，并将结果作为新的像素值。
MODULATEr = s * d，将源像素与目标像素进行乘法运算，并将结果作为新的像素值。
SCREENr = s + d - s * d，将两个图像的像素值相加，然后减去它们的乘积来实现混合。
OVERLAY根据目标像素来决定使用MULTIPLY混合模式还是SCREEN混合模式。
DARKENrc = s + d - max(s * da, d * sa), ra = kSrcOver，当两个颜色重叠时，较暗的颜色会覆盖较亮的颜色。
LIGHTENrc = s + d - min(s * da, d * sa), ra = kSrcOver，将源图像和目标图像中的像素进行比较，选取两者中较亮的像素作为最终的混合结果。
COLOR_DODGE使目标像素变得更亮来反映源像素。
COLOR_BURN使目标像素变得更暗来反映源像素。
HARD_LIGHT根据源像素的值来决定目标像素变得更亮或者更暗。根据源像素来决定使用MULTIPLY混合模式还是SCREEN混合模式。
SOFT_LIGHT根据源像素来决定使用LIGHTEN混合模式还是DARKEN混合模式。
DIFFERENCErc = s + d - 2 * (min(s * da, d * sa)), ra = kSrcOver，对比源像素和目标像素，亮度更高的像素减去亮度更低的像素，产生高对比度的效果。
EXCLUSIONrc = s + d - two(s * d), ra = kSrcOver，对比源像素和目标像素，亮度更高的像素减去亮度更低的像素，产生柔和的效果。
MULTIPLYr = s * (1 - da) + d * (1 - sa) + s * d，将源图像与目标图像进行乘法混合，得到一张新的图像。
HUE保留源图像的亮度和饱和度，但会使用目标图像的色调来替换源图像的色调。
SATURATION保留目标像素的亮度和色调，但会使用源像素的饱和度来替换目标像素的饱和度。
COLOR保留源像素的饱和度和色调，但会使用目标像素的亮度来替换源像素的亮度。
LUMINOSITY保留目标像素的色调和饱和度，但会用源像素的亮度替换目标像素的亮度。

LinearGradientBlurOptions12+对象说明

名称类型必填说明
fractionStopsArray<FractionStop>是数组中保存的每一个二元数组（取值0-1，小于0则为0，大于0则为1）表示[模糊程度, 模糊位置]；模糊位置需严格递增，开发者传入的数据不符合规范会记录日志，渐变模糊数组中二元数组个数必须大于等于2，否则渐变模糊不生效。
directionGradientDirection是渐变模糊方向。
默认值：
GradientDirection.Bottom

FractionStop

FractionStop = [ number, number ]

定义模糊段。

系统能力： SystemCapability.ArkUI.ArkUI.Full

取值范围说明
number分数,值1表示不透明，0表示完全透明。
取值范围：[0,1]
number停止位置,值1表示区域结束位置，0表示区域开始位置。
取值范围:[0,1]

InvertOptions11+对象说明

前景智能取反色。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

名称类型必填说明
lownumber是背景颜色灰度值大于阈值区间时的取值。
highnumber是背景颜色灰度值小于阈值区间时的取值。
thresholdnumber是灰度阈值。
thresholdRangenumber是阈值范围。
说明：
灰度阈值上下偏移thresholdRange构成阈值区间，背景颜色灰度值在区间内取值由high线性渐变到low。

freeze12+

freeze(value: boolean)

设置当前控件和子控件是否整体离屏渲染绘制后重复绘制缓存，不再进行内部属性更新。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是设置当前控件和子控件是否整体离屏渲染绘制后重复绘制缓存，不再进行内部属性更新。当前控件的不透明度不为1时绘制效果可能有差异。
默认值：false

示例

示例1

模糊属性的用法，blur内容模糊，backdropBlur背景模糊。

// xxx.ets
@Entry
@Component
struct BlurEffectsExample {
  build() {
    Column({ space: 10 }) {
      // 对字体进行模糊
      Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Flex({ alignItems: ItemAlign.Center }) {
        Text('original text').margin(10)
        Text('blur text')
          .blur(5).margin(10)
        Text('blur text')
          .blur(10).margin(10)
        Text('blur text')
          .blur(15).margin(10)
      }.width('90%').height(40)
      .backgroundColor(0xF9CF93)


      // 对背景进行模糊
      Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Text()
        .width('90%')
        .height(40)
        .fontSize(16)
        .backdropBlur(3)
        .backgroundImage($r('app.media.image'))
        .backgroundImageSize({ width: 1200, height: 160 })
    }.width('100%').margin({ top: 5 })
  }
}
ts

示例2

设置图片的效果，包括阴影，灰度，高光，饱和度，对比度，图像反转，叠色，色相旋转等。

// xxx.ets
@Entry
@Component
struct ImageEffectsExample {
  build() {
    Column({ space: 5 }) {
      // 添加阴影效果，图片效果不变
      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 })

      // 添加内部阴影效果
      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)

      // 灰度效果0~1，越接近1，灰度越明显
      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)

      // 高光效果，1为正常图片，<1变暗，>1亮度增大
      Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).brightness(1.2)

      // 饱和度，原图为1
      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)

      // 对比度，1为原图，>1值越大越清晰，<1值越小越模糊
      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)

      // 图像反转比例
      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)

      // 叠色添加
      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)

      // 深褐色
      Text('sepia').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).sepia(0.8)

      // 色相旋转
      Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(30).hueRotate(90)
    }.width('100%').margin({ top: 5 })
  }
}
ts

示例3

设置组件的内容线性渐变模糊效果。

// 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 })
        }
      }
    }
  }
}

ts

示例4

renderGroup示例

// 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)
  }
}
ts

示例5

单独使用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)
  }
}
ts


BlendMode.OVERLAY,BlendApplyType.OFFSCREEN


不同的混合模式搭配是否需要离屏从而产生不同的效果。

示例6

blendMode搭配backgroundEffect实现文字异形模糊效果。
如果出现漏线问题，开发者应首先确保两个blendMode所在组件大小严格相同。如果确认相同，可能是组件边界落在浮点数坐标上导致，可尝试设置pixelRound通用属性，使产生的白线、暗线两侧的组件边界对齐到整数像素坐标上。

// xxx.ets
@Entry
@Component
struct Index {
  @State shColor: Color = Color.White;
  @State sizeDate: number = 20;
  @State rVal: number = 255;
  @State gVal: number = 255;
  @State bVal: number = 255;
  @State aVal: number = 0.1;
  @State rad: number = 40;
  @State satVal: number = 0.8;
  @State briVal: number = 1.5;
  build() {
    Stack() {
      Image($r('app.media.image'))
      Column() {
        Column({ space: 0 }) {
          Column() {
            Text('11')
              .fontSize(144)
              .fontWeight(FontWeight.Bold)
              .fontColor('rgba(255,255,255,1)')
              .fontFamily('HarmonyOS-Sans-Digit')
              .maxLines(1)
              .lineHeight(120 * 1.25)
              .height(120 * 1.25)
              .letterSpacing(4 * 1.25)
            Text('42')
              .fontSize(144)
              .fontWeight(FontWeight.Bold)
              .fontColor('rgba(255,255,255,1)')
              .fontFamily('HarmonyOS-Sans-Digit')
              .maxLines(1)
              .lineHeight(120 * 1.25)
              .height(120 * 1.25)
              .letterSpacing(4 * 1.25)
              .shadow({
                color: 'rgba(0,0,0,0)',
                radius: 20,
                offsetX: 0,
                offsetY: 0
              })
            Row() {
              Text('10月16日')
                .fontSize(this.sizeDate)
                .height(22)
                .fontWeight('medium')
                .fontColor('rgba(255,255,255,1)')
              Text('星期一')
                .fontSize(this.sizeDate)
                .height(22)
                .fontWeight('medium')
                .fontColor('rgba(255,255,255,1)')
            }
          }
          .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
          .pixelRound({
            start: PixelRoundCalcPolicy.FORCE_FLOOR ,
            top: PixelRoundCalcPolicy.FORCE_FLOOR ,
            end: PixelRoundCalcPolicy.FORCE_CEIL,
            bottom: PixelRoundCalcPolicy.FORCE_CEIL
          })
        }
        .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
        .backgroundEffect({
          radius: this.rad,
          saturation: this.satVal,
          brightness: this.briVal,
          color: this.getVolumeDialogWindowColor()
        })
        .justifyContent(FlexAlign.Center)
        .pixelRound({
          start: PixelRoundCalcPolicy.FORCE_FLOOR ,
          top: PixelRoundCalcPolicy.FORCE_FLOOR ,
          end: PixelRoundCalcPolicy.FORCE_CEIL,
          bottom: PixelRoundCalcPolicy.FORCE_CEIL
        })
      }
    }
  }
  getVolumeDialogWindowColor(): ResourceColor | string {
    return `rgba(${this.rVal.toFixed(0)}, ${this.gVal.toFixed(0)}, ${this.bVal.toFixed(0)}, ${this.aVal.toFixed(0)})`;
  }
}
ts

示例7

通过 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%')
    }
  }
 }

ts

示例8

useShadowBatching搭配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 })
  }
}
ts

示例9

设置组件的图像球面效果。

// xxx.ets
@Entry
@Component
struct SphericalEffectExample {
  build() {
    Stack() {
      TextInput({ placeholder: "请输入变化范围百分比（[0%,100%]）"})
        .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%")
  }
}

ts

效果图如下：

去掉sphericalEffect的设置，效果如下：

示例10

设置组件的图像渐亮效果。

// 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%")
  }
}

ts

效果图如下：

修改lightUpEffect参数值为0.2：

去掉lightUpEffect的设置，效果如下：

示例11

设置组件的图像边缘像素扩展效果。

// 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%")
  }
}

ts

效果图如下：

去掉pixelStretchEffect的设置，原图效果如下：

示例12

系统导航条智能反色

// 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)
    }
  }
}

ts

效果图如下：

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

「已注销」
关注
专栏目录
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5380
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：图像效果）
m0_64420071的博客
03-02 2685
ArkTS声明式开发（通用属性：图像效果）
【HarmonyOS NEXT】ArkTS组件如何设置阴影
Mayism123的博客
03-07 1477
图像效果中的shadow接口可以为组件添加阴影效果。图像效果 / 阴影 / shadow。ArkTS组件如何设置阴影?
鸿蒙HarmonyOS NEXT开发：Image（基础组件）
shudaoshanBBQ的博客
08-15 1498
Image为图片组件，常用于在应用中显示图片。
鸿蒙应用ArkTS开发- 选择图片、文件和拍照功能实现
m0_71524094的博客
04-25 3494
在使用App的时候，我们经常会在一些社交软件中聊天时发一些图片或者文件之类的多媒体文件，那在鸿蒙原生应用中，我们怎么开发这样的功能呢？ 本文会给大家对这个功能点进行讲解，我们采用的是拉起系统组件来进行图片、文件的选择，拉起系统相机进行拍照的这样一种实现方式。
鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：ImageBitmap）
m0_64420071的博客
03-19 1524
ArkTS声明式开发（画布组件：ImageBitmap）
HarmonyOS NEXT应用开发—图片压缩方案_arkts 压缩图片(3)
2401_83946722的博客
04-09 642
转存中…(img-EQofU8mM-1712663000522)]
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
《全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战》是一套针对初学者精心设计的鸿蒙操作系统开发教程。本教程旨在帮助没有编程基础的学员快速掌握HarmonyOS的开发技能，通过丰富的实例和清晰的讲解，...
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程
02-11
ArkTS 是一种专为鸿蒙 HarmonyOS 开发的应用程序编程语言，它基于 JavaScript 和 TypeScript 的语法特点，融合了面向对象编程和函数式编程的优点，使得开发者能够更加高效地开发应用。 - **核心概念**：理解 ArkTS ...
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
HarmonyOS鸿蒙开发指南:基于ArkTS开发 音频播放开发
sybh的博客
01-10 1596
音频播放的主要工作是将音频数据转码为可听见的音频模拟信号并通过输出设备进行播放，同时对播放任务进行管理。图1音频播放状态机图2音频播放零层图。
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：隐私遮罩）
m0_64420071的博客
03-05 1421
ArkTS声明式开发（通用属性：隐私遮罩）
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：背景设置）
m0_64420071的博客
03-01 8158
ArkTS声明式开发（通用属性：背景设置）
鸿蒙HarmonyOS应用开发：ArkTS声明式UI设计中的背景设置艺术
qq_44103359的博客
05-05 821
在鸿蒙HarmonyOS的应用开发中，ArkTS（ArkUI）是一种新兴的声明式开发框架，它允许开发者以更简洁、直观的方式构建用户界面。在ArkTS中，有许多通用属性可以应用于各种组件，以增强其功能和视觉效果。本文将重点探讨其中一个重要属性：背景设置。
Android阴影绘制的方式
xiaokangss的博客
10-19 1601
不管是自定义View也还是自定义ViewGroup，都是一样的效果，我们都是通过Paint画笔自己画出阴影，本质都是操作onDraw方法。核心类就是 BlurMaskFilter 类，它的兼容性比较好，它通过一个模糊的遮罩来实现几个重要参数：mMaskRadius:扩散的半径BlurMaskFilter.Blur.NORMAL：整个图像都被模糊掉BlurMaskFilter.Blur.SOLID：图像边界外产生一层与图像颜色一致阴影效果。
ArkTS中background相关的方法详细介绍
最新发布
LIUCHANGSHUO的博客
08-29 1023
当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。同时设置了background，backgroundColor，backgroundImage时，叠加显示，background在最上层。当设置top+bottom大于原图的高或者left+right大于原图的宽时，ResizableOptions属性设置不生效。params:设置组件背景提亮效果，包括：亮度变化速率，提亮程度。options:设置组件背景属性包括：饱和度，亮度，颜色。
鸿蒙ArkTS容器组件：【TabContent】
2401_82772199的博客
07-15 1080
仅在Tabs中使用，对应一个切换页签的内容视图。该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
鸿蒙Harmony应用开发—ArkTS声明式开发（绘制组件：Polyline）
m0_64420071的博客
03-18 732
ArkTS声明式开发（绘制组件：Polyline）
【鸿蒙软件开发】ArkTS常见组件之单选框Radio和切换按钮Toggle
m0_62599305的博客
10-22 4060
Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。具体用法请参考Radio。Toggle组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换。具体用法请参考Toggle。其中对于Toggle独特的属性是，他是当Toggle选中后，所呈现的颜色以上就是今天要讲的内容，本文介绍了单选框Radio和切换按钮Toggle的使用，使用这些组件可以帮助我们快速构建ArkTS的界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值