HarmonyOS NEXT鸿蒙开发:图像效果:shadow阴影

介绍

官网API

为组件添加阴影效果

API

shadow(value: ShadowOptions | ShadowStyle)

参数:

  • value:类型:ShadowOptions | ShadowStyle1,为当前组件添加阴影效果。

    • 类型为 ShadowOptions 时,可以指定 模糊半径、阴影的颜色、X轴 和 Y轴 的偏移量。

    • 入参类型为 ShadowStyle 时,可指定不同阴影样式。

ShadowOptions

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

  • radius:类型:number | Resource,必填,阴影模糊半径。取值范围:[0, +∞),单位:px。如需使用vp单位的数值可用 vp2px 进行转换。如果radius为Resource类型,则传入的值需为number类型。

  • type:类型:ShadowType,阴影类型。默认为COLOR。

  • color:类型:Color | string | Resource| ColoringStrategy,阴影的颜色。默认为黑色。

  • offsetX:类型:number | Resource,阴影的X轴偏移量。默认值:0,单位:px。如需使用vp单位的数值可用 vp2px 进行转换。

  • offsetY:类型:number | Resource,阴影的Y轴偏移量。默认值:0。单位:px。如需使用vp单位的数值可用 vp2px 进行转换。

  • fill:类型:boolean,阴影是否内部填充。默认为false。textShadow中该字段不生效。

ShadowStyle

  • OUTER_DEFAULT_XS:超小阴影
  • OUTER_DEFAULT_SM:小阴影
  • OUTER_DEFAULT_MD:中阴影
  • OUTER_DEFAULT_LG:大阴影
  • OUTER_FLOATING_SM:浮动小阴影
  • OUTER_FLOATING_MD:浮动中阴影

ShadowType

  • COLOR:颜色。
  • BLUR:模糊。

ColoringStrategy

智能取色枚举类型,用于设置前景色

  • INVERT:设置前景色为控件背景色的反色。

  • AVERAGE:设置控件背景阴影色为控件背景阴影区域的平均色。

  • PRIMARY:设置控件背景阴影色为控件背景阴影区域的主色。

例子

Image($r("app.media.muyu1"))
          .width(200)
          .shadow({
            radius:224,
            color:"#ffff00",
            fill:true,
          })

原文出处:/show_1IX8jPifP43M.html