diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 083f2111f337569553990043e8bea0c4753c6446..6ab65c217ed411e9b5127e3f297ddf4dc5682aa6 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/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) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md index 4107ebe46ad7c0104ea0500e3121483272197ef4..8119121a151db994119ff4c020d214722020c84e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md @@ -14,9 +14,19 @@ | backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),
repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | src：图片地址，支持网络图片资源地址和本地图片资源地址和Base64，不支持svg类型的图片。
repeat：设置背景图片的重复样式，默认不重复。当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | backgroundImageSize | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} \| [ImageSize](ts-appendix-enums.md#imagesize) | 设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。
width和height取值范围： [0, +∞)
默认值：ImageSize.Auto
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
设置为小于0的值时，按值为0显示。当设置了height未设置width时，width根据图片原始宽高比进行调整。 | | backgroundImagePosition | [Position](ts-types.md#position8) \| [Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置，即相对于组件左上角的坐标。
默认值：
{
x: 0,
y: 0
}
x和y值设置百分比时，偏移量是相对组件自身宽高计算的。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| backgroundBlurStyle9+ | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),
options10+?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10对象说明) | 为当前组件提供一种在背景和内容之间的模糊能力。
value: 背景模糊样式。模糊样式中封装了模糊半径、蒙版颜色、蒙版透明度、饱和度四个参数。
options: 可选参数，背景模糊选项。
该接口支持在ArkTS卡片中使用。 | + +## BackgroundBlurStyleOptions10+对象说明 + +| 名称 | 参数类型 | 必填 | 描述 | +| --------------------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ | +| colorMode10+ | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | 否 | 背景模糊效果使用的深浅色模式。
默认值：ThemeColorMode.System | +| adaptiveColor10+ | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | 否 | 背景模糊效果使用的取色模式。
默认值：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 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md deleted file mode 100644 index 50b1bc3a158306be1a402a59589116586986d95e..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-backgroundBlurStyle.md +++ /dev/null @@ -1,48 +0,0 @@ -# 组件背景模糊 - -为当前组件添加背景模糊效果。 - -> **说明：** -> -> 从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -> -> 此接口为系统接口。 - -## 属性 - -| 名称 | 参数 | 描述 | -| -------------------- | ----------------------- | ------------------------ | -| backgroundBlurStyle | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),
options10+?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10对象说明) | 为当前组件提供一种在背景和内容之间的模糊能力。
value: 背景模糊样式。模糊样式中封装了模糊半径、蒙版颜色、蒙版透明度、饱和度四个参数。
options: 可选参数，背景模糊选项。
该接口支持在ArkTS卡片中使用。 | - -## BackgroundBlurStyleOptions10+对象说明 - -| 名称 | 参数类型 | 必填 | 描述 | -| ----------- | ------| ------ | ------ | -| colorMode10+ | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | 否 | 背景模糊效果使用的深浅色模式。
默认值：ThemeColorMode.System | -| adaptiveColor10+ | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | 否 | 背景模糊效果使用的取色模式。
默认值：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) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md index 11f0c61a7e44545b0374a82b260187074c633e07..9f0ed6aa050edc2188f3c0e6bb235e802dddeb9e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md @@ -1,6 +1,6 @@ # 图像效果 -设置组件的模糊，阴影效果以及设置图片的图像效果。 +设置组件的模糊、阴影、球面效果以及设置图片的图像效果。 > **说明：** > @@ -10,19 +10,22 @@ ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | -| blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
取值范围：[0, +∞)
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| backdropBlur | number | - | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
取值范围：[0, +∞)
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| shadow | [ShadowOptions](#shadowoptions对象说明) \| [ShadowStyle](#shadowstyle10枚举说明) | - | 为当前组件添加阴影效果。
入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。
入参类型为ShadowStyle时，可指定不同阴影样式。
从API version 9开始，该接口支持在ArkTS卡片中使用，ArkTS卡片上不支持参数为 [ShadowStyle](#shadowstyle10枚举说明)类型。 | -| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)
取值范围：[0, 1]
**说明：**
设置小于0的值时，按值为0处理，设置大于1的值时，按值为1处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| brightness | number | 1.0 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑，大于1时亮度增加，数值越大亮度越大。
取值范围：[0, +∞)
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| saturate | number | 1.0 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大，小于1时消色成分越大，饱和度越小。（百分比）
取值范围：[0, +∞)
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| contrast | number | 1.0 | 为当前组件添加对比度效果，入参为对比度的值。值为1时，显示原图，大于1时，值越大对比度越高，图像越清晰醒目，小于1时，值越小对比度越低，当对比度为0时，图像变为全灰。（百分比）
取值范围：[0, +∞)
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| invert | number | 0 | 反转输入的图像。入参为图像反转的比例，值为1时完全反转，值为0则图像无变化。（百分比）
取值范围：[0, 1]
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例，值为1则完全是深褐色的，值为0图像无变化。 （百分比）
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| hueRotate | number \| string | '0deg' | 色相旋转效果，输入参数为旋转角度。
取值范围：(-∞, +∞)
**说明：**
色调旋转360度会显示原始颜色。先将色调旋转180 度，然后再旋转-180度会显示原始颜色。数据类型为number时，值为90和'90deg'效果一致。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| colorBlend 8+ | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| 名称 | 参数类型 | 默认值 | 描述 | +| -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | +| blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
取值范围：[0, +∞)
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| backdropBlur | number | - | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
取值范围：[0, +∞)
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| shadow | [ShadowOptions](#shadowoptions对象说明) \| [ShadowStyle](#shadowstyle10枚举说明) | - | 为当前组件添加阴影效果。
入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。
入参类型为ShadowStyle时，可指定不同阴影样式。
从API version 9开始，该接口支持在ArkTS卡片中使用，ArkTS卡片上不支持参数为 [ShadowStyle](#shadowstyle10枚举说明)类型。 | +| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)
取值范围：[0, 1]
**说明：**
设置小于0的值时，按值为0处理，设置大于1的值时，按值为1处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| brightness | number | 1.0 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑，大于1时亮度增加，数值越大亮度越大。
取值范围：[0, +∞)
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| saturate | number | 1.0 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大，小于1时消色成分越大，饱和度越小。（百分比）
取值范围：[0, +∞)
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| contrast | number | 1.0 | 为当前组件添加对比度效果，入参为对比度的值。值为1时，显示原图，大于1时，值越大对比度越高，图像越清晰醒目，小于1时，值越小对比度越低，当对比度为0时，图像变为全灰。（百分比）
取值范围：[0, +∞)
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| invert | number | 0 | 反转输入的图像。入参为图像反转的比例，值为1时完全反转，值为0则图像无变化。（百分比）
取值范围：[0, 1]
**说明：**
设置小于0的值时，按值为0处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例，值为1则完全是深褐色的，值为0图像无变化。 （百分比）
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| hueRotate | number \| string | '0deg' | 色相旋转效果，输入参数为旋转角度。
取值范围：(-∞, +∞)
**说明：**
色调旋转360度会显示原始颜色。先将色调旋转180 度，然后再旋转-180度会显示原始颜色。数据类型为number时，值为90和'90deg'效果一致。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| colorBlend 8+ | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| sphericalEffect10+ | [number] | - | 设置组件的图像球面化程度。
取值范围：[0,1]。
**说明：**
1. 如果value等于0则图像保持原样，如果value等于1则图像为完全球面化效果。在0和1之间，数值越大，则球面化程度越高。
`value < 0 `或者` value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。
2. 如果组件的图像使用异步加载，则不支持球面效果。例如Image组件默认使用异步加载，如果要使用球面效果，就要设置`syncLoad`为`true`，但是这种做法不推荐。`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](ts-types.md#PixelStretchEffectOptions) | - | 设置组件的图像边缘像素扩展距离。
参数`options`包括上下左右四个方向的边缘像素扩展距离。
**说明：**
1. 如果距离为正值，表示向外扩展，放大原来图像大小。上下左右四个方向分别用边缘像素填充，填充的距离即为设置的边缘扩展的距离。
2. 如果距离为负值，表示内缩，但是最终图像大小不变。
内缩方式：
图像根据`options`的设置缩小，缩小大小为四个方向边缘扩展距离的绝对值。
图像用边缘像素扩展到原来大小。
3. 对`options`的输入约束：
上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩，方向一致。
所有方向的输入均为百分比或者具体值，不支持百分比和具体值混用。
所有异常情况下，显示为{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) + +跟原图对比发现，效果图分两步实现：
1、原图大小缩小，缩小后的大小为原图大小减去像素 +收缩的距离。例如，原图大小为`100*100`，设置了`pixelStretchEffect({top:-10,left:-10, +right:-10,bottom:-10 })`，则缩小后的大小为`(100-10-10)*(100-10-10)`，即`80*80`。
2、使用边缘像素扩展，将图像扩展为原图大小。 \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-lightUpEffect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-lightUpEffect.md deleted file mode 100644 index a9bb7528afe070280842971a5984ad069b6e6fa5..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-lightUpEffect.md +++ /dev/null @@ -1,80 +0,0 @@ -# 图像渐亮效果 - -设置组件的图像渐亮效果。 - -> **说明：** -> -> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。此接口为系统接口。 - -## 属性 - -| 名称 | 参数类型 | 描述 | -| -------- | -------- | -------- | -| lightUpEffect | [number] | 设置组件图像亮起程度。
取值范围：[0,1]。
如果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 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-pixelStretchEffect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-pixelStretchEffect.md deleted file mode 100644 index d99b8e9f43e3f86d4831f4341bf72680d14f683b..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-pixelStretchEffect.md +++ /dev/null @@ -1,76 +0,0 @@ -# 图像边缘像素扩展效果 - -设置组件的图像边缘像素扩展效果。 - -> **说明：** -> -> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。此接口为系统接口。 - -## 属性 - -| 名称 | 参数类型 | 描述 | -| -------- | -------- | -------- | -| pixelStretchEffect | [PixelStretchEffectOptions](ts-types.md#PixelStretchEffectOptions) | 设置组件的图像边缘像素扩展距离。
参数`options`包括上下左右四个方向的边缘像素扩展距离。
**说明：**
1、如果距离为正值，表示向外扩展，放大原来图像大小。上下左右四个方向分别用边缘像素填充，填充的距离即为设置的边缘扩展的距离。
2、如果距离为负值，表示内缩，但是最终图像大小不变。内缩方式：1、图像根据`options`的设置缩小，缩小大小为四个方向边缘扩展距离的绝对值。2、图像用边缘像素扩展到原来大小。
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) - -跟原图对比发现，效果图分两步实现：
1、原图大小缩小，缩小后的大小为原图大小减去像素 -收缩的距离。例如，原图大小为`100*100`，设置了`pixelStretchEffect({top:-10,left:-10, -right:-10,bottom:-10 })`，则缩小后的大小为`(100-10-10)*(100-10-10)`，即`80*80`。
2、使用边缘像素扩展，将图像扩展为原图大小。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sphericalEffect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sphericalEffect.md deleted file mode 100644 index 921a8085250cae49106d0c3c15ff148c747f8045..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sphericalEffect.md +++ /dev/null @@ -1,49 +0,0 @@ -# 图像球面效果 - -设置组件的图像球面效果。 - -> **说明：** -> -> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。此接口为系统接口。 - -## 属性 - -| 名称 | 参数类型 | 描述 | -| -------- | -------- | -------- | -| sphericalEffect | [number] | 设置组件的图像球面化程度。
取值范围：[0,1]。
**说明：**
1、如果value等于0则图像保持原样，如果value等于1则图像为完全球面化效果。在0和1之间，数值越大，则球面化程度越高。
`value < 0 `或者` value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。
2、如果组件的图像使用异步加载，则不支持球面效果。例如Image组件默认使用异步加载，如果要使用球面效果，就要设置`syncLoad`为`true`，但是这种做法不推荐。`backgroundImage`也是使用异步加载，所以如果设置了`backgroundImage`，不支持球面效果。
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