update

Signed-off-by: Nyamila <tianyu55@huawei.com>

zh-cn/application-dev/reference/arkui-ts/Readme-CN.md

@@ -33,20 +33,17 @@
     - [颜色渐变](ts-universal-attributes-gradient-color.md)
     - [Popup控制](ts-universal-attributes-popup.md)
     - [Menu控制](ts-universal-attributes-menu.md)
-    - [点击控制](ts-universal-attributes-click.md)
     - [焦点控制](ts-universal-attributes-focus.md)
     - [悬浮态效果](ts-universal-attributes-hover-effect.md)
     - [组件标识](ts-universal-attributes-component-id.md)
-    - [触摸热区设置](ts-universal-attributes-touch-target.md)
     - [多态样式](ts-universal-attributes-polymorphic-style.md)
-    - [触摸测试控制](ts-universal-attributes-hit-test-behavior.md)
-    - [组件背景模糊](ts-universal-attributes-backgroundBlurStyle.md)
     - [分布式迁移标识](ts-universal-attributes-restoreId.md)
     - [前景色设置](ts-universal-attributes-foreground-color.md)
-    - [图像球面效果](ts-universal-attributes-sphericalEffect.md)
-    - [图像渐亮效果](ts-universal-attributes-lightUpEffect.md)
-    - [图像边缘像素扩展效果](ts-universal-attributes-pixelStretchEffect.md)
     - [点击回弹](ts-universal-attributes-click-effect.md)
+    - 触摸交互控制
+      - [点击控制](ts-universal-attributes-click.md)
+      - [触摸热区设置](ts-universal-attributes-touch-target.md)
+      - [触摸测试控制](ts-universal-attributes-hit-test-behavior.md)
     - 模态转场设置
       - [全屏模态转场](ts-universal-attributes-modal-transition.md)
       - [半模态转场](ts-universal-attributes-sheet-transition.md)

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md

@@ -14,9 +14,19 @@
 | backgroundImage | src:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | src：图片地址，支持网络图片资源地址和本地图片资源地址和Base64，不支持svg类型的图片。<br/>repeat：设置背景图片的重复样式，默认不重复。当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
 | backgroundImageSize | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | 设置背景图像的高度和宽度。当输入为{width:&nbsp;Length,&nbsp;height:&nbsp;Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。<br/>width和height取值范围： [0, +∞)<br/>默认值：ImageSize.Auto<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置为小于0的值时，按值为0显示。当设置了height未设置width时，width根据图片原始宽高比进行调整。 |
 | backgroundImagePosition | [Position](ts-types.md#position8)&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置，即相对于组件左上角的坐标。<br/>默认值：<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} <br/> x和y值设置百分比时，偏移量是相对组件自身宽高计算的。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| backgroundBlurStyle<sup>9+</sup> | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),<br/>options<sup>10+</sup>?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10对象说明) | 为当前组件提供一种在背景和内容之间的模糊能力。<br/>value: 背景模糊样式。模糊样式中封装了模糊半径、蒙版颜色、蒙版透明度、饱和度四个参数。<br/>options: 可选参数，背景模糊选项。<br/>该接口支持在ArkTS卡片中使用。 |
+
+## BackgroundBlurStyleOptions<sup>10+</sup>对象说明
+
+| 名称                        | 参数类型                                                | 必填 | 描述                                                         |
+| --------------------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ |
+| colorMode<sup>10+</sup>     | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | 否   | 背景模糊效果使用的深浅色模式。<br/>默认值：ThemeColorMode.System |
+| adaptiveColor<sup>10+</sup> | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10)   | 否   | 背景模糊效果使用的取色模式。<br/>默认值：AdaptiveColor.Default |
 
 ## 示例
 
+### 示例1
+
 ```ts
 // xxx.ets
 @Entry
@@ -84,3 +94,30 @@ struct BackgroundExample {
 ```
 
 ![zh-cn_image_0000001219982703](figures/zh-cn_image_0000001219982703.png)
+
+### 示例2
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct BackgroundBlurStyleDemo {
+  build() {
+    Column() {
+      Row() {
+        Text("Thin Material")
+      }
+      .width('50%')
+      .height('50%')
+      .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT })
+      .position({ x: '15%', y: '30%' })
+    }
+    .height('100%')
+    .width('100%')
+    .backgroundImage($r('app.media.bg'))
+    .backgroundImageSize(ImageSize.Cover)
+  }
+}
+```
+
+![zh-cn_image_background_blur_style](figures/zh-cn_image_background_blur_style.png)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md

-# 组件背景模糊
-
-为当前组件添加背景模糊效果。
-
->  **说明：**
-> 
->  从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
->
->  此接口为系统接口。
-
-## 属性
-
-| 名称                  | 参数                     | 描述                     |
-| -------------------- | ----------------------- | ------------------------ |
-| backgroundBlurStyle  | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),<br/>options<sup>10+</sup>?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10对象说明) | 为当前组件提供一种在背景和内容之间的模糊能力。<br/>value: 背景模糊样式。模糊样式中封装了模糊半径、蒙版颜色、蒙版透明度、饱和度四个参数。<br/>options: 可选参数，背景模糊选项。<br/>该接口支持在ArkTS卡片中使用。 |
- 
-## BackgroundBlurStyleOptions<sup>10+</sup>对象说明
-
-| 名称 | 参数类型 | 必填 | 描述 |
-| ----------- | ------| ------ | ------ |
-| colorMode<sup>10+</sup> | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | 否 | 背景模糊效果使用的深浅色模式。<br/>默认值：ThemeColorMode.System |
-| adaptiveColor<sup>10+</sup> | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | 否 | 背景模糊效果使用的取色模式。<br/>默认值：AdaptiveColor.Default |
-
-## 示例
-
-```ts
-// xxx.ets
-@Entry
-@Component
-struct BackgroundBlurStyleDemo {
-  build() {
-    Column() {
-      Row() {
-        Text("Thin Material")
-      }
-      .width('50%')
-      .height('50%')
-      .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.Light, adaptiveColor: AdaptiveColor.Default })
-      .position({ x: '15%', y: '30%' })
-    }
-    .height('100%')
-    .width('100%')
-    .backgroundImage($r('app.media.bg'))
-    .backgroundImageSize(ImageSize.Cover)
-  }
-}
-```
-![zh-cn_image_background_blur_style](figures/zh-cn_image_background_blur_style.png)

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md

 # 图像效果
 
-设置组件的模糊，阴影效果以及设置图片的图像效果。
+设置组件的模糊、阴影、球面效果以及设置图片的图像效果。
 
 >  **说明：**
 >
@@ -10,19 +10,22 @@
 ## 属性
 
 
-| 名称                          | 参数类型                                                     | 默认值 | 描述                                                         |
-| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
-| blur                          | number                                                       | -      | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。<br/>取值范围：[0, +∞)<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| backdropBlur                  | number                                                       | -      | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。<br/>取值范围：[0, +∞)<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| shadow                        | [ShadowOptions](#shadowoptions对象说明) \| [ShadowStyle](#shadowstyle10枚举说明) | -      | 为当前组件添加阴影效果。<br/>入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。<br/>入参类型为ShadowStyle时，可指定不同阴影样式。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用，ArkTS卡片上不支持参数为 [ShadowStyle](#shadowstyle10枚举说明)类型。 |
-| grayscale                     | number                                                       | 0.0    | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)<br/>取值范围：[0, 1]<br/>**说明：** <br/>设置小于0的值时，按值为0处理，设置大于1的值时，按值为1处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| brightness                    | number                                                       | 1.0    | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑，大于1时亮度增加，数值越大亮度越大。<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按值为0处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| saturate                      | number                                                       | 1.0    | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大，小于1时消色成分越大，饱和度越小。（百分比）<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按值为0处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| contrast                      | number                                                       | 1.0    | 为当前组件添加对比度效果，入参为对比度的值。值为1时，显示原图，大于1时，值越大对比度越高，图像越清晰醒目，小于1时，值越小对比度越低，当对比度为0时，图像变为全灰。（百分比）<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按值为0处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| invert                        | number                                                       | 0      | 反转输入的图像。入参为图像反转的比例，值为1时完全反转，值为0则图像无变化。（百分比）<br/>取值范围：[0, 1]<br/>**说明：** <br/>设置小于0的值时，按值为0处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| sepia                         | number                                                       | 0      | 将图像转换为深褐色。入参为图像反转的比例，值为1则完全是深褐色的，值为0图像无变化。&nbsp;（百分比）<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| hueRotate                     | number&nbsp;\|&nbsp;string                                   | '0deg' | 色相旋转效果，输入参数为旋转角度。<br/>取值范围：(-∞, +∞)<br/>**说明：** <br/>色调旋转360度会显示原始颜色。先将色调旋转180 度，然后再旋转-180度会显示原始颜色。数据类型为number时，值为90和'90deg'效果一致。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| colorBlend&nbsp;<sup>8+</sup> | [Color](ts-appendix-enums.md#color)&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | -      | 为当前组件添加颜色叠加效果，入参为叠加的颜色。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| 名称                             | 参数类型                                                     | 默认值 | 描述                                                         |
+| -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
+| blur                             | number                                                       | -      | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。<br/>取值范围：[0, +∞)<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| backdropBlur                     | number                                                       | -      | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。<br/>取值范围：[0, +∞)<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| shadow                           | [ShadowOptions](#shadowoptions对象说明) \| [ShadowStyle](#shadowstyle10枚举说明) | -      | 为当前组件添加阴影效果。<br/>入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。<br/>入参类型为ShadowStyle时，可指定不同阴影样式。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用，ArkTS卡片上不支持参数为 [ShadowStyle](#shadowstyle10枚举说明)类型。 |
+| grayscale                        | number                                                       | 0.0    | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)<br/>取值范围：[0, 1]<br/>**说明：** <br/>设置小于0的值时，按值为0处理，设置大于1的值时，按值为1处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| brightness                       | number                                                       | 1.0    | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑，大于1时亮度增加，数值越大亮度越大。<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按值为0处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| saturate                         | number                                                       | 1.0    | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大，小于1时消色成分越大，饱和度越小。（百分比）<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按值为0处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| contrast                         | number                                                       | 1.0    | 为当前组件添加对比度效果，入参为对比度的值。值为1时，显示原图，大于1时，值越大对比度越高，图像越清晰醒目，小于1时，值越小对比度越低，当对比度为0时，图像变为全灰。（百分比）<br/>取值范围：[0, +∞)<br/>**说明：** <br/>设置小于0的值时，按值为0处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| invert                           | number                                                       | 0      | 反转输入的图像。入参为图像反转的比例，值为1时完全反转，值为0则图像无变化。（百分比）<br/>取值范围：[0, 1]<br/>**说明：** <br/>设置小于0的值时，按值为0处理。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| sepia                            | number                                                       | 0      | 将图像转换为深褐色。入参为图像反转的比例，值为1则完全是深褐色的，值为0图像无变化。&nbsp;（百分比）<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| hueRotate                        | number&nbsp;\|&nbsp;string                                   | '0deg' | 色相旋转效果，输入参数为旋转角度。<br/>取值范围：(-∞, +∞)<br/>**说明：** <br/>色调旋转360度会显示原始颜色。先将色调旋转180 度，然后再旋转-180度会显示原始颜色。数据类型为number时，值为90和'90deg'效果一致。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| colorBlend&nbsp;<sup>8+</sup>    | [Color](ts-appendix-enums.md#color)&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | -      | 为当前组件添加颜色叠加效果，入参为叠加的颜色。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| sphericalEffect<sup>10+</sup>    | [number]                                                     | -      | 设置组件的图像球面化程度。<br/>取值范围：[0,1]。<br/>**说明：**<br/>1. 如果value等于0则图像保持原样，如果value等于1则图像为完全球面化效果。在0和1之间，数值越大，则球面化程度越高。<br/>`value < 0 `或者` value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。<br/> 2. 如果组件的图像使用异步加载，则不支持球面效果。例如Image组件默认使用异步加载，如果要使用球面效果，就要设置`syncLoad`为`true`，但是这种做法不推荐。`backgroundImage`也是使用异步加载，所以如果设置了`backgroundImage`，不支持球面效果。<br/>3. 如果组件设置了阴影，不支持球面效果。 |
+| lightUpEffect<sup>10+</sup>      | [number]                                                     | -      | 设置组件图像亮起程度。<br/>取值范围：[0,1]。<br/>如果value等于0则图像为全黑，如果value等于1则图像为全亮效果。0到1之间数值越大，表示图像亮度越高。`value < 0` 或者 `value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。 |
+| pixelStretchEffect<sup>10+</sup> | [PixelStretchEffectOptions](ts-types.md#PixelStretchEffectOptions) | -      | 设置组件的图像边缘像素扩展距离。<br/>参数`options`包括上下左右四个方向的边缘像素扩展距离。<br/>**说明：**<br/>1. 如果距离为正值，表示向外扩展，放大原来图像大小。上下左右四个方向分别用边缘像素填充，填充的距离即为设置的边缘扩展的距离。<br/>2. 如果距离为负值，表示内缩，但是最终图像大小不变。<br/>内缩方式：<br/>图像根据`options`的设置缩小，缩小大小为四个方向边缘扩展距离的绝对值。<br/>图像用边缘像素扩展到原来大小。<br/>3. 对`options`的输入约束：<br/>上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩，方向一致。<br/>所有方向的输入均为百分比或者具体值，不支持百分比和具体值混用。<br/>所有异常情况下，显示为{0，0，0，0}效果，即跟原图保持一致。 |
 
 ## ShadowOptions对象说明
 
@@ -148,3 +151,173 @@ struct ImageEffectsExample {
 
 ![imageeffect](figures/imageeffect.png)
 
+### 示例3
+
+设置组件的图像球面效果。
+
+```ts
+// 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](figures/textInputSpherical1.png)
+
+去掉sphericalEffect的设置，效果如下：
+
+![textInputSpherical2](figures/textInputSpherical2.png)
+
+### 示例4
+
+设置组件的图像渐亮效果。
+
+```ts
+// 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](figures/textLightUp3.png)
+
+修改lightUpEffect参数值为0.2：
+
+![textLightUp2](figures/textLightUp2.png)
+
+去掉lightUpEffect的设置，效果如下：
+
+![textLightUp1](figures/textLightUp1.png)
+
+### 示例5
+
+```ts
+// 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](figures/datePickerLightUp2.png)
+
+去掉lightUpEffect的设置，效果如下：
+
+![datePickerLightUp1](figures/datePickerLightUp1.png)
+
+### 示例6
+
+设置组件的图像边缘像素扩展效果。
+
+```ts
+// 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%")
+  }
+}
+
+```
+
+效果图如下：
+
+![textPixelStretch1](figures/textPixelStretch1.png)
+
+去掉pixelStretchEffect的设置，原图效果如下：
+
+![textPixelStretch2](figures/textPixelStretch2.png)
+
+### 示例7
+
+基于示例6，现在把边缘扩展距离改为非正值。
+
+```ts
+// 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](figures/textPixelStretch3.png)
+
+跟原图对比发现，效果图分两步实现：<br>1、原图大小缩小，缩小后的大小为原图大小减去像素
+收缩的距离。例如，原图大小为`100*100`，设置了`pixelStretchEffect({top:-10,left:-10,
+right:-10,bottom:-10 })`，则缩小后的大小为`(100-10-10)*(100-10-10)`，即`80*80`。<br>2、使用边缘像素扩展，将图像扩展为原图大小。
\ No newline at end of file

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-lightUpEffect.md

-# 图像渐亮效果
-
-设置组件的图像渐亮效果。
-
->  **说明：**
->
->  从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。此接口为系统接口。
-
-## 属性
-
-| 名称 | 参数类型 | 描述 |
-| -------- | -------- | -------- |
-| lightUpEffect | [number]&nbsp;| 设置组件图像亮起程度。<br>取值范围：[0,1]。<br>如果value等于0则图像为全黑，如果value等于1则图像为全亮效果。0到1之间数值越大，表示图像亮度越高。`value < 0` 或者 `value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。 |
-
-## 示例
-
-### 示例1
-```ts
-// 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](figures/textLightUp3.png)
-
-修改lightUpEffect参数值为0.2：
-
-![textLightUp2](figures/textLightUp2.png)
-
-去掉lightUpEffect的设置，效果如下：
-
-![textLightUp1](figures/textLightUp1.png)
-### 示例2
-
-```ts
-// 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](figures/datePickerLightUp2.png)
-
-去掉lightUpEffect的设置，效果如下：
-
-![datePickerLightUp1](figures/datePickerLightUp1.png)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-pixelStretchEffect.md

-# 图像边缘像素扩展效果
-
-设置组件的图像边缘像素扩展效果。
-
->  **说明：**
->
->  从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。此接口为系统接口。
-
-## 属性
-
-| 名称 | 参数类型 | 描述 |
-| -------- | -------- | -------- |
-| pixelStretchEffect | [PixelStretchEffectOptions](ts-types.md#PixelStretchEffectOptions)&nbsp;| 设置组件的图像边缘像素扩展距离。<br>参数`options`包括上下左右四个方向的边缘像素扩展距离。<br>**说明：**<br>1、如果距离为正值，表示向外扩展，放大原来图像大小。上下左右四个方向分别用边缘像素填充，填充的距离即为设置的边缘扩展的距离。<br>2、如果距离为负值，表示内缩，但是最终图像大小不变。内缩方式：1、图像根据`options`的设置缩小，缩小大小为四个方向边缘扩展距离的绝对值。2、图像用边缘像素扩展到原来大小。<br>3、对`options`的输入约束：1、上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩，方向一致。2、所有方向的输入均为百分比或者具体值，不支持百分比和具体值混用。3、所有异常情况下，显示为{0，0，0，0}效果，即跟原图保持一致。|
-
-## 示例
-
-### 示例1
-
-```ts
-// 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%")
-  }
-}
-
-```
-效果图如下：
-
-![textPixelStretch1](figures/textPixelStretch1.png)
-
-去掉pixelStretchEffect的设置，原图效果如下：
-
-![textPixelStretch2](figures/textPixelStretch2.png)
-
-对比发现，如果边缘扩展距离设置为正值，图像向外扩展了边缘距离。
-
-### 示例2
-
-基于示例1，现在把边缘扩展距离改为非正值。
-
-```ts
-// 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](figures/textPixelStretch3.png)
-
-跟原图对比发现，效果图分两步实现：<br>1、原图大小缩小，缩小后的大小为原图大小减去像素
-收缩的距离。例如，原图大小为`100*100`，设置了`pixelStretchEffect({top:-10,left:-10,
-right:-10,bottom:-10 })`，则缩小后的大小为`(100-10-10)*(100-10-10)`，即`80*80`。<br>2、使用边缘像素扩展，将图像扩展为原图大小。

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sphericalEffect.md

-# 图像球面效果
-
-设置组件的图像球面效果。
-
->  **说明：**
->
->  从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。此接口为系统接口。
-
-## 属性
-
-| 名称 | 参数类型 | 描述 |
-| -------- | -------- | -------- |
-| sphericalEffect | [number]&nbsp;| 设置组件的图像球面化程度。<br>取值范围：[0,1]。<br>**说明：**<br>1、如果value等于0则图像保持原样，如果value等于1则图像为完全球面化效果。在0和1之间，数值越大，则球面化程度越高。<br>`value < 0 `或者` value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。<br> 2、如果组件的图像使用异步加载，则不支持球面效果。例如Image组件默认使用异步加载，如果要使用球面效果，就要设置`syncLoad`为`true`，但是这种做法不推荐。`backgroundImage`也是使用异步加载，所以如果设置了`backgroundImage`，不支持球面效果。<br>3、如果组件设置了阴影，不支持球面效果。|
-
-## 示例
-
-### 示例1
-```ts
-// 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](figures/textInputSpherical1.png)
-
-去掉sphericalEffect的设置，效果如下：
-
-![textInputSpherical2](figures/textInputSpherical2.png)
\ No newline at end of file