From 3f458bb5059d8ecfae3bc2d4bc56086869846f2b Mon Sep 17 00:00:00 2001 From: xumale Date: Sun, 22 Jun 2025 15:54:06 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=8E=A5=E5=8F=A3?= =?UTF-8?q?=E6=96=87=E6=A1=A3=20Signed-off-by:xumale@h-partners.com?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: xumale --- .../js-apis-uiEffect-sys.md | 139 ++++++++++++++++++ 1 file changed, 139 insertions(+) diff --git a/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md b/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md index e8e1882735f..b48a927fd51 100644 --- a/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md +++ b/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md @@ -310,6 +310,72 @@ colorGradient(colors: Array\, positions: Array\, strength filter.colorGradient([{red: 1.0, green: 0.8, blue: 0.5, alpha: 0.8}, {red: 1.0, green: 1.5, blue: 0.5, alpha: 1.0}], [{x: 0.2, y: 0.2}, {x: 0.8, y: 0.6}], [0.3, 0.3], uiEffect.Mask.createRippleMask({x: 0.5, y: 0.5}, 0.5, 0.5, 0.5)) ``` +### contentLight20+ +contentLight(lightPosition: common2D.Point3d, lightColor: common2D.Color, lightIntensity: number, displacementMap?: Mask): Filter + +为组件内容添加3D光照效果。 + +**系统能力：** SystemCapability.Graphics.Drawing + +**系统接口：** 此接口为系统接口。 + +**参数：** +| 参数名 | 类型 | 必填 | 说明 | +| ------------- | --------------------- | ---- | ------------------------- | +| lightPosition | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | 是 | 光源在组件空间的位置, [-1, -1，0]为组件左上角，[1, 1, 0]为组件的右下角, z轴分量越大光源离组件平面越远，可照射区域越大。
x分量取值范围[-10, 10]，y分量取值范围[-10, 10], z分量取值范围[0, 10], 超出范围会自动截断。 | +| lightColor | [common2D.Color](js-apis-graphics-common2D.md#Color) | 是 | 光源颜色，各元素取值范围为[0, 1]，超出范围会自动截断。 | +| lightIntensity | number | 是 | 光源强度，取值范围[0, 1]，数值越大光源亮度越大，超出范围会自动截断。| +| displacementMap | [Mask](#mask20) | 否 | 该参数暂不生效。 | + +**返回值：** + +| 类型 | 说明 | +| ----------------- | --------------------------------- | +| [filter](#filter) | 返回了具有内容光照效果的filter | + +**错误码：** + +以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 + +| 错误码ID | 错误信息 | +| ------- | --------------------------------------------| +| 202 | Permission verification failed. A non-system application calls a system API. | + +**示例：** +```ts +import uiEffect from '@ohos.graphics.uiEffect' +import { common2D } from '@kit.ArkGraphics2D' +@Entry +@Component +struct Index { + @State point2:common2D.Point3d = { + x:0,y:0,z:2 + } + @State color2:common2D.Color = { + red:1,green:1,blue:1,alpha:1 + } + @State lightIntentsity2:number = 1 + + build() { + Column() { + Stack() { + Image($r('app.media.man')) + .width('646px') + .height('900px') + .borderRadius(10) + .foregroundFilter(uiEffect.createFilter().contentLight(this.point2, this.color2, this.lightIntentsity2)) + } + .width('100%') + .height('55%') + } + .height('100%') + .width('100%') + .justifyContent(FlexAlign.Center) + .backgroundColor('#555') + } +} +``` + ### edgeLight20+ edgeLight(alpha: number, color?: Color, mask?: Mask, bloom?: boolean): Filter @@ -530,6 +596,79 @@ let blender : uiEffect.BrightnessBlender = visualEffect.backgroundColorBlender(blender) ``` +### borderLight20+ +borderLight(lightPosition: common2D.Point3d, lightColor: common2D.Color, lightIntensity: number, borderWidth: number): VisualEffect + +为圆角矩形组件边框添加3D光照效果。 + +**系统能力：** SystemCapability.Graphics.Drawing + +**系统接口：** 此接口为系统接口。 + +**参数：** +| 参数名 | 类型 | 必填 | 说明 | +| ------------- | --------------------- | ---- | ------------------------- | +| lightPosition | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | 是 | 光源在组件空间的3D位置, [-1, -1，0]为组件左上角, [1, 1, 0]为组件的右下角, z轴分量越大, 光源离组件平面越远, 可照射区域越大。
x轴分量取值范围[-10, 10], y轴分量取值范围[-10, 10], z轴分量取值范围[0, 10], 超出范围会自动截断。 | +| lightColor | [common2D.Color](js-apis-graphics-common2D.md#Color) | 是 | 光源颜色, 各元素取值范围为[0, 1]，超出范围会自动截断。 | +| lightIntensity | number | 是 | 光源强度, 取值范围[0, 1], 数值越大光源亮度越大,超出范围会自动截断。| +| borderWidth | number | 是 | 组件边框的受光宽度, 取值范围为[0.0, 30.0], 超出范围会自动截断。设置为0.0时, 组件边框无光照效果, 数值越大, 光可照亮的区域越宽。 | + +**返回值：** + +| 类型 | 说明 | +| ----------------- | --------------------------------- | +| [VisualEffect](#visualeffect) | 返回了具有边框光照效果的VisualEffect | + +**错误码：** + +以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 + +| 错误码ID | 错误信息 | +| ------- | --------------------------------------------| +| 202 | Permission verification failed. A non-system application calls a system API. | + +**示例：** +```ts +import uiEffect from '@ohos.graphics.uiEffect' +import { common2D } from '@kit.ArkGraphics2D' + +@Entry +@Component +struct Index { + @State point1:common2D.Point3d = { + x:0,y:0,z:2 + } + @State color1:common2D.Color = { + red:1,green:1,blue:1,alpha:1 + } + @State lightIntentsity1:number = 1 + @State bordrwidth:number = 20 + + build() { + Column() { + Stack() { + Image($r('app.media.man')) + .width('646px') + .height('900px') + .borderRadius(10) + Column() + .width('646px') + .height('900px') + .borderRadius(10) + .visualEffect(uiEffect.createEffect().borderLight(this.point1, this.color1, this.lightIntentsity1, + this.bordrwidth)) + } + .width('100%') + .height('55%') + } + .height('100%') + .width('100%') + .justifyContent(FlexAlign.Center) + .backgroundColor('#555') + } +} +``` + ## Blender13+ type Blender = BrightnessBlender -- Gitee From 89ae6de7ba0a4d87147e1f098fe0c34bf3bbcd21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=8F=8D?= Date: Mon, 23 Jun 2025 11:05:05 +0000 Subject: [PATCH 2/4] Update zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md --- .../reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md b/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md index b48a927fd51..75de0a2c39c 100644 --- a/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md +++ b/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md @@ -331,7 +331,7 @@ contentLight(lightPosition: common2D.Point3d, lightColor: common2D.Color, lightI | 类型 | 说明 | | ----------------- | --------------------------------- | -| [filter](#filter) | 返回了具有内容光照效果的filter | +| [filter](#filter) | 返回了具有内容光照效果的filter。 | **错误码：** -- Gitee From 416923a6095dc07666e3f44b1bd8a0c0e00da5fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=8F=8D?= Date: Mon, 23 Jun 2025 11:05:32 +0000 Subject: [PATCH 3/4] Update zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md --- .../reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md b/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md index 75de0a2c39c..d9ef32f960f 100644 --- a/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md +++ b/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md @@ -608,10 +608,10 @@ borderLight(lightPosition: common2D.Point3d, lightColor: common2D.Color, lightIn **参数：** | 参数名 | 类型 | 必填 | 说明 | | ------------- | --------------------- | ---- | ------------------------- | -| lightPosition | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | 是 | 光源在组件空间的3D位置, [-1, -1，0]为组件左上角, [1, 1, 0]为组件的右下角, z轴分量越大, 光源离组件平面越远, 可照射区域越大。
x轴分量取值范围[-10, 10], y轴分量取值范围[-10, 10], z轴分量取值范围[0, 10], 超出范围会自动截断。 | -| lightColor | [common2D.Color](js-apis-graphics-common2D.md#Color) | 是 | 光源颜色, 各元素取值范围为[0, 1]，超出范围会自动截断。 | -| lightIntensity | number | 是 | 光源强度, 取值范围[0, 1], 数值越大光源亮度越大,超出范围会自动截断。| -| borderWidth | number | 是 | 组件边框的受光宽度, 取值范围为[0.0, 30.0], 超出范围会自动截断。设置为0.0时, 组件边框无光照效果, 数值越大, 光可照亮的区域越宽。 | +| lightPosition | [common2D.Point3d](js-apis-graphics-common2D.md#point3d12) | 是 | 光源在组件空间的3D位置，[-1, -1，0]为组件左上角，[1, 1, 0]为组件的右下角，z轴分量越大，光源离组件平面越远，可照射区域越大。
x轴分量取值范围[-10, 10], y轴分量取值范围[-10, 10], z轴分量取值范围[0, 10]，超出范围会自动截断。 | +| lightColor | [common2D.Color](js-apis-graphics-common2D.md#Color) | 是 | 光源颜色，各元素取值范围为[0, 1]，超出范围会自动截断。 | +| lightIntensity | number | 是 | 光源强度，取值范围[0, 1]，数值越大光源亮度越大，超出范围会自动截断。| +| borderWidth | number | 是 | 组件边框的受光宽度，取值范围为[0.0, 30.0]，超出范围会自动截断。设置为0.0时，组件边框无光照效果，数值越大，光可照亮的区域越宽。 | **返回值：** -- Gitee From 424cf8efc0fb1bfbfd730c9db4b5d0816a632dce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=8F=8D?= Date: Mon, 23 Jun 2025 11:05:47 +0000 Subject: [PATCH 4/4] Update zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md --- .../reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md b/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md index d9ef32f960f..c76fd7c9461 100644 --- a/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md +++ b/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-uiEffect-sys.md @@ -617,7 +617,7 @@ borderLight(lightPosition: common2D.Point3d, lightColor: common2D.Color, lightIn | 类型 | 说明 | | ----------------- | --------------------------------- | -| [VisualEffect](#visualeffect) | 返回了具有边框光照效果的VisualEffect | +| [VisualEffect](#visualeffect) | 返回了具有边框光照效果的VisualEffect。 | **错误码：** -- Gitee