提交 07952e68 编写于 作者: S sienna1128

update docs

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>
上级 d9929985
......@@ -112,4 +112,4 @@ struct GridContainerExample1 {
**图4** 单独设置gridSpan和gridOffset在特定屏幕大小下的效果与useSizeType效果一致
![gridSppan](figures/gridSpan.png)
\ No newline at end of file
![gridSpan](figures/gridSpan.png)
\ No newline at end of file
......@@ -26,12 +26,12 @@
## 示例
示例效果请以真机运行为准,当前IDE预览器不支持。
### 示例一,模糊属性的用法,blur内容模糊,backdropBlur背景模糊
```ts
// xxx.ets
@Entry
@Component
struct ImageEffectsExample1 {
struct BlurEffectsExample {
build() {
Column({ space: 10 }) {
// 对字体进行模糊
......@@ -62,13 +62,14 @@ struct ImageEffectsExample1 {
}
```
![textblur.jpg](figures/textblur.jpg)
![textblur](figures/textblur.png)
### 示例二,图片效果属性的用法
```ts
// xxx.ets
@Entry
@Component
struct ImageEffectsExample2 {
struct ImageEffectsExample {
build() {
Column({ space: 10 }) {
// 添加阴影效果,图片效果不变
......@@ -80,25 +81,27 @@ struct ImageEffectsExample2 {
// 灰度效果0~1,越接近1,灰度越明显
Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image($r('app.media.image')).width('90%').height(40).grayscale(0.5)
Image($r('app.media.image')).width('90%').height(40).grayscale(1)
Image($r('app.media.image')).width('90%').height(40).grayscale(0.3)
Image($r('app.media.image')).width('90%').height(40).grayscale(0.8)
// 高光效果,1为正常图片,<1变暗,>1亮度增大
Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image($r('app.media.image')).width('90%').height(40).brightness(1.5)
Image($r('app.media.image')).width('90%').height(40).brightness(1.2)
// 饱和度,原图为1
Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image($r('app.media.image')).width('90%').height(40).saturate(2.0)
Image($r('app.media.image')).width('90%').height(40).saturate(0.5)
Image($r('app.media.image')).width('90%').height(40).saturate(0.7)
// 对比度,1为原图,>1值越大越清晰,<1越模糊
// 对比度,1为原图,>1值越大越清晰,<1值越小越模糊
Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image($r('app.media.image')).width('90%').height(40).contrast(2.0)
Image($r('app.media.image')).width('90%').height(40).contrast(0.5)
Image($r('app.media.image')).width('90%').height(40).contrast(0.8)
// 图像反转比例
Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image($r('app.media.image')).width('90%').height(40).invert(0.3)
Image($r('app.media.image')).width('90%').height(40).invert(1)
Image($r('app.media.image')).width('90%').height(40).invert(0.2)
Image($r('app.media.image')).width('90%').height(40).invert(0.8)
// 叠色添加
Text('colorBlend').fontSize(15).fontColor(0xCCCCCC).width('90%')
......@@ -107,7 +110,7 @@ struct ImageEffectsExample2 {
// 深褐色
Text('sepia').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image($r('app.media.image')).width('90%').height(40).sepia(1)
Image($r('app.media.image')).width('90%').height(40).sepia(0.8)
// 色相旋转
Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%')
......@@ -117,5 +120,5 @@ struct ImageEffectsExample2 {
}
```
![imageeffect.jpg](figures/imageeffect.jpg)
![imageeffect](figures/imageeffect.png)
......@@ -14,8 +14,6 @@
| ---------------------------------------- | ---- | ---------------------------------------- |
| onKeyEvent(event:&nbsp;(event?:&nbsp;KeyEvent)&nbsp;=&gt;&nbsp;void) | 是 | 绑定该方法的组件获焦后,按键动作触发该方法调用,event参数见[KeyEvent](#keyevent对象说明)介绍。 |
>
> 该事件适用于所有可交互组件(默认可获焦),例如Button;对于Text,Image等不可获焦组件,可以设置.focasable(true)后使用按键事件。
## KeyEvent对象说明
......@@ -59,4 +57,4 @@ struct KeyEventExample {
}
```
![zh-cn_image_0000001174264364](figures/zh-cn_image_0000001174264364.gif)
![zh-cn_image_0000001174264364](figures/zh-cn_image_0000001174264364.gif)
\ No newline at end of file
......@@ -18,7 +18,7 @@ common
```
如上所示,将utils放在common中,示例中index.ets访问utils.ets文件
```ts
// index.ets
// xxx.ets
import { FoodData, FoodList } from "../common/utils/utils";
@Entry
......@@ -72,4 +72,4 @@ export struct FoodList {
}
}
}
```
```
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册