• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 点光源设置 (系统接口)
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @jiangtao92-->
5<!--Designer: @piggyguy-->
6<!--Tester: @songyanhong-->
7<!--Adviser: @HelloCrease-->
8
9设置点光源样式。
10
11>  **说明：**
12>
13>  从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
14>
15>  只有Image、Column、Flex、Row、Stack支持设置点光源。
16
17## PointLightStyle
18
19通过设置光源和被照亮的类型实现点光源照亮周围组件的UI效果。
20
21**系统接口：** 此接口为系统接口。
22
23**系统能力：** SystemCapability.ArkUI.ArkUI.Full
24
25| 名称        | 参数类型                                                    | 必填 | 描述                                                         |
26| ----------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ |
27| lightSource | [LightSource](#lightsource对象说明)                         | 否   | 设置光源属性，光源会影响到周围标记为可以被照亮的组件，并在组件上产生光效。<br/>默认值：无光源 |
28| illuminated | [IlluminatedType](ts-appendix-enums-sys.md#illuminatedtype) | 否   | 设置当前组件是否可以被光源照亮，以及被照亮的类型。<br/>默认值：IlluminatedType.NONE |
29| bloom       | number                                                      | 否   | 设置组件的发光强度，建议取值范围为0-1。<br/>默认值：0        |
30
31## LightSource对象说明
32
33一个组件支持添加1个光源。
34
35**系统接口：** 此接口为系统接口。
36
37**系统能力：** SystemCapability.ArkUI.ArkUI.Full
38
39| 名称                | 参数类型                                   | 必填 | 描述                                                     |
40| ------------------- | ------------------------------------------ | ---- | -------------------------------------------------------- |
41| positionX           | [Dimension](ts-types.md#dimension10)       | 是   | 光源相对于当前组件的X坐标。                              |
42| positionY           | [Dimension](ts-types.md#dimension10)       | 是   | 光源相对于当前组件的Y坐标。                              |
43| positionZ           | [Dimension](ts-types.md#dimension10)       | 是   | 光源高度。光源越高，照射范围越大。                       |
44| intensity           | number                                     | 是   | 光源强度，建议取值范围0-1。当光源强度为0时，光源不发光。 |
45| color<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否   | 光源颜色。<br/>默认值：Color.White                       |
46
47## 示例
48
49```ts
50// xxx.ets
51@Entry
52@Component
53struct Index {
54  @State lightIntensity: number = 0;
55  @State bloomValue: number = 0;
56
57  build() {
58    Row({ space: 20 }) {
59      Flex()
60        .pointLight({ illuminated: IlluminatedType.BORDER })
61        .backgroundColor(0x307af7)
62        .size({ width: 50, height: 50 })
63        .borderRadius(25)
64
65      Flex()
66        .pointLight({
67          lightSource: { intensity: this.lightIntensity, positionX: "50%", positionY: "50%", positionZ: 80 },
68          bloom: this.bloomValue
69        })
70        .animation({ duration: 333 })
71        .backgroundColor(0x307af7)
72        .size({ width: 50, height: 50 })
73        .borderRadius(25)
74        .onTouch((event: TouchEvent) => {
75          if (event.type === TouchType.Down) {
76            this.lightIntensity = 2;
77            this.bloomValue = 1;
78          } else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
79            this.lightIntensity = 0;
80            this.bloomValue = 0;
81          }
82        })
83
84      Flex()
85        .pointLight({ illuminated: IlluminatedType.BORDER_CONTENT })
86        .backgroundColor(0x307af7)
87        .size({ width: 50, height: 50 })
88        .borderRadius(25)
89    }
90    .justifyContent(FlexAlign.Center)
91    .backgroundColor(Color.Black)
92    .size({ width: '100%', height: '100%' })
93  }
94}
95```
96