diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-appendix-enums.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-appendix-enums.md index 7e567cea814df49d44d4828551d25a9899c84ad0..e286dabb58e09b0a0ad7b930e196c2ee50a7c2a0 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-appendix-enums.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-appendix-enums.md @@ -1306,4 +1306,17 @@ type Nullable\ = T | undefined | 名称 | 值 | 说明 | | ------------------ | - | ---------------------------------------- | | FLOATING_ABOVE_MENU| 0 | 悬浮在Menu之上，默认值，不占用高度。 | -| EMBEDDED_IN_MENU | 1 | 在Menu中展开，参与布局计算，占用高度。 | \ No newline at end of file +| EMBEDDED_IN_MENU | 1 | 在Menu中展开，参与布局计算，占用高度。 | + +## ColorSpace20+ + +定义了颜色空间的类型，用于指定颜色显示的模式。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +| 名称 | 值 | 说明 | +| ------ | ---- | -------------------- | +| SRGB | 0 | SRGB颜色空间，适用于大多数显示设备。 | +| DISPLAY_P3 | 1 | Display-P3颜色空间，具有更广的色域，适用于高端显示设备。 | \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-background.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-background.md index 91956d9c537b3d6048a3f6b6d48c1cd73d63a4a4..599748b1f67a047c532772fabe33d943707ba199 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-background.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-background.md @@ -85,6 +85,24 @@ backgroundColor(color: Optional\): T > > 当通过[backgroundBlurStyle](#backgroundblurstyle9)中的inactiveColor指定背景色时，不建议再通过backgroundColor设置背景色。 +## backgroundColor20+ + +backgroundColor(color: Optional) + +设置组件背景色。与[backgroundColor](#backgroundcolor18)相比，color参数新增了对[ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12)类型的支持。 + +**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | +| color | Optional\<[ResourceColor](ts-types.md#resourcecolor) \| [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12)> | 是 | 设置组件的背景色。
当color的值为undefined时，恢复为默认透明的背景色。 | + ## backgroundImage backgroundImage(src: ResourceStr | PixelMap, repeat?: ImageRepeat): T @@ -952,4 +970,31 @@ struct BackGroundBlur { } ``` -![backgroundBlur](figures/backgroundBlur.png) \ No newline at end of file +![backgroundBlur](figures/backgroundBlur.png) + +### 示例8（设置P3色域背景效果） + +该示例通过backgroundColor设置P3色域背景效果。 + +```ts +// xxx.ets +// 设置P3色域时需要在ets/entryability/EntryAbility.ets中，通过setColorSpace接口将当前窗口设置为广色域。 +import { ColorMetrics } from '@kit.ArkUI'; + +@Entry +@Component +struct P3BackgroundDemo { + @State p3Color: ColorMetrics = ColorMetrics.colorWithSpace(ColorSpace.DISPLAY_P3, 0, 0.3, 0.8, 1); + + build() { + Column({ space: 5 }) { + Text('background color with colorMetrics').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row().width('90%').height(50).backgroundColor(this.p3Color) + } + .width('100%') + .height('100%') + } +} +``` + +![zh-cn_background_p3](figures/zh-cn_background_p3.png) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-gradient-color.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-gradient-color.md index f27b582505f440be5aea1f5fc6c34106b3c9106e..dbb228fb2b31c2b55d1cee7bda31fe62abc753d8 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-gradient-color.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-gradient-color.md @@ -125,18 +125,23 @@ sweepGradient(options: Optional\): T 角度渐变参数。 -**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 - **系统能力：** SystemCapability.ArkUI.ArkUI.Full | 名称 | 类型 | 必填 | 说明 | -| ------------------------------------------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| center | [[Length](./ts-types.md#length), Length] | 是 | 为角度渐变的中心点，即相对于当前组件左上角的坐标。 | -| start | number \| string | 否 | 角度渐变的起点。 默认值：0。 | -| end | number \| string | 否 | 角度渐变的终点。 默认值：0。 | -| rotation | number \| string | 否 | 角度渐变的旋转角度。默认值：0。 | -| [colors](#radialgradientoptions18对象说明) | Array<[[ResourceColor](ts-types.md#resourcecolor), number] | 是 | 指定渐变色颜色和其对应的百分比位置的数组，设置非法颜色直接跳过。 | -| repeating | boolean | 否 | 为渐变的颜色重复着色。
默认值：false。
true：允许为渐变的颜色重复着色。
false：不允许为渐变的颜色重复着色。 | +| ------------------------------------------ | ------------------------------------------------------------ | ---- |------------------------------------------------------------- | +| center | [[Length](./ts-types.md#length), Length] | 是 | 为角度渐变的中心点，即相对于当前组件左上角的坐标。
**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | +| start | number \| string | 否 | 角度渐变的起点。 默认值：0。
角度为字符串时仅支持类型deg，grad，rad，turn。
**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | +| end | number \| string | 否 | 角度渐变的终点。 默认值：0。
角度为字符串时仅支持类型deg，grad，rad，turn。
**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | +| rotation | number \| string | 否 | 角度渐变的旋转角度。默认值：0。
角度为字符串时仅支持类型deg，grad，rad，turn。
**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | +| colors | Array<[[ResourceColor](ts-types.md#resourcecolor), number] | 是 | 指定渐变色颜色和其对应的百分比位置的数组，设置非法颜色直接跳过。
**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | +| metricsColors20+ | Array<[[ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12), number] | 否 | 指定渐变色颜色和其对应的百分比位置的数组，设置非法颜色直接跳过。设置metricsColors时colors失效。每个渐变ColorMetrics的色域属性应当统一，设置不同色域属性则认为非法。默认值为透明色。
**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | +| repeating | boolean | 否 | 为渐变的颜色重复着色。
默认值：false
true：允许为渐变的颜色重复着色。
false：不允许为渐变的颜色重复着色。
**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | + +> **说明：** +> +> metricsColors参数的约束： +> +> [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12)表示填充的颜色，可以使用[colorWithSpace](../js-apis-arkui-graphics.md#colorwithspace20)方法构造指定色域属性的颜色。number表示指定颜色所处的位置，取值范围为[0, 1.0]，0表示需要设置渐变色的容器开始处，1.0表示容器的结束处。为了实现多个颜色渐变效果，多个数组中的number类型参数应递增设置。如果后一个数组中的number类型参数小于前一个数组的number类型参数，将按照等于前一个数组number值处理。 ## radialGradient @@ -253,9 +258,15 @@ struct ColorGradientExample { 该示例通过sweepGradient来实现组件颜色旋转角度渐变。 ```ts +// 设置P3色域时需要在ets/entryability/EntryAbility.ets中，通过setColorSpace接口将当前窗口设置为广色域。 +import { ColorMetrics } from '@kit.ArkUI'; + @Entry @Component struct ColorGradientExample { + @State p3Red: ColorMetrics = ColorMetrics.colorWithSpace(ColorSpace.DISPLAY_P3, 1, 0, 0, 1); + @State p3Green: ColorMetrics = ColorMetrics.colorWithSpace(ColorSpace.DISPLAY_P3, 0, 1, 0, 1); + @State p3Blue: ColorMetrics = ColorMetrics.colorWithSpace(ColorSpace.DISPLAY_P3, 0, 0, 1, 1); build() { Column({ space: 5 }) { @@ -282,6 +293,20 @@ struct ColorGradientExample { repeating: true, // 渐变颜色是否重复 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果 }) + + Text('sweepGradient with metricsColors').fontSize(12).width('90%').fontColor(0xCCCCCC) + Row() + .width(100) + .height(100) + .sweepGradient({ + center: [50, 50], + start: 0, + end: 359, + rotation: 45, + repeating: true, + colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]], // 数组末尾元素占比小于1时满足重复着色效果 + metricsColors: [[this.p3Red, 0.0], [this.p3Green, 0.5], [this.p3Blue, 1.0]] // 设置metricsColors时colors设置的颜色失效，metricsColors的颜色生效 + }) } .width('100%') .padding({ top: 5 }) diff --git a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-graphics.md b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-graphics.md index 28dd5985354af438fba23b67c05e36efec51968e..d50c3390e9b678c3b0968c72dbff9beae2ec8b33 100644 --- a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-graphics.md +++ b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-graphics.md @@ -584,6 +584,32 @@ static rgba(red: number, green: number, blue: number, alpha?: number): ColorMetr | ------------- | ---------------- | | [ColorMetrics](#colormetrics12) | ColorMetrics 类的实例。 | +### colorWithSpace20+ + +static colorWithSpace(colorSpace: ColorSpace, red: number, green: number, blue: number, alpha?: number): ColorMetrics + +使用[ColorSpace](./arkui-ts/ts-appendix-enums.md#colorspace20)和rgba格式颜色实例化ColorMetrics类。仅部分属性支持在display-p3色彩空间中设置颜色。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------------- | ---- | ------------ | +| colorSpace | [ColorSpace](./arkui-ts/ts-appendix-enums.md#colorspace20) | 是 | 颜色空间，用于指定颜色的色彩空间。使用ColorSpace.DISPLAY_P3，需要对应窗口调用[setWindowColorSpace](./js-apis-window.md#setwindowcolorspace9-1)接口，将当前窗口设置为广色域模式。| +| red | number | 是 | 颜色的R分量（红色），值是0~1的浮动数值。 | +| green | number | 是 | 颜色的G分量（绿色），值是0~1的浮动数值。 | +| blue | number | 是 | 颜色的B分量（蓝色），值是0~1的浮动数值。 | +| alpha | number | 否 | 颜色的A分量（透明度），值是0.0~1.0的浮点数，默认值为1.0，不透明。| + +**返回值：** + +| 类型 | 说明 | +| ------------- | ---------------- | +| [ColorMetrics](#colormetrics12) | ColorMetrics类的实例。| + ### resourceColor12+ static resourceColor(color: ResourceColor): ColorMetrics