From 0784b81af29750ad292186d4ede1d206c7d84e5c Mon Sep 17 00:00:00 2001 From: gmy Date: Wed, 27 Jul 2022 10:58:04 +0800 Subject: [PATCH] update docs Signed-off-by: gmy --- .../apis/js-apis-system-mediaquery.md | 16 +++++--- .../arkui-ts/ts-basic-components-text.md | 2 +- .../arkui-ts/ts-canvasrenderingcontext2d.md | 2 +- .../arkui-ts/ts-combined-gestures.md | 6 +-- .../ts-offscreencanvasrenderingcontext2d.md | 12 +++--- .../arkui-ts/ts-page-transition-animation.md | 40 +++++++++---------- ...s-universal-component-area-change-event.md | 4 +- 7 files changed, 44 insertions(+), 38 deletions(-) diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md b/zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md index 03a18e6920..8863410838 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md +++ b/zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md @@ -40,11 +40,7 @@ matchMedia(condition: string): MediaQueryList **示例：** ``` -export default { - matchMedia() { - var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)'); - }, -} +var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)'); ``` ## MediaQueryEvent @@ -102,6 +98,11 @@ addListener(callback: (event: MediaQueryEvent) => void): void **示例：** ``` +function maxWidthMatch(e){ + if(e.matches){ + // do something + } +} mMediaQueryList.addListener(maxWidthMatch); ``` @@ -123,6 +124,11 @@ removeListener(callback: (event: MediaQueryEvent) => void): void **示例：** ``` +function maxWidthMatch(e){ + if(e.matches){ + // do something + } +} mMediaQueryList.removeListener(maxWidthMatch); ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md index b01ca87835..879b659b80 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md @@ -23,7 +23,7 @@ Text(content?: string) - 参数 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | - | content | string | 否 | '' | 文本内容，包含子组件Span时不生效，显示Span内容。 | + | content | string | 否 | '' | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。 | ## 属性 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index a6e99ab755..a013209dba 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -258,7 +258,7 @@ struct MiterLimit { // xxx.ets @Entry @Component -struct Font { +struct Fonts { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md index d5d3324e8a..b702af0af1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md @@ -46,13 +46,13 @@ struct GestureGroupExample { @State count: number = 0 @State offsetX: number = 0 @State offsetY: number = 0 - @State borderStyle: BorderStyle = BorderStyle.Solid + @State borderStyles: BorderStyle = BorderStyle.Solid build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) }.translate({ x: this.offsetX, y: this.offsetY, z: 5 }) - .height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyle }) + .height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyles }) .gesture( GestureGroup(GestureMode.Sequence, LongPressGesture({ repeat: true }) @@ -65,7 +65,7 @@ struct GestureGroupExample { }), PanGesture({}) .onActionStart(() => { - this.borderStyle = BorderStyle.Dashed + this.borderStyles = BorderStyle.Dashed console.log('pan start') }) .onActionUpdate((event: GestureEvent) => { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md index 636b48a740..67c71bd0f8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -266,7 +266,7 @@ struct MiterLimit { // xxx.ets @Entry @Component -struct Font { +struct Fonts { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -1920,12 +1920,12 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap 以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -------- | - | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | - | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | - | sw | number | 是 | 0 | 需要输出的区域的宽度。 | - | sh | number | 是 | 0 | 需要输出的区域的高度。 | + | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | + | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | + | sw | number | 是 | 0 | 需要输出的区域的宽度。 | + | sh | number | 是 | 0 | 需要输出的区域的高度。 | ### getImageData diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md index 5ff8def819..357c5614ab 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md @@ -68,8 +68,8 @@ PageTransitionEnter和PageTransitionExit组件支持的事件： @Entry @Component struct PageTransitionExample1 { - @State scale: number = 1 - @State opacity: number = 1 + @State scale1: number = 1 + @State opacity1: number = 1 @State active: boolean = false build() { Column() { @@ -79,19 +79,19 @@ struct PageTransitionExample1 { .onClick(() => { this.active = true }) - }.scale({ x: this.scale }).opacity(this.opacity) + }.scale({ x: this.scale1 }).opacity(this.opacity1) } // 自定义方式1：完全自定义转场过程的效果 pageTransition() { PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) .onEnter((type: RouteType, progress: number) => { - this.scale = 1 - this.opacity = progress + this.scale1 = 1 + this.opacity1 = progress }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%) PageTransitionExit({ duration: 1500, curve: Curve.Ease }) .onExit((type: RouteType, progress: number) => { - this.scale = 1 - progress - this.opacity = 1 + this.scale1 = 1 - progress + this.opacity1 = 1 }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%) } } @@ -102,27 +102,27 @@ struct PageTransitionExample1 { @Entry @Component struct AExample { - @State scale: number = 1 - @State opacity: number = 1 + @State scale2: number = 1 + @State opacity2: number = 1 @State active: boolean = false build() { Column() { Navigator({ target: 'pages/index' ,type: NavigationType.Push}) { Image($r('app.media.bg2')).width("100%").height("100%") } - }.height("100%").width("100%").scale({ x: this.scale }).opacity(this.opacity) + }.height("100%").width("100%").scale({ x: this.scale2 }).opacity(this.opacity2) } // 自定义方式1：完全自定义转场过程的效果 pageTransition() { PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) .onEnter((type: RouteType, progress: number) => { - this.scale = 1 - this.opacity = progress + this.scale2 = 1 + this.opacity2 = progress }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%) PageTransitionExit({ duration: 1500, curve: Curve.Ease }) .onExit((type: RouteType, progress: number) => { - this.scale = 1 - progress - this.opacity = 1 + this.scale2 = 1 - progress + this.opacity2 = 1 }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%) } } @@ -137,8 +137,8 @@ struct AExample { @Entry @Component struct PageTransitionExample { - @State scale: number = 1 - @State opacity: number = 1 + @State scale1: number = 1 + @State opacity1: number = 1 @State active: boolean = false build() { @@ -149,7 +149,7 @@ struct PageTransitionExample { .onClick(() => { this.active = true }) - }.scale({ x: this.scale }).opacity(this.opacity) + }.scale({ x: this.scale1 }).opacity(this.opacity1) } // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等) @@ -168,8 +168,8 @@ struct PageTransitionExample { @Entry @Component struct PageTransitionExample1 { - @State scale: number = 1 - @State opacity: number = 1 + @State scale2: number = 1 + @State opacity2: number = 1 @State active: boolean = false build() { @@ -180,7 +180,7 @@ struct PageTransitionExample1 { .onClick(() => { this.active = true }) - }.scale({ x: this.scale }).opacity(this.opacity) + }.scale({ x: this.scale2 }).opacity(this.opacity2) } // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md index 290515df46..4f9dfcd790 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md @@ -26,7 +26,7 @@ @Component struct AreaExample { @State value: string = 'Text' - @State size: string = '' + @State size1: string = '' build() { Column() { @@ -37,7 +37,7 @@ struct AreaExample { }) .onAreaChange((oldValue: Area, newValue: Area) => { console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) - this.size = JSON.stringify(newValue) + this.size1 = JSON.stringify(newValue) }) Text('new area is: \n' + this.size).margin({ right: 30, left: 30 }) } -- GitLab