鸿蒙HarmonyOS NEXT开发:点光源设置 (系统接口)

94 篇文章 0 订阅

点光源设置 (系统接口)

设置点光源样式。

说明:

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

只有Image、Column、Flex、Row、Stack支持设置点光源。

PointLightStyle

通过设置光源和被照亮的类型实现点光源照亮周围组件的UI效果。

系统接口: 此接口为系统接口。

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

名称参数类型必填描述
lightSourceLightSource设置光源属性,光源会影响到周围标记为可以被照亮的组件,并在组件上产生光效。
默认值:无光源
illuminatedIlluminatedType设置当前组件是否可以被光源照亮,以及被照亮的类型。
默认值:IlluminatedType.NONE
bloomnumber设置组件的发光强度,建议取值范围为0-1。
默认值:0

LightSource对象说明

一个组件支持添加1个光源。

系统接口: 此接口为系统接口。

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

名称参数类型必填描述
positionXDimension光源相对于当前组件的X坐标。
positionYDimension光源相对于当前组件的Y坐标。
positionZDimension光源高度。光源越高,照射范围越大。
intensitynumber光源强度,建议取值范围0-1。当光源强度为0时,光源不发光。
color12+ResourceColor光源颜色。
默认值:Color.White

示例

// xxx.ets
@Entry
@Component
struct Index {
  @State lightIntensity: number = 0;
  @State bloomValue: number = 0;

  build() {
    Row({ space: 20 }) {
      Flex()
        .pointLight({ illuminated: IlluminatedType.BORDER })
        .backgroundColor(0x307af7)
        .size({ width: 50, height: 50 })
        .borderRadius(25)

      Flex()
        .pointLight({
          lightSource: { intensity: this.lightIntensity, positionX: "50%", positionY: "50%", positionZ: 80 },
          bloom: this.bloomValue
        })
        .animation({ duration: 333 })
        .backgroundColor(0x307af7)
        .size({ width: 50, height: 50 })
        .borderRadius(25)
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
            this.lightIntensity = 2;
            this.bloomValue = 1;
          } else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
            this.lightIntensity = 0;
            this.bloomValue = 0;
          }
        })

      Flex()
        .pointLight({ illuminated: IlluminatedType.BORDER_CONTENT })
        .backgroundColor(0x307af7)
        .size({ width: 50, height: 50 })
        .borderRadius(25)
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Black)
    .size({ width: '100%', height: '100%' })
  }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值