0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙ArkTS声明式开发:跨平台支持列表【图像效果】 通用属性

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-06-04 16:34 次阅读

图像效果

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

说明:
开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

属性

名称参数类型默认值描述
blurnumber-为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。 取值范围:[0, +∞) 从API version 9开始,该接口支持在ArkTS卡片中使用。
backdropBlurnumber-为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。 取值范围:[0, +∞) 从API version 9开始,该接口支持在ArkTS卡片中使用。
shadow[ShadowOptions][ShadowStyle]10+-
grayscalenumber0.0为当前组件添加灰度效果。值定义为灰度转换的比例,入参1.0则完全转为灰度图像,入参则0.0图像无变化,入参在0.0和1.0之间时,效果呈线性变化。(百分比) 取值范围:[0, 1]**说明:**设置小于0的值时,按值为0处理,设置大于1的值时,按值为1处理。 从API version 9开始,该接口支持在ArkTS卡片中使用。
ightnessnumber1.0为当前组件添加高光效果,入参为高光比例,值为1时没有效果,小于1时亮度变暗,0为全黑,大于1时亮度增加,数值越大亮度越大。 取值范围:[0, +∞)**说明:**设置小于0的值时,按值为0处理。 从API version 9开始,该接口支持在ArkTS卡片中使用。
saturatenumber1.0为当前组件添加饱和度效果,饱和度为颜色中的含色成分和消色成分(灰)的比例,入参为1时,显示原图像,大于1时含色成分越大,饱和度越大,小于1时消色成分越大,饱和度越小。(百分比) 取值范围:[0, +∞)**说明:**设置小于0的值时,按值为0处理。 从API version 9开始,该接口支持在ArkTS卡片中使用。
contrastnumber1.0为当前组件添加对比度效果,入参为对比度的值。值为1时,显示原图,大于1时,值越大对比度越高,图像越清晰醒目,小于1时,值越小对比度越低,当对比度为0时,图像变为全灰。(百分比) 取值范围:[0, +∞)**说明:**设置小于0的值时,按值为0处理。 从API version 9开始,该接口支持在ArkTS卡片中使用。
invertnumber0反转输入的图像。入参为图像反转的比例,值为1时完全反转,值为0则图像无变化。(百分比) 取值范围:[0, 1]**说明:**设置小于0的值时,按值为0处理。 从API version 9开始,该接口支持在ArkTS卡片中使用。
sepianumber0将图像转换为深褐色。入参为图像反转的比例,值为1则完全是深褐色的,值为0图像无变化。 (百分比) 从API version 9开始,该接口支持在ArkTS卡片中使用。
hueRotatenumberstring'0deg'
colorBlend 8+[Color]string[Resource]
sphericalEffect10+number-设置组件的图像球面化程度。 取值范围:[0,1]。**说明:**1. 如果value等于0则图像保持原样,如果value等于1则图像为完全球面化效果。在0和1之间,数值越大,则球面化程度越高。value < 0 或者 value > 1为异常情况,value < 0按0处理,value > 1按1处理。 2. 如果组件的图像使用异步加载,则不支持球面效果。例如Image组件默认使用异步加载,如果要使用球面效果,就要设置syncLoadtrue,但是这种做法不推荐backgroundImage也是使用异步加载,所以如果设置了backgroundImage,不支持球面效果。 3. 如果组件设置了阴影,不支持球面效果。**系统接口:**此接口为系统接口。
lightUpEffect10+number-设置组件图像亮起程度。 取值范围:[0,1]。 如果value等于0则图像为全黑,如果value等于1则图像为全亮效果。0到1之间数值越大,表示图像亮度越高。value < 0或者value > 1为异常情况,value < 0按0处理,value > 1按1处理。**系统接口:**此接口为系统接口。
pixelStretchEffect10+[PixelStretchEffectOptions]-设置组件的图像边缘像素扩展距离。 参数options包括上下左右四个方向的边缘像素扩展距离。**说明:**1. 如果距离为正值,表示向外扩展,放大原来图像大小。上下左右四个方向分别用边缘像素填充,填充的距离即为设置的边缘扩展的距离。 2. 如果距离为负值,表示内缩,但是最终图像大小不变。 内缩方式: 图像根据options的设置缩小,缩小大小为四个方向边缘扩展距离的绝对值。 图像用边缘像素扩展到原来大小。 3. 对options的输入约束: 上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩,方向一致。 所有方向的输入均为百分比或者具体值,不支持百分比和具体值混用。 所有异常情况下,显示为{0,0,0,0}效果,即跟原图保持一致。**系统接口:**此接口为系统接口。

ShadowOptions对象说明

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

从API version 9开始,该接口支持在ArkTS卡片中使用。

名称类型必填说明
radiusnumber[Resource]
color[Color]string[Resource]
offsetXnumber[Resource]
offsetYnumber[Resource]

ShadowStyle10+枚举说明

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

示例

示例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(1).margin(10)
        Text('blur text')
          .blur(2).margin(10)
        Text('blur text')
          .blur(3).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('/pages/attrs/image/image.jpg')
        .backgroundImageSize({ width: 1200, height: 160 })
    }.width('100%').margin({ top: 5 })
  }
}

textblur

示例2

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

// xxx.ets
@Entry
@Component
struct ImageEffectsExample {
  build() {
    Column({ space: 10 }) {
      // 添加阴影效果,图片效果不变
      Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image'))
        .width('90%')
        .height(40)
        .shadow({ radius: 10, color: Color.Green, offsetX: 20, offsetY: 30 })

      // 灰度效果0~1,越接近1,灰度越明显
      Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(40).grayscale(0.3)
      Image($r('app.media.image')).width('90%').height(40).grayscale(0.8)

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

      // 饱和度,原图为1
      Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(40).saturate(2.0)
      Image($r('app.media.image')).width('90%').height(40).saturate(0.7)

      // 对比度,1为原图, >1值越大越清晰,< 1值越小越模糊
      Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(40).contrast(2.0)
      Image($r('app.media.image')).width('90%').height(40).contrast(0.8)

      // 图像反转比例
      Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(40).invert(0.2)
      Image($r('app.media.image')).width('90%').height(40).invert(0.8)

      // 叠色添加
      Text('colorBlend').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.image')).width('90%').height(40).colorBlend(Color.Green)
      Image($r('app.media.image')).width('90%').height(40).colorBlend(Color.Blue)

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

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

imageeffect

示例3

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

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

效果图如下:

textInputSpherical1

去掉sphericalEffect的设置,效果如下:

textInputSpherical2

示例4

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

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

效果图如下:

textLightUp3

修改lightUpEffect参数值为0.2:

textLightUp2

去掉lightUpEffect的设置,效果如下:

textLightUp1

示例5

// xxx.ets
@Entry
@Component
struct LightUpExample {
  @State isLunar: boolean = false
  private selectedDate: Date = new Date('2028-08-08')
  build() {
    Stack() {
      DatePicker({
        start: new Date('1970-1-1'),
        end: new Date('2100-1-1'),
        selected: this.selectedDate
      })
        .lunar(this.isLunar)
        .onChange((value: DatePickerResult) = > {
          this.selectedDate.setFullYear(value.year, value.month, value.day)
          console.info('select current date is: ' + JSON.stringify(value))
        })
        .lightUpEffect(0.6)

    }.alignContent(Alignment.Center).width("100%").height("100%")
  }
}

datePickerLightUp2

去掉lightUpEffect的设置,效果如下:

datePickerLightUp1

示例6

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

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

效果图如下:

textPixelStretch1

去掉pixelStretchEffect的设置,原图效果如下:

textPixelStretch2

示例7

基于示例6,现在把边缘扩展距离改为非正值。

// 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)
        .width('50%')
        .pixelStretchEffect({top:-10,left:-10,right:-10,bottom:-10 })
    }.alignContent(Alignment.Center).width("100%").height("100%")
  }
}

效果图如下:

textPixelStretch3

跟原图对比发现,效果图分两步实现:
1、原图大小缩小,缩小后的大小为原图大小减去像素 收缩的距离。例如,原图大小为100*100,设置了pixelStretchEffect({top:-10,left:-10, right:-10,bottom:-10 }),则缩小后的大小为(100-10-10)*(100-10-10),即80*80
2、使用边缘像素扩展,将图像扩展为原图大小。

示例8

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

搜狗高速浏览器截图20240326151344.png

`HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿`

// xxx.ets
@Entry
@Component
struct ImageExample1 {
  private_resource1:Resource = $r('app.media.1')
  @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 })
        }
      }
    }
  }
}

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 鸿蒙
    +关注

    关注

    57

    文章

    2348

    浏览量

    42829
收藏 人收藏

    评论

    相关推荐

    HarmonyOS/OpenHarmony应用开发-ArkTS声明开发范式

    基于ArkTS声明开发范式的方舟开发框架是一套开发极简、高性能、
    发表于 01-17 15:09

    鸿蒙ArkTS声明开发平台支持列表【按键事件】

    按键事件指组件与键盘、遥控器等按键设备交互时触发的事件,适用于所有可获焦组件,例如Button。对于Text,Image等默认不可获焦的组件,可以设置focusable属性为true后使用按键事件。
    的头像 发表于 05-28 18:12 865次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【按键事件】

    鸿蒙ArkTS声明开发平台支持列表【布局约束】 通用属性

    通过组件的宽高比和显示优先级约束组件显示效果
    的头像 发表于 05-30 09:35 353次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【布局约束】 <b class='flag-5'>通用</b><b class='flag-5'>属性</b>

    鸿蒙ArkTS声明开发平台支持列表【显隐控制】 通用属性

    控制当前组件显示或隐藏。注意,即使组件处于隐藏状态,在页面刷新时仍存在重新创建过程,因此当对性能有严格要求时建议使用[条件渲染]代替。 默认值:Visibility.Visible 从API version 9开始,该接口支持ArkTS卡片中使用。
    的头像 发表于 06-03 14:46 588次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【显隐控制】 <b class='flag-5'>通用</b><b class='flag-5'>属性</b>

    鸿蒙ArkTS声明开发平台支持列表【形状裁剪】 通用属性

    参数为相应类型的组件,按指定的形状对当前组件进行裁剪;参数为boolean类型时,设置是否按照父容器边缘轮廓进行裁剪。 默认值:false 从API version 9开始,该接口支持ArkTS卡片中使用。
    的头像 发表于 06-04 15:22 470次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【形状裁剪】 <b class='flag-5'>通用</b><b class='flag-5'>属性</b>

    鸿蒙ArkTS声明开发平台支持列表【栅格设置】 通用属性

    默认占用列数,指useSizeType属性没有设置对应尺寸的列数(span)时,占用的栅格列数。
    的头像 发表于 06-05 09:28 396次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【栅格设置】 <b class='flag-5'>通用</b><b class='flag-5'>属性</b>

    鸿蒙ArkTS声明开发平台支持列表【颜色渐变】 通用属性

    设置组件的颜色渐变效果
    的头像 发表于 06-05 09:17 694次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【颜色渐变】 <b class='flag-5'>通用</b><b class='flag-5'>属性</b>

    鸿蒙ArkTS声明开发平台支持列表【菜单控制】 通用属性

    为组件绑定弹出菜单,弹出菜单以垂直列表形式显示菜单项,可通过长按、点击或鼠标右键触发。
    的头像 发表于 06-06 09:17 677次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【菜单控制】 <b class='flag-5'>通用</b><b class='flag-5'>属性</b>

    鸿蒙ArkTS声明开发平台支持列表【悬浮态效果通用属性

    设置组件的鼠标悬浮态显示效果
    的头像 发表于 06-06 09:12 438次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【悬浮态<b class='flag-5'>效果</b>】 <b class='flag-5'>通用</b><b class='flag-5'>属性</b>

    鸿蒙ArkTS声明开发平台支持列表【组件标识】 通用属性

    id为组件的唯一标识,在整个应用内唯一。本模块提供组件标识相关接口,可以获取指定id组件的属性,也提供向指定id组件发送事件的功能。
    的头像 发表于 06-06 15:51 384次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【组件标识】 <b class='flag-5'>通用</b><b class='flag-5'>属性</b>

    鸿蒙ArkTS声明开发平台支持列表【多态样式】 通用属性

    设置组件不同状态的样式。 从API version 9开始,该接口支持ArkTS卡片中使用。
    的头像 发表于 06-07 09:48 399次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【多态样式】 <b class='flag-5'>通用</b><b class='flag-5'>属性</b>

    鸿蒙ArkTS声明开发平台支持列表【分布迁移标识】 通用属性

    组件的分布迁移标识,指明了该组件在分布迁移场景下可以将特定状态恢复到对端设备。
    的头像 发表于 06-07 21:15 397次阅读

    鸿蒙ArkTS声明开发平台支持列表【点击回弹效果通用属性

    设置组件点击时回弹效果
    的头像 发表于 06-11 16:33 363次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【点击回弹<b class='flag-5'>效果</b>】 <b class='flag-5'>通用</b><b class='flag-5'>属性</b>

    鸿蒙ArkTS声明开发平台支持列表【无障碍属性通用属性

    组件可以设置相应的无障碍属性和事件来更好地使用无障碍能力。
    的头像 发表于 06-11 17:30 399次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【无障碍<b class='flag-5'>属性</b>】 <b class='flag-5'>通用</b><b class='flag-5'>属性</b>

    鸿蒙ArkTS声明开发平台支持列表【文本通用

    文本通用属性目前只针对包含文本元素的组件,设置文本样式。
    的头像 发表于 06-13 15:09 475次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>开发</b>:<b class='flag-5'>跨</b><b class='flag-5'>平台</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【文本<b class='flag-5'>通用</b>】