,
controller: WebController
} | - | 注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。
object: 参与注册的对象。只能声明方法，不能声明属性 。其中方法的参数和返回类型只能为string，number，boolean。
name: 注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。
methodList: 参与注册的应用侧JavaScript对象的方法。
controller: 控制器。 |
+| javaScriptAccess | boolean | true | 设置是否允许执行JavaScript脚本，默认允许执行。 |
+| mixedMode | [MixedMode](#mixedmode枚举说明) | MixedMode.None | 设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。 |
+| onlineImageAccess | boolean | true | 设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。 |
+| zoomAccess | boolean | true | 设置是否支持手势进行缩放，默认允许执行缩放。 |
+| overviewModeAccess | boolean | true | 设置是否使用概览模式加载网页，默认使用该方式。 |
+| databaseAccess | boolean | false | 设置是否开启数据库存储API权限，默认不开启。 |
+| cacheMode | [CacheMode](#cachemode枚举说明) | CacheMode.Default | 设置缓存模式。 |
+| textZoomAtio | number | 100 | 设置页面的文本缩放百分比，默认为100%。 |
+| userAgent | string | - | 设置用户代理。 |
>  **说明：**
>
@@ -56,8 +56,8 @@
不支持通用事件。
-| 名称 | 功能描述 |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| 名称 | 功能描述 |
+| ---------------------------------------- | ---------------------------------------- |
| onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | 网页触发alert()告警弹窗时触发回调。
当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（只有确认场景），并且根据用户的确认操作调用JsResult通知Web组件。
url：当前显示弹窗所在网页的URL。
message：弹窗中显示的信息。
JsResult：通知Web组件用户操作行为。
|
| onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | 刷新或关闭场景下，在即将离开当前页面时触发此回调。
当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。
url：当前显示弹窗所在网页的URL。
message：弹窗中显示的信息。
JsResult：通知Web组件用户操作行为。
|
| onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | 网页调用confirm()告警时触发此回调。
当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。
url：当前显示弹窗所在网页的URL。
message：弹窗中显示的信息。
JsResult：通知Web组件用户操作行为。
|
@@ -65,8 +65,8 @@
| onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) | 网页的下载任务开始时触发该回调。
url：文件下载的URL。
userAgent：下载的用户代理（UA）名称。
contentDisposition：服务器返回的 Content-Disposition响应头，可能为空。
mimetype：服务器返回内容媒体类型（MIME）信息。
contentLength：服务器返回文件的长度。
|
| onErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror对象说明), error: [WebResourceError](#webresourceerror对象说明) }) => void) | 网页加载遇到错误时触发该回调。
出于性能考虑，建议此回调中尽量执行简单逻辑。
request：网页请求的封装信息。
error：网页加载资源错误的封装信息 。
|
| onHttpErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror对象说明), response: [WebResourceResponse](#webresourceresponse对象说明) }) => void) | 网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调。
request：网页请求的封装信息。
response：网页响应的封装信息
|
-| onPageBegin(callback: (event?: { url: string }) => void) | 网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。
url：页面的URL地址。
|
-| onPageEnd(callback: (event?: { url: string }) => void) | 网页加载完成时触发该回调，且只在主frame触发。
url：页面的URL地址。
|
+| onPageBegin(callback: (event?: { url: string }) => void) | 网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。
url：页面的URL地址。
|
+| onPageEnd(callback: (event?: { url: string }) => void) | 网页加载完成时触发该回调，且只在主frame触发。
url：页面的URL地址。
|
| onProgressChange(callback: (event?: { newProgress: number }) => void) | 网页加载进度变化时触发该回调。
newProgress：新的加载进度，取值范围为0到100的整数。
|
| onTitleReceive(callback: (event?: { title: string }) => void) | 网页document标题更改时触发该回调。
title：document标题内容。
|
| onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) | 加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。
url：访问的url。
isRefreshed：true表示该页面是被重新加载的，false表示该页面是新加载的。
|
@@ -156,56 +156,56 @@ Web组件返回的请求/响应头对象。
onRenderExited接口返回的渲染进程退出的具体原因。
-| 名称 | 描述 |
-| ---------------------------- | ------------------------------ |
-| ProcessAbnormalTermination | 渲染进程异常退出。 |
-| ProcessWasKilled | 收到SIGKILL，或被手动终止。 |
-| ProcessCrashed | 渲染进程崩溃退出，如段错误。 |
-| ProcessOom | 程序内存不足。 |
-| ProcessExitUnknown | 其他原因。 |
+| 名称 | 描述 |
+| -------------------------- | ----------------- |
+| ProcessAbnormalTermination | 渲染进程异常退出。 |
+| ProcessWasKilled | 收到SIGKILL，或被手动终止。 |
+| ProcessCrashed | 渲染进程崩溃退出，如段错误。 |
+| ProcessOom | 程序内存不足。 |
+| ProcessExitUnknown | 其他原因。 |
### MixedMode枚举说明
- | 名称 | 描述 |
- | ---------- | ---------------------------------- |
- | All | 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。 |
- | Compatible | 混合内容兼容性模式，部分不安全的内容可能被加载。 |
- | None | 不允许加载HTTP和HTTPS混合内容。 |
+| 名称 | 描述 |
+| ---------- | ---------------------------------- |
+| All | 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。 |
+| Compatible | 混合内容兼容性模式，部分不安全的内容可能被加载。 |
+| None | 不允许加载HTTP和HTTPS混合内容。 |
### CacheMode枚举说明
- | 名称 | 描述 |
- | ---------- | ---------------------------------- |
- | Default | 使用未过期的cache加载资源，如果cache中无该资源则从网络中获取。 |
- | None | 加载资源使用cache，如果cache中无该资源则从网络中获取。 |
- | Online | 加载资源不使用cache，全部从网络中获取。 |
- | Only | 只从cache中加载资源。 |
+| 名称 | 描述 |
+| ------- | ------------------------------------ |
+| Default | 使用未过期的cache加载资源，如果cache中无该资源则从网络中获取。 |
+| None | 加载资源使用cache，如果cache中无该资源则从网络中获取。 |
+| Online | 加载资源不使用cache，全部从网络中获取。 |
+| Only | 只从cache中加载资源。 |
### FileSelectorResult对象说明
通知Web组件的文件选择结果。
- 接口
- | 接口名称 | 功能描述 |
- | ---------------------------------------------- | ------------------------------------------------------------ |
+ | 接口名称 | 功能描述 |
+ | ---------------------------------------- | -------------------------------------- |
| handleFileList(fileList: Array\): void | 通知Web组件进行文件选择操作。fileList: 需要进行操作的文件列表。 |
### FileSelectorParam对象说明
- 接口
- | 接口名称 | 功能描述 |
- | ---------------------------------------- | ------------------ |
- | getTitle(): string | 获取文件选择器标题。 |
- | getMode(): FileSelectorMode | 获取文件选择器的模式。 |
- | getAcceptType(): Array\ | 获取文件过滤类型。 |
- | isCapture(): boolean | 获取是否调用多媒体能力。 |
-
+ | 接口名称 | 功能描述 |
+ | -------------------------------- | ------------ |
+ | getTitle(): string | 获取文件选择器标题。 |
+ | getMode(): FileSelectorMode | 获取文件选择器的模式。 |
+ | getAcceptType(): Array\ | 获取文件过滤类型。 |
+ | isCapture(): boolean | 获取是否调用多媒体能力。 |
+
### FileSelectorMode枚举说明
-| 名称 | 描述 |
-| ---------------------------- | ------------------------------ |
-| FileOpenMode | 打开上传单个文件。 |
-| FileOpenMultipleMode | 打开上传多个文件。 |
-| FileOpenFolderMode | 打开上传文件夹模式。 |
-| FileSaveMode | 文件保存模式。 |
+| 名称 | 描述 |
+| -------------------- | ---------- |
+| FileOpenMode | 打开上传单个文件。 |
+| FileOpenMultipleMode | 打开上传多个文件。 |
+| FileOpenFolderMode | 打开上传文件夹模式。 |
+| FileSaveMode | 文件保存模式。 |
## WebController
@@ -389,8 +389,8 @@ getCookieManager(): WebCookie
获取web组件cookie管理对象。
- 返回值
- | 参数类型 | 说明 |
- | ------- | --------- |
+ | 参数类型 | 说明 |
+ | --------- | ---------------------------------------- |
| WebCookie | web组件cookie管理对象，参考[WebCookie](#webcookie)定义。 |
## WebCookie
通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。
@@ -401,13 +401,13 @@ setCookie(url: string, value: string): boolean
- 参数说明
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | -------- | ------------------------ | ---- | ---- | ---------------------------------------- |
- | url | string | 是 | - | 要设置的cookie所属的url。 |
- | value | string | 是 | - | cookie的值。 |
+ | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+ | ----- | ------ | ---- | ---- | ----------------- |
+ | url | string | 是 | - | 要设置的cookie所属的url。 |
+ | value | string | 是 | - | cookie的值。 |
- 返回值
- | 参数类型 | 说明 |
- | ------- | --------- |
+ | 参数类型 | 说明 |
+ | ------- | ------------- |
| boolean | 设置cookie是否成功。 |
### saveCookieSync
@@ -415,12 +415,12 @@ saveCookieSync(): boolean
将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。
- 返回值
- | 参数类型 | 说明 |
- | ------- | --------- |
+ | 参数类型 | 说明 |
+ | ------- | -------------------- |
| boolean | 同步内存cookie到磁盘操作是否成功。 |
## 示例
-```
+```ts
// webComponent.ets
@Entry
@Component
@@ -442,7 +442,7 @@ struct WebComponent {
}
}
```
-```
+```html
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
index 8c28acff124c4e5ee57997331a6a915b7f928e19..b1fdfc60bb82bd795a7690deb0ae6ed87c07a560 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
@@ -19,20 +19,20 @@
- 参数
- | 名称 | 参数类型 | 必填 | 描述 |
- | ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ |
- | id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 |
- | type | string | 是 | 用于指定XComponent组件类型，可选值为：
-surface：组件内容单独送显，直接合成到屏幕。
-component：组件内容与其他组件合成后统一送显。|
- | libraryname | string | 否 | 应用Native层编译输出动态库名称。 |
- | controller | [XComponentController](#XComponentController) | 否 | 给组件绑定一个控制器，通过控制器调用组件方法。 |
+ | 名称 | 参数类型 | 必填 | 描述 |
+ | ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
+ | id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 |
+ | type | string | 是 | 用于指定XComponent组件类型，可选值为：
-surface：组件内容单独送显，直接合成到屏幕。
-component：组件内容与其他组件合成后统一送显。 |
+ | libraryname | string | 否 | 应用Native层编译输出动态库名称。 |
+ | controller | [XComponentController](#XComponentController) | 否 | 给组件绑定一个控制器，通过控制器调用组件方法。 |
## 事件
-| 名称 | 功能描述 |
-| ------------------------------- | ------------------------ |
+| 名称 | 功能描述 |
+| -------------------------------- | ------------ |
| onLoad(context?: object) => void | 插件加载完成时回调事件。 |
-| onDestroy() => void | 插件卸载完成时回调事件。 |
+| onDestroy() => void | 插件卸载完成时回调事件。 |
## XComponentController
@@ -52,8 +52,8 @@ getXComponentSurfaceId(): string
- 返回值
- | 类型 | 描述 |
- | ------ | --------------------------- |
+ | 类型 | 描述 |
+ | ------ | ----------------------- |
| string | XComponent持有Surface的ID。 |
### setXComponentSurfaceSize
@@ -64,10 +64,10 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}):
- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 描述 |
- | ------------- | -------- | ---- | ------ | ----------------------------- |
- | surfaceWidth | number | 是 | - | XComponent持有Surface的宽度。 |
- | surfaceHeight | number | 是 | - | XComponent持有Surface的高度。 |
+ | 参数名 | 参数类型 | 必填 | 默认值 | 描述 |
+ | ------------- | ------ | ---- | ---- | ----------------------- |
+ | surfaceWidth | number | 是 | - | XComponent持有Surface的宽度。 |
+ | surfaceHeight | number | 是 | - | XComponent持有Surface的高度。 |
### getXComponentContext
@@ -77,15 +77,16 @@ getXComponentContext(): Object
- 返回值
- | 类型 | 描述 |
- | ------ | ------------------------------------------------------------ |
+ | 类型 | 描述 |
+ | ------ | ---------------------------------------- |
| Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义。 |
## 示例
提供surface类型XComponent，支持相机预览等能力。
-```
+```ts
+// xxx.ets
import camera from '@ohos.multimedia.camera';
@Entry
@Component
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
index c75ef770d2f9a587bae43d51dab1ef8368ad4ab9..c8f40ceb341459848cdd4299255cf8a145ee99e6 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
@@ -37,7 +37,8 @@ LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: numb
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct LongPressGestureExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
index 5475d871b670eae16b32c58ad9aa0a33f287f9e6..12bb48be63e7b98f75d24766714ef405b8624bc8 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
@@ -68,7 +68,8 @@ PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distan
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct PanGestureExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
index d52439174fa43e261d2403010c76e5259c547e68..91f70398b2bbdb4729075ad5c6648496e9b16781 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
@@ -39,7 +39,8 @@ PinchGesture(options?: { fingers?: number, distance?: number })
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct PinchGestureExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
index 32db06fd1db4de26038f8a53d6380fd4a3d62d8a..fa67676e0e907fc0e240e39bf1b92c72b66b6416 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
@@ -37,7 +37,8 @@ RotationGesture(options?: { fingers?: number, angle?: number })
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct RotationGestureExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
index 0ebf5535e22e0369dcdf47e63bce381a25128229..7e61e752aa132f74698dd4f6593bcec5c9ca6cda 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
@@ -44,7 +44,8 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct SwipeGestureExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
index eed7d440cf94d98e301a8511c8338498fb024304..4da92f9db3e82489714ed2dbd59546bec243ff9c 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
@@ -29,7 +29,8 @@ TapGesture(options?: { count?: number, fingers?: number })
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct TapGestureExample {
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 762ed8031b87fcb5f3a165b59b7bff813cdd0d02..602a4899e45964f304c58de3f5a725fde384ea2d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -12,9 +12,9 @@
CanvasRenderingContext2D(setting: RenderingContextSetting)
- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 |
+ | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+ | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+ | setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 |
### RenderingContextSettings
@@ -24,33 +24,33 @@ RenderingContextSettings(antialias?: bool)
用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。
- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | antialias | bool | 否 | false | 表明canvas是否开启抗锯齿。 |
+ | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+ | --------- | ---- | ---- | ----- | ---------------- |
+ | antialias | bool | 否 | false | 表明canvas是否开启抗锯齿。 |
## 属性
-| 名称 | 类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。
- 类型为<color>时，表示设置填充区域的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
-| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 |
-| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 设置描边的颜色。
- 类型为<color>时，表示设置描边使用的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
-| [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：
- 'butt'：线端点以方形结束。
- 'round'：线端点以圆形结束。
- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 |
-| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：
- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 |
-| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 |
-| [font](#font) | string | 'normal normal 14px sans-serif' | 设置文本绘制中的字体样式。
语法：ctx.font='font-size font-family'
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列。
语法：ctx.font='font-style font-weight font-size font-family'
- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。
- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。 |
-| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
>  **说明：**
> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 |
-| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：
- 'alphabetic'：文本基线是标准的字母基线。
- 'top'：文本基线在文本块的顶部。
- 'hanging'：文本基线是悬挂基线。
- 'middle'：文本基线在文本块的中间。
- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 |
-| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
-| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 |
-| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 |
-| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 |
-| [shadowColor](#shadowcolor) | <color> | - | 设置绘制阴影时的阴影颜色。 |
-| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 |
-| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 |
-| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 |
-| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。 |
+| 名称 | 类型 | 默认值 | 描述 |
+| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。
- 类型为<color>时，表示设置填充区域的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
+| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 |
+| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | 设置描边的颜色。
- 类型为<color>时，表示设置描边使用的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
+| [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：
- 'butt'：线端点以方形结束。
- 'round'：线端点以圆形结束。
- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 |
+| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：
- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 |
+| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 |
+| [font](#font) | string | 'normal normal 14px sans-serif' | 设置文本绘制中的字体样式。
语法：ctx.font='font-size font-family'
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列。
语法：ctx.font='font-style font-weight font-size font-family'
- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。
- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。 |
+| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
>  **说明：**
> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 |
+| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：
- 'alphabetic'：文本基线是标准的字母基线。
- 'top'：文本基线在文本块的顶部。
- 'hanging'：文本基线是悬挂基线。
- 'middle'：文本基线在文本块的中间。
- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 |
+| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
+| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 |
+| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 |
+| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 |
+| [shadowColor](#shadowcolor) | <color> | - | 设置绘制阴影时的阴影颜色。 |
+| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 |
+| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 |
+| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 |
+| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。 |
>  **说明：**
> <color>类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
@@ -58,7 +58,8 @@ RenderingContextSettings(antialias?: bool)
### fillStyle
-```
+```ts
+// xxx.ets
@Entry
@Component
struct FillStyleExample {
@@ -87,7 +88,8 @@ struct FillStyleExample {
### lineWidth
-```
+```ts
+// xxx.ets
@Entry
@Component
struct LineWidthExample {
@@ -116,7 +118,8 @@ struct LineWidthExample {
### strokeStyle
-```
+```ts
+// xxx.ets
@Entry
@Component
struct StrokeStyleExample {
@@ -147,7 +150,8 @@ struct StrokeStyleExample {
### lineCap
-```
+```ts
+// xxx.ets
@Entry
@Component
struct LineCapExample {
@@ -180,7 +184,8 @@ struct LineCapExample {
### lineJoin
-```
+```ts
+// xxx.ets
@Entry
@Component
struct LineJoinExample {
@@ -214,7 +219,8 @@ struct LineJoinExample {
### miterLimit
-```
+```ts
+// xxx.ets
@Entry
@Component
struct MiterLimit {
@@ -248,7 +254,8 @@ struct MiterLimit {
### font
-```
+```ts
+// xxx.ets
@Entry
@Component
struct Font {
@@ -277,7 +284,8 @@ struct Font {
### textAlign
-```
+```ts
+// xxx.ets
@Entry
@Component
struct CanvasExample {
@@ -321,7 +329,8 @@ struct CanvasExample {
### textBaseline
-```
+```ts
+// xxx.ets
@Entry
@Component
struct TextBaseline {
@@ -365,7 +374,8 @@ struct TextBaseline {
### globalAlpha
-```
+```ts
+// xxx.ets
@Entry
@Component
struct GlobalAlpha {
@@ -397,7 +407,8 @@ struct GlobalAlpha {
### lineDashOffset
-```
+```ts
+// xxx.ets
@Entry
@Component
struct LineDashOffset {
@@ -427,21 +438,22 @@ struct LineDashOffset {
### globalCompositeOperation
-| 名称 | 描述 |
-| -------- | -------- |
-| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 |
-| source-atop | 在现有绘制内容顶部显示新绘制内容。 |
-| source-in | 在现有绘制内容中显示新绘制内容。 |
-| source-out | 在现有绘制内容之外显示新绘制内容。 |
-| destination-over | 在新绘制内容上方显示现有绘制内容。 |
-| destination-atop | 在新绘制内容顶部显示现有绘制内容。 |
-| destination-in | 在新绘制内容中显示现有绘制内容。 |
-| destination-out | 在新绘制内容外显示现有绘制内容。 |
-| lighter | 显示新绘制内容和现有绘制内容。 |
-| copy | 显示新绘制内容而忽略现有绘制内容。 |
-| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
-
-```
+| 名称 | 描述 |
+| ---------------- | ------------------------ |
+| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 |
+| source-atop | 在现有绘制内容顶部显示新绘制内容。 |
+| source-in | 在现有绘制内容中显示新绘制内容。 |
+| source-out | 在现有绘制内容之外显示新绘制内容。 |
+| destination-over | 在新绘制内容上方显示现有绘制内容。 |
+| destination-atop | 在新绘制内容顶部显示现有绘制内容。 |
+| destination-in | 在新绘制内容中显示现有绘制内容。 |
+| destination-out | 在新绘制内容外显示现有绘制内容。 |
+| lighter | 显示新绘制内容和现有绘制内容。 |
+| copy | 显示新绘制内容而忽略现有绘制内容。 |
+| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
+
+```ts
+// xxx.ets
@Entry
@Component
struct GlobalCompositeOperation {
@@ -478,7 +490,8 @@ struct GlobalCompositeOperation {
### shadowBlur
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ShadowBlur {
@@ -509,7 +522,8 @@ struct ShadowBlur {
### shadowColor
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ShadowColor {
@@ -540,7 +554,8 @@ struct ShadowColor {
### shadowOffsetX
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ShadowOffsetX {
@@ -572,7 +587,8 @@ struct ShadowOffsetX {
### shadowOffsetY
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ShadowOffsetY {
@@ -603,7 +619,8 @@ struct ShadowOffsetY {
### imageSmoothingEnabled
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ImageSmoothingEnabled {
@@ -641,15 +658,16 @@ fillRect(x: number, y: number, w: number, h: number): void
填充一个矩形。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 说明 |
- | -------- | -------- | -------- | -------- | -------- |
- | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 |
- | y | number | 是 | 0 | 指定矩形左上角点的y坐标。 |
- | width | number | 是 | 0 | 指定矩形的宽度。 |
- | height | number | 是 | 0 | 指定矩形的高度。 |
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
+ | ------ | ------ | ---- | ---- | ------------- |
+ | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 |
+ | y | number | 是 | 0 | 指定矩形左上角点的y坐标。 |
+ | width | number | 是 | 0 | 指定矩形的宽度。 |
+ | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct FillRect {
@@ -682,15 +700,16 @@ strokeRect(x: number, y: number, w: number, h: number): void
绘制具有边框的矩形，矩形内部不填充。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 说明 |
- | -------- | -------- | -------- | -------- | -------- |
- | x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
- | y | number | 是 | 0 | 指定矩形的左上角y坐标。 |
- | width | number | 是 | 0 | 指定矩形的宽度。 |
- | height | number | 是 | 0 | 指定矩形的高度。 |
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
+ | ------ | ------ | ---- | ---- | ------------ |
+ | x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
+ | y | number | 是 | 0 | 指定矩形的左上角y坐标。 |
+ | width | number | 是 | 0 | 指定矩形的宽度。 |
+ | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct StrokeRect {
@@ -722,15 +741,16 @@ clearRect(x: number, y: number, w: number, h: number): void
删除指定区域内的绘制内容。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
- | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 |
- | width | number | 是 | 0 | 指定矩形的宽度。 |
- | height | number | 是 | 0 | 指定矩形的高度。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ------ | ------ | ---- | ---- | ------------- |
+ | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
+ | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 |
+ | width | number | 是 | 0 | 指定矩形的宽度。 |
+ | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct ClearRect {
@@ -764,14 +784,15 @@ fillText(text: string, x: number, y: number): void
绘制填充类文本。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 说明 |
- | -------- | -------- | -------- | -------- | -------- |
- | text | string | 是 | “” | 需要绘制的文本内容。 |
- | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
- | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
+ | ---- | ------ | ---- | ---- | --------------- |
+ | text | string | 是 | “” | 需要绘制的文本内容。 |
+ | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
+ | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct FillText {
@@ -804,14 +825,15 @@ strokeText(text: string, x: number, y: number): void
绘制描边类文本。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | text | string | 是 | “” | 需要绘制的文本内容。 |
- | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
- | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ---- | ------ | ---- | ---- | --------------- |
+ | text | string | 是 | “” | 需要绘制的文本内容。 |
+ | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
+ | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct StrokeText {
@@ -844,22 +866,23 @@ measureText(text: string): TextMetrics
该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 说明 |
- | -------- | -------- | -------- | -------- | -------- |
- | text | string | 是 | "" | 需要进行测量的文本。 |
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
+ | ---- | ------ | ---- | ---- | ---------- |
+ | text | string | 是 | "" | 需要进行测量的文本。 |
- 返回值
- | 类型 | 说明 |
- | -------- | -------- |
- | TextMetrics | 文本的尺寸信息 |
+ | 类型 | 说明 |
+ | ----------- | ------- |
+ | TextMetrics | 文本的尺寸信息 |
- TextMetrics类型描述
- | 属性 | 类型 | 描述 |
- | -------- | -------- | -------- |
- | width | number | 字符串的宽度。 |
+ | 属性 | 类型 | 描述 |
+ | ----- | ------ | ------- |
+ | width | number | 字符串的宽度。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct MeasureText {
@@ -893,18 +916,19 @@ stroke(path?: Path2D): void
进行边框绘制操作。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ---- | ---------------------------------------- | ---- | ---- | ------------ |
+ | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Stroke {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -934,13 +958,14 @@ beginPath(): void
创建一个新的绘制路径。
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct BeginPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -972,19 +997,20 @@ moveTo(x: number, y: number): void
路径从当前点移动到指定点。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 说明 |
- | -------- | -------- | -------- | -------- | -------- |
- | x | number | 是 | 0 | 指定位置的x坐标。 |
- | y | number | 是 | 0 | 指定位置的y坐标。 |
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
+ | ---- | ------ | ---- | ---- | --------- |
+ | x | number | 是 | 0 | 指定位置的x坐标。 |
+ | y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1014,19 +1040,20 @@ lineTo(x: number, y: number): void
从当前点到指定点进行路径连接。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | x | number | 是 | 0 | 指定位置的x坐标。 |
- | y | number | 是 | 0 | 指定位置的y坐标。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ---- | ------ | ---- | ---- | --------- |
+ | x | number | 是 | 0 | 指定位置的x坐标。 |
+ | y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1056,13 +1083,14 @@ closePath(): void
结束当前路径形成一个封闭路径。
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1094,20 +1122,21 @@ createPattern(image: ImageBitmap, repetition: string): void
通过指定图像和重复方式创建图片填充的模板。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 |
- | repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+ | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 |
+ | repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct CreatePattern {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1136,23 +1165,24 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
- | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
- | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
- | cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 |
- | x | number | 是 | 0 | 路径结束时的x坐标值。 |
- | y | number | 是 | 0 | 路径结束时的y坐标值。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ---- | ------ | ---- | ---- | -------------- |
+ | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
+ | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
+ | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
+ | cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 |
+ | x | number | 是 | 0 | 路径结束时的x坐标值。 |
+ | y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1182,15 +1212,16 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
创建二次贝赛尔曲线的路径。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
- | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
- | x | number | 是 | 0 | 路径结束时的x坐标值。 |
- | y | number | 是 | 0 | 路径结束时的y坐标值。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ---- | ------ | ---- | ---- | ----------- |
+ | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
+ | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
+ | x | number | 是 | 0 | 路径结束时的x坐标值。 |
+ | y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct QuadraticCurveTo {
@@ -1225,23 +1256,24 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
绘制弧线路径。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | x | number | 是 | 0 | 弧线圆心的x坐标值。 |
- | y | number | 是 | 0 | 弧线圆心的y坐标值。 |
- | radius | number | 是 | 0 | 弧线的圆半径。 |
- | startAngle | number | 是 | 0 | 弧线的起始弧度。 |
- | endAngle | number | 是 | 0 | 弧线的终止弧度。 |
- | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ------------- | ------- | ---- | ----- | ---------- |
+ | x | number | 是 | 0 | 弧线圆心的x坐标值。 |
+ | y | number | 是 | 0 | 弧线圆心的y坐标值。 |
+ | radius | number | 是 | 0 | 弧线的圆半径。 |
+ | startAngle | number | 是 | 0 | 弧线的起始弧度。 |
+ | endAngle | number | 是 | 0 | 弧线的终止弧度。 |
+ | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1270,22 +1302,23 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
- | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
- | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
- | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
- | radius | number | 是 | 0 | 圆弧的圆半径值。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ------ | ------ | ---- | ---- | --------------- |
+ | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
+ | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
+ | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
+ | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
+ | radius | number | 是 | 0 | 圆弧的圆半径值。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1314,26 +1347,27 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
在规定的矩形区域绘制一个椭圆。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 说明 |
- | -------- | -------- | -------- | -------- | -------- |
- | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
- | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
- | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
- | radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
- | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
- | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
- | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
- | anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
+ | ------------- | ------- | ---- | ----- | ----------------- |
+ | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
+ | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
+ | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
+ | radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
+ | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
+ | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
+ | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
+ | anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1351,7 +1385,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
}
}
```
-
+
@@ -1362,21 +1396,22 @@ rect(x: number, y: number, width: number, height: number): void
创建矩形路径。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
- | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
- | width | number | 是 | 0 | 指定矩形的宽度。 |
- | height | number | 是 | 0 | 指定矩形的高度。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ------ | ------ | ---- | ---- | ------------- |
+ | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
+ | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
+ | width | number | 是 | 0 | 指定矩形的宽度。 |
+ | height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1404,13 +1439,14 @@ fill(): void
对封闭路径进行填充。
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Fill {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1438,13 +1474,14 @@ clip(): void
设置当前路径为剪切路径。
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1464,7 +1501,7 @@ clip(): void
}
}
```
-
+
@@ -1475,18 +1512,19 @@ rotate(rotate: number): void
针对当前坐标轴进行顺时针旋转。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ------ | ------ | ---- | ---- | ---------------------------------------- |
+ | rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Rotate {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1514,19 +1552,20 @@ scale(x: number, y: number): void
设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | x | number | 是 | 0 | 设置水平方向的缩放值。 |
- | y | number | 是 | 0 | 设置垂直方向的缩放值。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ---- | ------ | ---- | ---- | ----------- |
+ | x | number | 是 | 0 | 设置水平方向的缩放值。 |
+ | y | number | 是 | 0 | 设置垂直方向的缩放值。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Scale {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1556,29 +1595,30 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
>  **说明：**
> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
->
+>
> - x' = scaleX \* x + skewY \* y + translateX
->
+>
> - y' = skewX \* x + scaleY \* y + translateY
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | scaleX | number | 是 | 0 | 指定水平缩放值。 |
- | skewX | number | 是 | 0 | 指定水平倾斜值。 |
- | skewY | number | 是 | 0 | 指定垂直倾斜值。 |
- | scaleY | number | 是 | 0 | 指定垂直缩放值。 |
- | translateX | number | 是 | 0 | 指定水平移动值。 |
- | translateY | number | 是 | 0 | 指定垂直移动值。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ---------- | ------ | ---- | ---- | -------- |
+ | scaleX | number | 是 | 0 | 指定水平缩放值。 |
+ | skewX | number | 是 | 0 | 指定水平倾斜值。 |
+ | skewY | number | 是 | 0 | 指定垂直倾斜值。 |
+ | scaleY | number | 是 | 0 | 指定垂直缩放值。 |
+ | translateX | number | 是 | 0 | 指定水平移动值。 |
+ | translateY | number | 是 | 0 | 指定垂直移动值。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Transform {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1612,23 +1652,24 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl
setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | scaleX | number | 是 | 0 | 指定水平缩放值。 |
- | skewX | number | 是 | 0 | 指定水平倾斜值。 |
- | skewY | number | 是 | 0 | 指定垂直倾斜值。 |
- | scaleY | number | 是 | 0 | 指定垂直缩放值。 |
- | translateX | number | 是 | 0 | 指定水平移动值。 |
- | translateY | number | 是 | 0 | 指定垂直移动值。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ---------- | ------ | ---- | ---- | -------- |
+ | scaleX | number | 是 | 0 | 指定水平缩放值。 |
+ | skewX | number | 是 | 0 | 指定水平倾斜值。 |
+ | skewY | number | 是 | 0 | 指定垂直倾斜值。 |
+ | scaleY | number | 是 | 0 | 指定垂直缩放值。 |
+ | translateX | number | 是 | 0 | 指定水平移动值。 |
+ | translateY | number | 是 | 0 | 指定垂直移动值。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct SetTransform {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1659,19 +1700,20 @@ translate(x: number, y: number): void
移动当前坐标系的原点。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | x | number | 是 | 0 | 设置水平平移量。 |
- | y | number | 是 | 0 | 设置竖直平移量。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ---- | ------ | ---- | ---- | -------- |
+ | x | number | 是 | 0 | 设置水平平移量。 |
+ | y | number | 是 | 0 | 设置竖直平移量。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1704,21 +1746,22 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
进行图像绘制。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 |
- | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
- | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
- | sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
- | sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
- | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
- | dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 |
- | dWidth | number | 否 | 0 | 绘制区域的宽度。 |
- | dHeight | number | 否 | 0 | 绘制区域的高度。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ------- | ---------------------------------------- | ---- | ---- | ----------------------------- |
+ | image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 |
+ | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
+ | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
+ | sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
+ | sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
+ | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
+ | dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 |
+ | dWidth | number | 否 | 0 | 绘制区域的宽度。 |
+ | dHeight | number | 否 | 0 | 绘制区域的高度。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct ImageExample {
@@ -1751,10 +1794,10 @@ createImageData(width: number, height: number): Object
创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
- 参数
- | 参数 | 类型 | 必填 | 默认 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | width | number | 是 | 0 | ImageData的宽度。 |
- | height | number | 是 | 0 | ImageData的高度。 |
+ | 参数 | 类型 | 必填 | 默认 | 描述 |
+ | ------ | ------ | ---- | ---- | ------------- |
+ | width | number | 是 | 0 | ImageData的宽度。 |
+ | height | number | 是 | 0 | ImageData的高度。 |
### createImageData
@@ -1764,9 +1807,9 @@ createImageData(imageData: Object): Object
创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
- 参数
- | 参数 | 类型 | 必填 | 默认 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | imagedata | Object | 是 | null | 复制现有的ImageData对象。 |
+ | 参数 | 类型 | 必填 | 默认 | 描述 |
+ | --------- | ------ | ---- | ---- | ----------------- |
+ | imagedata | Object | 是 | null | 复制现有的ImageData对象。 |
### getPixelMap
@@ -1774,12 +1817,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
@@ -1787,12 +1830,12 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | 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 | 需要输出的区域的高度。 |
### putImageData
@@ -1802,24 +1845,25 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | imagedata | Object | 是 | null | 包含像素值的ImageData对象。 |
- | dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 |
- | dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 |
- | dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
- | dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
- | dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 |
- | dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ----------- | ------ | ---- | ------------ | ----------------------------- |
+ | imagedata | Object | 是 | null | 包含像素值的ImageData对象。 |
+ | dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 |
+ | dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 |
+ | dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
+ | dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
+ | dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 |
+ | dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct PutImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1853,13 +1897,14 @@ restore(): void
对保存的绘图上下文进行恢复。
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1884,13 +1929,14 @@ save(): void
对当前的绘图上下文进行保存。
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
@@ -1915,15 +1961,16 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
创建一个线性渐变色。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | x0 | number | 是 | 0 | 起点的x轴坐标。 |
- | y0 | number | 是 | 0 | 起点的y轴坐标。 |
- | x1 | number | 是 | 0 | 终点的x轴坐标。 |
- | y1 | number | 是 | 0 | 终点的y轴坐标。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ---- | ------ | ---- | ---- | -------- |
+ | x0 | number | 是 | 0 | 起点的x轴坐标。 |
+ | y0 | number | 是 | 0 | 起点的y轴坐标。 |
+ | x1 | number | 是 | 0 | 终点的x轴坐标。 |
+ | y1 | number | 是 | 0 | 终点的y轴坐标。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct CreateLinearGradient {
@@ -1961,17 +2008,18 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
创建一个径向渐变色。
- 参数
- | 参数 | 类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | x0 | number | 是 | 0 | 起始圆的x轴坐标。 |
- | y0 | number | 是 | 0 | 起始圆的y轴坐标。 |
- | r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 |
- | x1 | number | 是 | 0 | 终点圆的x轴坐标。 |
- | y1 | number | 是 | 0 | 终点圆的y轴坐标。 |
- | r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
+ | 参数 | 类型 | 必填 | 默认值 | 描述 |
+ | ---- | ------ | ---- | ---- | ----------------- |
+ | x0 | number | 是 | 0 | 起始圆的x轴坐标。 |
+ | y0 | number | 是 | 0 | 起始圆的y轴坐标。 |
+ | r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 |
+ | x1 | number | 是 | 0 | 终点圆的x轴坐标。 |
+ | y1 | number | 是 | 0 | 终点圆的y轴坐标。 |
+ | r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
@Entry
@Component
struct CreateRadialGradient {
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 9e14508861b053d21447df107f519a190263fef1..697696b1804e27753c7b5ea2952c1e68424cfcc2 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
@@ -36,7 +36,8 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct GestureGroupExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
index ea1d29106df1db7eedb5b28b8cec9fd43f5a51d1..15aa306e29043171919c9e6b405b35dc77a316d0 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
@@ -36,7 +36,8 @@ Canvas(context: CanvasRenderingContext2D)
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct CanvasExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
index aa0bc39520f2a1ea4dd66a314cb875425d0a339a..8efa90975994eaf910f5e2232961e1807c745cf7 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
@@ -20,8 +20,9 @@ addColorStop(offset: number, color: string): void
| color | string | 是 | 'ffffff' | 设置渐变的颜色。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
index 39263a225879d2f1f48c99ec8b83ce6daf5d2dc5..8c2fb1e0867e1ec4bb3fc2c75000f31b3e184075 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
@@ -51,7 +51,8 @@ destroy(name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name, 缺省时销毁所有动画。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
import lottie from '@ohos/lottieETS'
@Entry
@@ -130,7 +131,7 @@ play(name: string): void
| name | string | 是 | 被指定的动画名, 同loadAnimation接口参数name，缺省时播放所有动画。 |
- 示例
- ```
+ ```ts
lottie.play(this.animateName)
```
@@ -147,7 +148,7 @@ pause(name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。 |
- 示例
- ```
+ ```ts
lottie.pause(this.animateName)
```
@@ -164,7 +165,7 @@ togglePause(name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 |
- 示例
- ```
+ ```ts
lottie.togglePause(this.animateName)
```
@@ -181,7 +182,7 @@ stop(name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 |
- 示例
- ```
+ ```ts
lottie.stop(this.animateName)
```
@@ -199,7 +200,7 @@ setSpeed(speed: number, name: string): void
| name | string | 是 | 被指定的动画，同loadAnimation接口参数name，缺省时停止所有动画。 |
- 示例
- ```
+ ```ts
lottie.setSpeed(5, this.animateName)
```
@@ -217,7 +218,7 @@ setDirection(direction: AnimationDirection, name: string): void
| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时设置所有动画方向。 |
- 示例
- ```
+ ```ts
lottie.setDirection(-1, this.animateName)
```
@@ -262,7 +263,7 @@ play(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例
- ```
+ ```ts
this.animateItem.play()
```
@@ -279,7 +280,7 @@ destroy(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例
- ```
+ ```ts
this.animateItem.destroy()
```
@@ -296,7 +297,7 @@ pause(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例
- ```
+ ```ts
this.animateItem.pause()
```
@@ -313,7 +314,7 @@ togglePause(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例
- ```
+ ```ts
this.animateItem.togglePause()
```
@@ -330,7 +331,7 @@ stop(name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例
- ```
+ ```ts
this.animateItem.stop()
```
@@ -347,7 +348,7 @@ setSpeed(speed: number): void
| speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 \| -1.0正常速度播放。 |
- 示例
- ```
+ ```ts
this.animateItem.setSpeed(5);
```
@@ -364,7 +365,7 @@ setDirection(direction: AnimationDirection): void
| direction | AnimationDirection | 是 | 1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。
AnimationDirection：1 \| -1。 |
- 示例
- ```
+ ```ts
this.animateItem.setDirection(-1)
```
@@ -383,7 +384,7 @@ goToAndStop(value: number, isFrame?: boolean): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例
- ```
+ ```ts
// 按帧号控制
this.animateItem.goToAndStop(25, true)
// 按时间进度控制
@@ -405,7 +406,7 @@ goToAndPlay(value: number, isFrame: boolean, name?: string): void
| name | string | 否 | 被指定的动画名，缺省默认为空。 |
- 示例
- ```
+ ```ts
// 按帧号控制
this.animateItem.goToAndPlay(25, true)
// 按时间进度控制
@@ -426,7 +427,7 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean
| forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 |
- 示例
- ```
+ ```ts
// 指定播放片段
this.animateItem.playSegments([10, 20], false)
// 指定播放片段列表
@@ -446,7 +447,7 @@ resetSegments(forceFlag: boolean): void
| forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 |
- 示例
- ```
+ ```ts
this.animateItem.resetSegments(true)
```
@@ -458,7 +459,7 @@ resize(): void
刷新动画布局。
- 示例
- ```
+ ```ts
this.animateItem.resize()
```
@@ -475,7 +476,7 @@ setSubframe(useSubFrame: boolean): void
| useSubFrames | boolean | 是 | currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。
true：属性currentFrame显示浮点。
false：属性currentFrame去浮点数显示整数。 |
- 示例
- ```
+ ```ts
this.animateItem.setSubframe(false)
```
@@ -492,7 +493,7 @@ getDuration(inFrames?: boolean): void
| inFrames | boolean | 否 | true：获取帧数， false：获取时间(单位ms)，缺省默认false。 |
- 示例
- ```
+ ```ts
this.animateItem.getDuration(true)
```
@@ -510,7 +511,7 @@ addEventListener<T = any>(name: AnimationEventName, callback: AnimationEve
| callback | AnimationEventCallback<T> | 是 | 用户自定义回调函数 |
- 示例
- ```
+ ```ts
private callbackItem: any = function() {
console.log("grunt loopComplete")
}
@@ -531,10 +532,10 @@ removeEventListener<T = any>(name: AnimationEventName, callback?: Animatio
| 参数 | 类型 | 必填 | 描述 |
| -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' |
- | callback | AnimationEventCallback<T> | 否 | 用户自定义回调函数；缺省为空时，删除此事件的所有回调函数。 |
+ | callback | AnimationEventCallback<T> | 否 | 用户自定义回调函数；缺省为空时，删除此事件的所有回调函数。 |
- 示例
- ```
+ ```ts
this.animateItem.removeEventListener('loopComplete', this.animateName)
```
@@ -552,7 +553,7 @@ triggerEvent<T = any>(name: AnimationEventName, args: T): void
| args | any | 是 | 用户自定义回调参数 |
- 示例
- ```
+ ```ts
private triggerCallBack: any = function(item) {
console.log("trigger loopComplete, name:" + item.name)
}
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
index 34e25b16a7a35c3985ad2fb73dd68b0ceed719fa..5e0ae922f7fef136d0fbc9ff0ea65a4ed660aaca 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
@@ -19,8 +19,9 @@ addPath(path: Object): void
| path | Object | 是 | null | 需要添加到当前路径的路径对象 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct AddPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -56,8 +57,9 @@ closePath(): void
将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -100,8 +102,9 @@ moveTo(x: number, y: number): void
| y | number | 是 | 0 | 目标点Y轴坐标 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -144,8 +147,9 @@ lineTo(x: number, y: number): void
| y | number | 是 | 0 | 目标点Y轴坐标 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -193,8 +197,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -236,8 +241,9 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -282,8 +288,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -325,8 +332,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -372,8 +380,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
| anticlockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -415,8 +424,9 @@ rect(x: number, y: number, width: number, height: number): void
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
index 7ff4c1b32b752117270cbd503aaeb3787da8615d..9837063679bdb85d12bef8c31a1848b9a251ff59 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
@@ -63,7 +63,8 @@ AlphabetIndexer(value: {arrayValue : Array<string>, selected : number})
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct AlphabetIndexerSample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
index 3c2159a08da2df72870e4edb268de33916722e0b..0a0eebc7e7f1a362dfcb858011ba9e441cca0707 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
@@ -58,7 +58,8 @@ Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct BadgeExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md
index 42bf03f17d543448f2172098b54817a1003d100e..0e26d0a550416e107605d38dbf04e474320662a7 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md
@@ -46,7 +46,8 @@ Column(value:{space?: Length})
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ColumnExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md
index 184d4e6c6f0b5c70d60f8a46ea4a7cc16e065053..be5733cda65e15be7737f98346083562f938b99c 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md
@@ -34,7 +34,8 @@ ColumnSplit()
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ColumnSplitExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md
index 1a3f71f9a886de0a44220ebfaa5f1e81de435e01..3c2a7c0169be5ed5df87c7e5bf99c57e0f91c5c3 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md
@@ -34,7 +34,8 @@ Counter()
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct CounterExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md
index fe9f7d9d06007319530bc7a08e2e2ae459cf6e84..0f90a5268f0e616a2fa14a8fbc0963dc83aecb2b 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md
@@ -24,44 +24,44 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: F
标准Flex布局容器。
- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | direction | FlexDirection | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。 |
- | wrap | FlexWrap | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行/列排列。 |
- | justifyContent | FlexAlign | 否 | FlexAlign.Start | 子组件在Flex容器主轴上的对齐格式。 |
- | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign枚举说明) | 否 | ItemAlign.Stretch | 子组件在Flex容器交叉轴上的对齐格式。 |
- | alignContent | FlexAlign | 否 | FlexAlign.Start | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 |
+ | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+ | -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
+ | direction | FlexDirection | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。 |
+ | wrap | FlexWrap | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行/列排列。 |
+ | justifyContent | FlexAlign | 否 | FlexAlign.Start | 子组件在Flex容器主轴上的对齐格式。 |
+ | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign枚举说明) | 否 | ItemAlign.Stretch | 子组件在Flex容器交叉轴上的对齐格式。 |
+ | alignContent | FlexAlign | 否 | FlexAlign.Start | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 |
- FlexDirection枚举说明
- | 名称 | 描述 |
- | -------- | -------- |
- | Row | 主轴与行方向一致作为布局模式。 |
- | RowReverse | 与Row方向相反方向进行布局。 |
- | Column | 主轴与列方向一致作为布局模式。 |
+ | 名称 | 描述 |
+ | ------------- | ---------------- |
+ | Row | 主轴与行方向一致作为布局模式。 |
+ | RowReverse | 与Row方向相反方向进行布局。 |
+ | Column | 主轴与列方向一致作为布局模式。 |
| ColumnReverse | 与Column相反方向进行布局。 |
- FlexWrap枚举说明
- | 名称 | 描述 |
- | -------- | -------- |
- | NoWrap | Flex容器的元素单行/列布局，子项允许超出容器。 |
- | Wrap | Flex容器的元素多行/列排布，子项允许超出容器。 |
+ | 名称 | 描述 |
+ | ----------- | --------------------------- |
+ | NoWrap | Flex容器的元素单行/列布局，子项允许超出容器。 |
+ | Wrap | Flex容器的元素多行/列排布，子项允许超出容器。 |
| WrapReverse | Flex容器的元素反向多行/列排布，子项允许超出容器。 |
- FlexAlign枚举说明
- | 名称 | 描述 |
- | -------- | -------- |
- | Start | 元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。 |
- | Center | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 |
- | End | 元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。 |
+ | 名称 | 描述 |
+ | ------------ | ---------------------------------------- |
+ | Start | 元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。 |
+ | Center | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 |
+ | End | 元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。 |
| SpaceBetween | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。 |
- | SpaceAround | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
- | SpaceEvenly | Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 |
+ | SpaceAround | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
+ | SpaceEvenly | Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 |
## 示例
-```
-// Example 01
+```ts
+// xxx.ets
@Entry
@Component
struct FlexExample1 {
@@ -123,8 +123,8 @@ struct FlexExample1 {
-```
-// Example 02
+```ts
+// xxx.ets
@Entry
@Component
struct FlexExample2 {
@@ -169,8 +169,8 @@ struct FlexExample2 {
-```
-// Example 03
+```ts
+// xxx.ets
@Component
struct JustifyContentFlex {
@Prop justifyContent : number
@@ -218,8 +218,8 @@ struct FlexExample3 {
-```
-// Example 04
+```ts
+// xxx.ets
@Component
struct AlignItemsFlex {
@Prop alignItems : number
@@ -269,8 +269,8 @@ struct FlexExample4 {
-```
-// Example 05
+```ts
+// xxx.ets
@Component
struct AlignContentFlex {
@Prop alignContent: number
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
index 9b757863d61cf2b961ce9540d213313662e67e64..0da3b67e99f2e1e70d1b0bbe7233d826f59d7135 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
@@ -56,7 +56,8 @@ Grid()
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct GridExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md
index b90566a04ba55389ccc14135cc5afd6face5f36a..d85a79f1ff6d21102addcf2a1c3c2ef6e6f6057b 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md
@@ -51,7 +51,8 @@ GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct GridContainerExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md
index 98363660810da775de1869dbe402d36d3e674926..2743f3bd83f6d70fefd83f4509a138bd8240a8a3 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md
@@ -43,7 +43,8 @@ GridItem()
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct GridItemExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
index c86fd24d0039df64ce45978ba6882b586f1211d8..d89def3603c160ca3001f567ca11e49a7a8a787d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
@@ -72,7 +72,8 @@ List(value:{space?: number, initialIndex?: number})
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ListExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
index d5c1abcf9079bbc4f57b6275b966a5ae5924fa4c..18e6267d2c3abd30ff956e69bac103ce0f652d7d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
@@ -46,7 +46,8 @@ ListItem()
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ListItemExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md
index b8afaa69fd71ca9e71ee62ddc6b4e7cfa9cf51b9..772f7fb2b26d6623ff444e644c83d37dc4c68a21 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md
@@ -24,31 +24,31 @@ Navigator(value?: {target: string, type?: NavigationType})
创建路由组件。
- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | target | string | 是 | - | 指定跳转目标页面的路径。 |
- | type | NavigationType | 否 | NavigationType.Push | 指定路由方式。 |
+ | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+ | ------ | -------------- | ---- | ------------------- | ------------ |
+ | target | string | 是 | - | 指定跳转目标页面的路径。 |
+ | type | NavigationType | 否 | NavigationType.Push | 指定路由方式。 |
- NavigationType枚举说明
- | 名称 | 描述 |
- | -------- | -------- |
- | Push | 跳转到应用内的指定页面。 |
- | Replace | 用应用内的某个页面替换当前页面，并销毁被替换的页面。 |
- | Back | 返回上一页面或指定的页面。 |
+ | 名称 | 描述 |
+ | ------- | -------------------------- |
+ | Push | 跳转到应用内的指定页面。 |
+ | Replace | 用应用内的某个页面替换当前页面，并销毁被替换的页面。 |
+ | Back | 返回上一页面或指定的页面。 |
## 属性
-| 名称 | 参数 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| active | boolean | - | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 |
-| params | Object | undefined | 跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。 |
+| 名称 | 参数 | 默认值 | 描述 |
+| ------ | ------- | --------- | ---------------------------------------- |
+| active | boolean | - | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 |
+| params | Object | undefined | 跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。 |
## 示例
-```
-// Navigator Page
+```ts
+// Navigator.ets
@Entry
@Component
struct NavigatorExample {
@@ -72,8 +72,8 @@ struct NavigatorExample {
}
```
-```
-// Detail Page
+```ts
+// Detail.ets
import router from '@system.router'
@Entry
@@ -95,8 +95,8 @@ struct DetailExample {
```
-```
-// Back Page
+```ts
+// Back.ets
@Entry
@Component
struct BackExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md
index b92c822e71dc187b16977e3cd71190973d29cabd..fec1409024b2f9d77c464f85f05f051c442cf97f 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md
@@ -62,7 +62,8 @@ Panel(value:{show：boolean})
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct PanelExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md
index c9d8d7ee66c96cd73f4dffd5259eef10840c89e1..891b9381bb27fb1d3d138c322e40b8fd16257fff 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md
@@ -48,7 +48,8 @@ Refresh\(value: \{refreshing: boolean, offset?: Length, friction?: number\}\)
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct RefreshExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
index 3f9d172cf9ef2c7fcb3d29e66c4866bf9366c907..4452551b9286f32c78960375a68e308a0b04320a 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
@@ -44,7 +44,8 @@ Row(value:{space?: Length})
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct RowExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md
index 50a27edc41852620a49c0f91c9b653431c69921a..f21fe766816a1b51142d7d73a25c92158ede8365 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md
@@ -34,7 +34,8 @@ RowSplit()
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct RowSplitExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
index 75e8fd62f400078e0c9cadbcc0bdde581e65d9ef..0e743ae80369607c0ecd1942895f56f0c24f56c2 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
@@ -135,7 +135,8 @@ scroller.scrollToIndex(value: number): void
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ScrollExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
index 52ca4fe7beff7c77f39b43aa010b4a3d26816985..7999a20ac26436d360b2a6c976ccd6464fc18161 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
@@ -65,7 +65,8 @@ SideBarContainer( type?: SideBarContainerType )
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct SideBarContainerExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md
index 16691f323bce9ecfc053bf025313c45ec141eeee..30afc3e5e4c5a6d14d58bb8619764e4878ddcd41 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md
@@ -29,7 +29,8 @@ Stack(value:{alignContent?: Alignment})
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct StackExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
index dd12c65d93d546816c11c17610aa166ac5816f10..ff05dddc30d5de88a45877750ef319a1f04596cd 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
@@ -22,49 +22,50 @@
Swiper(value:{controller?: SwiperController})
- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件翻页。 |
+ | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+ | ---------- | ------------------------------------- | ---- | ---- | -------------------- |
+ | controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件翻页。 |
## 属性
-| 名称 | 参数类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 |
-| autoPlay | boolean | false | 子组件是否自动播放，自动播放状态下，导航点不可操作。 |
-| interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为毫秒。 |
-| indicator | boolean | true | 是否启用导航点指示器。 |
-| loop | boolean | true | 是否开启循环。 |
-| duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 |
-| vertical | boolean | false | 是否为纵向滑动。 |
-| itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 |
-| cachedCount8+ | number | 1 | 设置预加载子组件个数。 |
-| disableSwipe8+ | boolean | false | 禁用组件滑动切换功能。 |
-| curve8+ | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 |
-| indicatorStyle8+| {
left?: Length,
top?: Length,
right?: Length,
bottom?: Length,
size?: Length,
color?: Color,
selectedColor?: Color
} | - |设置indicator样式：
- left: 设置导航点距离Swiper组件左边的距离。
- top: 设置导航点距离Swiper组件顶部的距离。
- right: 设置导航点距离Swiper组件右边的距离。
- bottom: 设置导航点距离Swiper组件底部的距离。
- size: 设置导航点的直径。
- color: 设置导航点的颜色。
- selectedColor: 设置选中的导航点的颜色。 |
+| 名称 | 参数类型 | 默认值 | 描述 |
+| --------------------------- | ---------------------------------------- | ---------- | ---------------------------------------- |
+| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 |
+| autoPlay | boolean | false | 子组件是否自动播放，自动播放状态下，导航点不可操作。 |
+| interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为毫秒。 |
+| indicator | boolean | true | 是否启用导航点指示器。 |
+| loop | boolean | true | 是否开启循环。 |
+| duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 |
+| vertical | boolean | false | 是否为纵向滑动。 |
+| itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 |
+| cachedCount8+ | number | 1 | 设置预加载子组件个数。 |
+| disableSwipe8+ | boolean | false | 禁用组件滑动切换功能。 |
+| curve8+ | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 |
+| indicatorStyle8+ | {
left?: Length,
top?: Length,
right?: Length,
bottom?: Length,
size?: Length,
color?: Color,
selectedColor?: Color
} | - | 设置indicator样式：
- left: 设置导航点距离Swiper组件左边的距离。
- top: 设置导航点距离Swiper组件顶部的距离。
- right: 设置导航点距离Swiper组件右边的距离。
- bottom: 设置导航点距离Swiper组件底部的距离。
- size: 设置导航点的直径。
- color: 设置导航点的颜色。
- selectedColor: 设置选中的导航点的颜色。 |
### SwiperController
Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。
-| 接口名称 | 功能描述 |
-| -------- | -------- |
-| showNext():void | 翻至下一页。 |
-| showPrevious():void | 翻至上一页。 |
+| 接口名称 | 功能描述 |
+| ------------------- | ------ |
+| showNext():void | 翻至下一页。 |
+| showPrevious():void | 翻至上一页。 |
## 事件
-| 名称 | 功能描述 |
-| -------- | -------- |
-| onChange( index: number) => void | 当前显示的组件索引变化时触发该事件。 |
+| 名称 | 功能描述 |
+| ---------------------------------------- | ------------------ |
+| onChange( index: number) => void | 当前显示的组件索引变化时触发该事件。 |
## 示例
-```
+```ts
+// xxx.ets
class MyDataSource implements IDataSource {
private list: number[] = []
private listener: DataChangeListener
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
index 27ea97430c187bfe4fd5ec1dec91a56a95d9c876..a1787bd3f304061a9545bbab2382798344240de6 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
@@ -38,7 +38,8 @@ TabContent()
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct TabContentExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
index dc4ebb5e6880bf743b284ffdbb644f36a7d1f1f3..d7ec8f6c21b061c4eb4f074c46639a096b05c868 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
@@ -86,7 +86,8 @@ changeIndex(value: number): void
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct TabsExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
index c2e660b62c106a8337592bfc21de67bb9b6faa9d..b90ff1a4071f755a97c67f77e1b167265945cc77 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
@@ -43,7 +43,8 @@ Circle(options?: {width: Length, height: Length})
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct CircleExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
index 322800fca201305e89e4c767c2fa142af3bb49a3..c918a7701c852355937f13a966c1b5709382a257 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
@@ -43,7 +43,8 @@ ellipse(options?: {width: Length, height: Length})
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct EllipseExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
index dd0565e1a35a6a5bfe6795454661260316f4e26a..af4ca163768f20a941df3080367ec51cea35ee4e 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
@@ -45,7 +45,8 @@ Line(options?: {width: Length, height: Length})
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct LineExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
index f883fbead681e1086960124f68ec3db2e7853366..bd1f35ed91382a2ee2f2ec68b3d7a625aa3c511a 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
@@ -19,32 +19,33 @@
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
-| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
-| -------- | --------------------------------------- | ------ | ---- | ------------------------------------------------------------ |
-| width | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的宽度。 |
-| height | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的高度。 |
-| commands | string | '' | 是 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
+| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
+| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- |
+| width | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的宽度。 |
+| height | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的高度。 |
+| commands | string | '' | 是 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
commands支持的绘制命令如下：
-| 命令 | 名称 | 参数 | 说明 |
-| ---- | -------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------ |
-| M | moveto | （x y） | 在给定的 (x, y) 坐标处开始一个新的子路径。例如，`M 0 0` 表示将（0, 0）点作为新子路径的起始点。 |
-| L | lineto | （x y） | 从当前点到给定的 (x, y) 坐标画一条线，该坐标成为新的当前点。例如，`L 50 50` 表示绘制当前点到（50, 50）点的直线，并将（50, 50）点作为新子路径的起始点。 |
-| H | horizontal lineto | x | 从当前点绘制一条水平线，等效于将y坐标指定为0的L命令。例如，`H 50 ` 表示绘制当前点到（50, 0）点的直线，并将（50, 0）点作为新子路径的起始点。 |
-| V | vertical lineto | y | 从当前点绘制一条垂直线，等效于将x坐标指定为0的L命令。例如，`V 50 ` 表示绘制当前点到（0, 50）点的直线，并将（0, 50）点作为新子路径的起始点。 |
-| C | curveto | (x1 y1 x2 y2 x y) | 使用 (x1, y1) 作为曲线起点的控制点， (x2, y2) 作为曲线终点的控制点，从当前点到 (x, y) 绘制三次贝塞尔曲线。例如，`C100 100 250 100 250 200 ` 表示绘制当前点到（250, 200）点的三次贝塞尔曲线，并将（250, 200）点作为新子路径的起始点。 |
-| S | smooth curveto | (x2 y2 x y) | (x2, y2) 作为曲线终点的控制点，绘制从当前点到 (x, y) 绘制三次贝塞尔曲线。若前一个命令是C或S，则起点控制点是上一个命令的终点控制点相对于起点的映射。 例如，`C100 100 250 100 250 200 S400 300 400 200`第二段贝塞尔曲线的起点控制点为（250, 300）。如果没有前一个命令或者前一个命令不是 C或S，则第一个控制点与当前点重合。 |
-| Q | quadratic Belzier curve | (x1 y1 x y) | 使用 (x1, y1) 作为控制点，从当前点到 (x, y) 绘制二次贝塞尔曲线。例如，`Q400 50 600 300 ` 表示绘制当前点到（600, 300）点的二次贝塞尔曲线，并将（600, 300）点作为新子路径的起始点。 |
-| T | smooth quadratic Belzier curveto | (x y) | 绘制从当前点到 (x, y) 绘制二次贝塞尔曲线。若前一个命令是Q或T，则控制点是上一个命令的终点控制点相对于起点的映射。 例如，`Q400 50 600 300 T1000 300`第二段贝塞尔曲线的控制点为（800, 350）。 如果没有前一个命令或者前一个命令不是 Q或T，则第一个控制点与当前点重合。 |
+| 命令 | 名称 | 参数 | 说明 |
+| ---- | -------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| M | moveto | （x y） | 在给定的 (x, y) 坐标处开始一个新的子路径。例如，`M 0 0` 表示将（0, 0）点作为新子路径的起始点。 |
+| L | lineto | （x y） | 从当前点到给定的 (x, y) 坐标画一条线，该坐标成为新的当前点。例如，`L 50 50` 表示绘制当前点到（50, 50）点的直线，并将（50, 50）点作为新子路径的起始点。 |
+| H | horizontal lineto | x | 从当前点绘制一条水平线，等效于将y坐标指定为0的L命令。例如，`H 50 ` 表示绘制当前点到（50, 0）点的直线，并将（50, 0）点作为新子路径的起始点。 |
+| V | vertical lineto | y | 从当前点绘制一条垂直线，等效于将x坐标指定为0的L命令。例如，`V 50 ` 表示绘制当前点到（0, 50）点的直线，并将（0, 50）点作为新子路径的起始点。 |
+| C | curveto | (x1 y1 x2 y2 x y) | 使用 (x1, y1) 作为曲线起点的控制点， (x2, y2) 作为曲线终点的控制点，从当前点到 (x, y) 绘制三次贝塞尔曲线。例如，`C100 100 250 100 250 200 ` 表示绘制当前点到（250, 200）点的三次贝塞尔曲线，并将（250, 200）点作为新子路径的起始点。 |
+| S | smooth curveto | (x2 y2 x y) | (x2, y2) 作为曲线终点的控制点，绘制从当前点到 (x, y) 绘制三次贝塞尔曲线。若前一个命令是C或S，则起点控制点是上一个命令的终点控制点相对于起点的映射。 例如，`C100 100 250 100 250 200 S400 300 400 200`第二段贝塞尔曲线的起点控制点为（250, 300）。如果没有前一个命令或者前一个命令不是 C或S，则第一个控制点与当前点重合。 |
+| Q | quadratic Belzier curve | (x1 y1 x y) | 使用 (x1, y1) 作为控制点，从当前点到 (x, y) 绘制二次贝塞尔曲线。例如，`Q400 50 600 300 ` 表示绘制当前点到（600, 300）点的二次贝塞尔曲线，并将（600, 300）点作为新子路径的起始点。 |
+| T | smooth quadratic Belzier curveto | (x y) | 绘制从当前点到 (x, y) 绘制二次贝塞尔曲线。若前一个命令是Q或T，则控制点是上一个命令的终点控制点相对于起点的映射。 例如，`Q400 50 600 300 T1000 300`第二段贝塞尔曲线的控制点为（800, 350）。 如果没有前一个命令或者前一个命令不是 Q或T，则第一个控制点与当前点重合。 |
| A | elliptical Arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | 从当前点到 (x, y) 绘制一条椭圆弧。椭圆的大小和方向由两个半径 (rx, ry) 和x-axis-rotation定义，指示整个椭圆相对于当前坐标系如何旋转（以度为单位）。 large-arc-flag 和 sweep-flag确定弧的绘制方式。 |
-| Z | closepath | none | 通过将当前路径连接回当前子路径的初始点来关闭当前子路径。 |
+| Z | closepath | none | 通过将当前路径连接回当前子路径的初始点来关闭当前子路径。 |
例如： commands('M0 20 L50 50 L50 100 Z')定义了一个三角形，起始于位置（0，20），接着绘制点（0，20）到点（50，50）的直线，再绘制点（50，50）到点（50，100）的直线，最后绘制点（50，100）到（0，20）的直线关闭路径，形成封闭三角形。
## 示例
```ts
+// xxx.ets
@Entry
@Component
struct PathExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
index c0b0efbd5d0e21de0ae60f5bfd1a34b98ec1d5bb..21c0705a50dd3ff05c3a9f765bdfcb357e1fdede 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
@@ -44,7 +44,8 @@ Polygon(value:{options?: {width: Length, height: Length}})
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct PolygonExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
index cb6add47d5a1c90442db199b8e172954905237c5..ae21b325e6711a52f85c8b858f114bb6df684c2b 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
@@ -44,7 +44,8 @@ Polyline(options?: {width: Length, height: Length})
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct PolylineExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
index be2e35cf3ed10699a115fef900de6e29c2609b29..319a305f30d369fe3d8b9a371533181f419f616b 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
@@ -49,7 +49,8 @@ Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array<L
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct RectExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
index 7c3e80fe8db461f185e254d9e7b22ab284aa7697..8ad48c0f5a69d5484fc9061088a430eab2d459da 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
@@ -59,7 +59,8 @@ Shape(value:{target?: PixelMap})
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ShapeExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
index 9b2c8200c3c62f8472861e88590fd3fb47866e0f..9b8d1c0cf2279805ff00f1e9c4b3b2a54f7b5156 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
@@ -30,7 +30,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct AnimateToExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md b/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
index 498690dcb00b9e93dc70ccd04d26e5b7ecdf5486..7fa70fe3c190dc1afd026fc76d0ecbbbbbe631f6 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
@@ -58,7 +58,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct GestureSettingsExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md b/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md
index 52c9f306c48d6d5c1d3f0f3aa56163e0a78fc1f5..a970e95ff945db2c971d61b795f42cdab9563dd3 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md
@@ -25,9 +25,9 @@ init(curve?: Curve): Object
- 参数
- | 参数名 | 类型 | 必填 | 默认值 | 说明 |
- | -------- | -------- | -------- | -------- | -------- |
- | curve | Curve | 否 | Linear | 曲线对象。 |
+ | 参数名 | 类型 | 必填 | 默认值 | 说明 |
+ | ----- | ----- | ---- | ------ | ----- |
+ | curve | Curve | 否 | Linear | 曲线对象。 |
- 返回值
曲线对象Object。
@@ -42,10 +42,10 @@ steps(count: number, end: boolean): Object
- 参数
- | 参数名 | 类型 | 必填 | 默认值 | 说明 |
- | -------- | -------- | -------- | -------- | -------- |
- | count | number | 是 | - | 阶梯的数量，需要为正整数。 |
- | end | boolean | 否 | true | 在每个间隔的起点或是终点发生阶跃变化 ，默认值为true，即在终点发生阶跃变化。 |
+ | 参数名 | 类型 | 必填 | 默认值 | 说明 |
+ | ----- | ------- | ---- | ---- | ---------------------------------------- |
+ | count | number | 是 | - | 阶梯的数量，需要为正整数。 |
+ | end | boolean | 否 | true | 在每个间隔的起点或是终点发生阶跃变化 ，默认值为true，即在终点发生阶跃变化。 |
- 返回值
曲线对象Object。
@@ -60,12 +60,12 @@ cubicBezier(x1: number, y1: number, x2: number, y2: number): Object
- 参数
- | 参数名 | 类型 | 必填 | 说明 |
- | -------- | -------- | -------- | -------- |
- | x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。 |
- | y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。 |
- | x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。 |
- | y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。 |
+ | 参数名 | 类型 | 必填 | 说明 |
+ | ---- | ------ | ---- | -------------- |
+ | x1 | number | 是 | 确定贝塞尔曲线第一点横坐标。 |
+ | y1 | number | 是 | 确定贝塞尔曲线第一点纵坐标。 |
+ | x2 | number | 是 | 确定贝塞尔曲线第二点横坐标。 |
+ | y2 | number | 是 | 确定贝塞尔曲线第二点纵坐标。 |
- 返回值
曲线对象Object。
@@ -80,12 +80,12 @@ spring(velocity: number, mass: number, stiffness: number, damping: number): Obje
- 参数
- | 参数名 | 类型 | 必填 | 说明 |
- | -------- | -------- | -------- | -------- |
- | velocity | number | 是 | 初始速度。 |
- | mass | number | 是 | 质量。 |
- | stiffness | number | 是 | 刚度。 |
- | damping | number | 是 | 阻尼。 |
+ | 参数名 | 类型 | 必填 | 说明 |
+ | --------- | ------ | ---- | ----- |
+ | velocity | number | 是 | 初始速度。 |
+ | mass | number | 是 | 质量。 |
+ | stiffness | number | 是 | 刚度。 |
+ | damping | number | 是 | 阻尼。 |
- 返回值
曲线对象Object。
@@ -93,7 +93,7 @@ spring(velocity: number, mass: number, stiffness: number, damping: number): Obje
## 示例
-```
+```ts
import Curves from '@ohos.curves'
let curve1 = Curves.init() // 创建一个默认线性插值曲线
let curve2 = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
@@ -103,13 +103,13 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞
曲线对象只能通过上面的接口创建。
-| 接口名称 | 功能描述 |
-| -------- | -------- |
-| interpolate(time: number): number | 插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值。
time: 当前的归一化时间参数，有效值范围0到1。
返回归一化time时间点对应的曲线插值。 |
+| 接口名称 | 功能描述 |
+| ---------------------------------------- | ---------------------------------------- |
+| interpolate(time: number): number | 插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值。
time: 当前的归一化时间参数，有效值范围0到1。
返回归一化time时间点对应的曲线插值。 |
- 示例
- ```
+ ```ts
import Curves from '@ohos.curves'
let curve = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
let value: number = curve.interpolate(0.5) // 计算得到时间到一半时的插值
@@ -118,7 +118,8 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞
## 整体示例
-```
+```ts
+// xxx.ets
import Curves from '@ohos.curves'
@Entry
@Component
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md b/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md
index fa9ecb8c49bc37ad43f20fabc6f14b77718768a6..83ab2d8ace5bbdacff1f0878847596513c15f61d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md
@@ -25,37 +25,37 @@ Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵，
- 参数
- | 参数名 | 类型 | 必填 | 默认值 | 说明 |
- | -------- | -------- | -------- | -------- | -------- |
- | array | Array<number> | 是 | [1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1] | 参数为长度为16（4\*4）的number数组, 详情见参数描述。 |
+ | 参数名 | 类型 | 必填 | 默认值 | 说明 |
+ | ----- | ------------------- | ---- | ---------------------------------------- | -------------------------------------- |
+ | array | Array<number> | 是 | [1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1] | 参数为长度为16（4\*4）的number数组, 详情见参数描述。 |
- 返回值
- | 类型 | 说明 |
- | -------- | -------- |
- | Object | 根据入参创建的四阶矩阵对象。 |
+ | 类型 | 说明 |
+ | ------ | -------------- |
+ | Object | 根据入参创建的四阶矩阵对象。 |
- 参数描述
- | 参数名 | 类型 | 必填 | 说明 |
- | -------- | -------- | -------- | -------- |
- | m00 | number | 是 | x轴缩放值，单位矩阵默认为1。 |
- | m01 | number | 是 | 第2个值，xyz轴旋转会影响这个值。 |
- | m02 | number | 是 | 第3个值，xyz轴旋转会影响这个值。 |
- | m03 | number | 是 | 无实际意义。 |
- | m10 | number | 是 | 第5个值，xyz轴旋转会影响这个值。 |
- | m11 | number | 是 | y轴缩放值，单位矩阵默认为1。 |
- | m12 | number | 是 | 第7个值，xyz轴旋转会影响这个值。 |
- | m13 | number | 是 | 无实际意义。 |
- | m20 | number | 是 | 第9个值，xyz轴旋转会影响这个值。 |
- | m21 | number | 是 | 第10个值，xyz轴旋转会影响这个值。 |
- | m22 | number | 是 | z轴缩放值，单位矩阵默认为1。 |
- | m23 | number | 是 | 无实际意义。 |
- | m30 | number | 是 | x轴平移值，单位px，单位矩阵默认为0。 |
- | m31 | number | 是 | y轴平移值，单位px，单位矩阵默认为0。 |
- | m32 | number | 是 | z轴平移值，单位px，单位矩阵默认为0。 |
- | m33 | number | 是 | 齐次坐标下生效，产生透视投影效果。 |
+ | 参数名 | 类型 | 必填 | 说明 |
+ | ---- | ------ | ---- | -------------------- |
+ | m00 | number | 是 | x轴缩放值，单位矩阵默认为1。 |
+ | m01 | number | 是 | 第2个值，xyz轴旋转会影响这个值。 |
+ | m02 | number | 是 | 第3个值，xyz轴旋转会影响这个值。 |
+ | m03 | number | 是 | 无实际意义。 |
+ | m10 | number | 是 | 第5个值，xyz轴旋转会影响这个值。 |
+ | m11 | number | 是 | y轴缩放值，单位矩阵默认为1。 |
+ | m12 | number | 是 | 第7个值，xyz轴旋转会影响这个值。 |
+ | m13 | number | 是 | 无实际意义。 |
+ | m20 | number | 是 | 第9个值，xyz轴旋转会影响这个值。 |
+ | m21 | number | 是 | 第10个值，xyz轴旋转会影响这个值。 |
+ | m22 | number | 是 | z轴缩放值，单位矩阵默认为1。 |
+ | m23 | number | 是 | 无实际意义。 |
+ | m30 | number | 是 | x轴平移值，单位px，单位矩阵默认为0。 |
+ | m31 | number | 是 | y轴平移值，单位px，单位矩阵默认为0。 |
+ | m32 | number | 是 | z轴平移值，单位px，单位矩阵默认为0。 |
+ | m33 | number | 是 | 齐次坐标下生效，产生透视投影效果。 |
- 示例
- ```
+ ```ts
import Matrix4 from '@ohos.matrix4'
// 创建一个四阶矩阵
let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
@@ -74,12 +74,12 @@ Matrix的初始化函数，可以返回一个单位矩阵对象。
- 返回值
- | 类型 | 说明 |
- | -------- | -------- |
- | Object | 单位矩阵对象。 |
+ | 类型 | 说明 |
+ | ------ | ------- |
+ | Object | 单位矩阵对象。 |
- 示例
- ```
+ ```ts
// matrix1 和 matrix2 效果一致
import Matrix4 from '@ohos.matrix4'
let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
@@ -99,12 +99,13 @@ Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。
- 返回值
- | 类型 | 说明 |
- | -------- | -------- |
- | Object | 当前矩阵的拷贝对象。 |
+ | 类型 | 说明 |
+ | ------ | ---------- |
+ | Object | 当前矩阵的拷贝对象。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
import Matrix4 from '@ohos.matrix4'
@Entry
@Component
@@ -142,17 +143,18 @@ Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个
- 参数
- | 参数名 | 类型 | 必填 | 默认值 | 说明 |
- | -------- | -------- | -------- | -------- | -------- |
- | matrix | Matrix4 | 是 | - | 待叠加的矩阵对象。 |
+ | 参数名 | 类型 | 必填 | 默认值 | 说明 |
+ | ------ | ------- | ---- | ---- | --------- |
+ | matrix | Matrix4 | 是 | - | 待叠加的矩阵对象。 |
- 返回值
- | 类型 | 说明 |
- | -------- | -------- |
- | Object | 矩阵叠加后的对象。 |
+ | 类型 | 说明 |
+ | ------ | --------- |
+ | Object | 矩阵叠加后的对象。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
import Matrix4 from '@ohos.matrix4'
@Entry
@Component
@@ -183,12 +185,12 @@ Matrix的逆函数，可以返回一个当前矩阵对象的逆矩阵，即效
- 返回值
- | 类型 | 说明 |
- | -------- | -------- |
- | Object | 当前矩阵的逆矩阵对象。 |
+ | 类型 | 说明 |
+ | ------ | ----------- |
+ | Object | 当前矩阵的逆矩阵对象。 |
- 示例
- ```
+ ```ts
import Matrix4 from '@ohos.matrix4'
// matrix1(宽放大2倍) 和 matrix2(宽缩小2倍) 效果相反
let matrix1 = Matrix4.identity().scale({x:2})
@@ -205,20 +207,21 @@ Matrix的平移函数，可以为当前矩阵增加x轴/Y轴/Z轴平移效果。
- 参数
- | 参数名 | 类型 | 必填 | 默认值 | 说明 |
- | -------- | -------- | -------- | -------- | -------- |
- | x | number | 否 | 0 | x轴的平移距离，单位px。 |
- | y | number | 否 | 0 | y轴的平移距离，单位px。 |
- | z | number | 否 | 0 | z轴的平移距离，单位px。 |
+ | 参数名 | 类型 | 必填 | 默认值 | 说明 |
+ | ---- | ------ | ---- | ---- | ------------- |
+ | x | number | 否 | 0 | x轴的平移距离，单位px。 |
+ | y | number | 否 | 0 | y轴的平移距离，单位px。 |
+ | z | number | 否 | 0 | z轴的平移距离，单位px。 |
- 返回值
- | 类型 | 说明 |
- | -------- | -------- |
- | Object | 增加好平移效果后的矩阵对象。 |
+ | 类型 | 说明 |
+ | ------ | -------------- |
+ | Object | 增加好平移效果后的矩阵对象。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
import Matrix4 from '@ohos.matrix4'
@Entry
@Component
@@ -246,22 +249,23 @@ Matrix的缩放函数，可以为当前矩阵增加x轴/Y轴/Z轴缩放效果。
- 参数
- | 参数名 | 类型 | 必填 | 默认值 | 说明 |
- | -------- | -------- | -------- | -------- | -------- |
- | x | number | 否 | 1 | x轴的缩放倍数。 |
- | y | number | 否 | 1 | y轴的缩放倍数。 |
- | z | number | 否 | 1 | z轴的缩放倍数。 |
- | centerX | number | 否 | 0 | 变换中心点x轴坐标。 |
- | centerY | number | 否 | 0 | 变换中心点y轴坐标。 |
+ | 参数名 | 类型 | 必填 | 默认值 | 说明 |
+ | ------- | ------ | ---- | ---- | ---------- |
+ | x | number | 否 | 1 | x轴的缩放倍数。 |
+ | y | number | 否 | 1 | y轴的缩放倍数。 |
+ | z | number | 否 | 1 | z轴的缩放倍数。 |
+ | centerX | number | 否 | 0 | 变换中心点x轴坐标。 |
+ | centerY | number | 否 | 0 | 变换中心点y轴坐标。 |
- 返回值
- | 类型 | 说明 |
- | -------- | -------- |
- | Object | 增加好缩放效果后的矩阵对象。 |
+ | 类型 | 说明 |
+ | ------ | -------------- |
+ | Object | 增加好缩放效果后的矩阵对象。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
import Matrix4 from '@ohos.matrix4'
@Entry
@Component
@@ -289,23 +293,24 @@ Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。
- 参数
- | 参数名 | 类型 | 必填 | 默认值 | 说明 |
- | -------- | -------- | -------- | -------- | -------- |
- | x | number | 否 | 1 | 旋转轴向量x坐标。 |
- | y | number | 否 | 1 | 旋转轴向量y坐标。 |
- | z | number | 否 | 1 | 旋转轴向量z坐标。 |
- | angle | number | 否 | 0 | 旋转角度。 |
- | centerX | number | 否 | 0 | 变换中心点x轴坐标。 |
- | centerY | number | 否 | 0 | 变换中心点y轴坐标。 |
+ | 参数名 | 类型 | 必填 | 默认值 | 说明 |
+ | ------- | ------ | ---- | ---- | ---------- |
+ | x | number | 否 | 1 | 旋转轴向量x坐标。 |
+ | y | number | 否 | 1 | 旋转轴向量y坐标。 |
+ | z | number | 否 | 1 | 旋转轴向量z坐标。 |
+ | angle | number | 否 | 0 | 旋转角度。 |
+ | centerX | number | 否 | 0 | 变换中心点x轴坐标。 |
+ | centerY | number | 否 | 0 | 变换中心点y轴坐标。 |
- 返回值
- | 类型 | 说明 |
- | -------- | -------- |
- | Object | 增加好旋转效果后的矩阵对象。 |
+ | 类型 | 说明 |
+ | ------ | -------------- |
+ | Object | 增加好旋转效果后的矩阵对象。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
import Matrix4 from '@ohos.matrix4'
@Entry
@Component
@@ -333,21 +338,22 @@ Matrix的坐标点转换函数，可以将当前的变换效果作用到一个
- 参数
- | 参数名 | 类型 | 必填 | 默认值 | 说明 |
- | -------- | -------- | -------- | -------- | -------- |
- | point | Point | 是 | - | 需要转换的坐标点。 |
+ | 参数名 | 类型 | 必填 | 默认值 | 说明 |
+ | ----- | ----- | ---- | ---- | --------- |
+ | point | Point | 是 | - | 需要转换的坐标点。 |
- 返回值
- | 类型 | 说明 |
- | -------- | -------- |
- | Point | 返回矩阵变换后的Point对象。 |
+ | 类型 | 说明 |
+ | ----- | ---------------- |
+ | Point | 返回矩阵变换后的Point对象。 |
- 示例
- ```
+ ```ts
+ // xxx.ets
import Matrix4 from '@ohos.matrix4'
import prompt from '@system.prompt'
-
+
@Entry
@Component
struct Test {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md b/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md
index e09b18331636eae7ba6539ce0373e4bb8f46f1bc..51b6c2df1fafb36c44b1b1e29d61255e25ad6ccf 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md
@@ -155,7 +155,8 @@ setCurrentTime(value: number, seekMode: SeekMode)
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct VideoCreateComponent {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
index 07d48cb35b8d26ed9ed9cb3d16659799e8e25506..b8e2ba963756504cab47d2a637c075fbfd73827b 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
@@ -42,7 +42,8 @@ show(options: { paramObject1})
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ActionSheetExapmle {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
index 8614350db5a9ebf9e4ea8b93b884476d0117a3e3..abebbca7122267f26f3d1ed4d3ab5eb3afa0ad19 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
@@ -41,7 +41,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct AlertDialogExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
index 26a07679a32099d18d50cc43dac30cc14b288256..579c65cb38684c436de61a3d9edcd7e94959660e 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
@@ -13,29 +13,29 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, aut
- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | builder | [CustomDialog](../../ui/ts-component-based-customdialog.md) | 是 | - | 自定义弹窗内容构造器。 |
- | cancel | () => void | 否 | - | 点击遮障层退出时的回调。 |
- | autoCancel | boolean | 否 | true | 是否允许点击遮障层退出。 |
- | alignment | DialogAlignment | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
- | offset | {
dx: Length \| [Resource](../../ui/ts-types.md#resource类型),
dy: Length \| [Resource](../../ui/ts-types.md#resource类型)
} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
- | customStyle | boolean | 否 | false | 弹窗容器样式是否自定义。 |
- | gridCount8+ | number | 否 | - | 弹窗宽度占栅格宽度的个数。 |
-
+ | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+ | ---------------------- | ---------------------------------------- | ---- | ----------------------- | ---------------------- |
+ | builder | [CustomDialog](../../ui/ts-component-based-customdialog.md) | 是 | - | 自定义弹窗内容构造器。 |
+ | cancel | () => void | 否 | - | 点击遮障层退出时的回调。 |
+ | autoCancel | boolean | 否 | true | 是否允许点击遮障层退出。 |
+ | alignment | DialogAlignment | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
+ | offset | {
dx: Length \| [Resource](../../ui/ts-types.md#resource类型),
dy: Length \| [Resource](../../ui/ts-types.md#resource类型)
} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
+ | customStyle | boolean | 否 | false | 弹窗容器样式是否自定义。 |
+ | gridCount8+ | number | 否 | - | 弹窗宽度占栅格宽度的个数。 |
+
- DialogAlignment枚举说明
- | 名称 | 描述 |
- | -------- | -------- |
- | Top | 垂直顶部对齐。 |
- | Center | 垂直居中对齐。 |
- | Bottom | 垂直底部对齐。 |
- | Default | 默认对齐。 |
- | TopStart8+ | 左上对齐。 |
- | TopEnd8+ | 右上对齐。 |
- | CenterStart8+ | 左中对齐。 |
- | CenterEnd8+ | 右中对齐。 |
- | BottomStart8+ | 左下对齐。 |
- | BottomEnd8+ | 右下对齐。 |
+ | 名称 | 描述 |
+ | ------------------------ | ------- |
+ | Top | 垂直顶部对齐。 |
+ | Center | 垂直居中对齐。 |
+ | Bottom | 垂直底部对齐。 |
+ | Default | 默认对齐。 |
+ | TopStart8+ | 左上对齐。 |
+ | TopEnd8+ | 右上对齐。 |
+ | CenterStart8+ | 左中对齐。 |
+ | CenterEnd8+ | 右中对齐。 |
+ | BottomStart8+ | 左下对齐。 |
+ | BottomEnd8+ | 右下对齐。 |
## CustomDialogController
@@ -62,7 +62,8 @@ close(): void
## 示例
-```
+```ts
+// xxx.ets
@CustomDialog
struct CustomDialogExample {
controller: CustomDialogController
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
index 10a9a68cda53c73b82ce1dac80ad4044c7acaaf9..f5fc7a22b1cd1f32003a076ae136b9a5d3b5d2a9 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
@@ -29,7 +29,8 @@ show(options?: DatePickerDialogOptions)
## 示例
### 日期滑动选择器（显示农历）示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct DatePickerDialogExample01 {
@@ -62,7 +63,8 @@ struct DatePickerDialogExample01 {
}
```
### 日期滑动选择器（不显示农历）示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct DatePickerDialogExample02 {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md
index df97249f6d38576b79f604df4aab7d277c7118f9..a0c9cd7256dd7a4c390535ebc56fed273227eabb 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md
@@ -10,8 +10,9 @@ close(): void
可以通过该方法在页面范围内关闭通过[bindContextMenu](./ts-universal-attributes-menu.md#属性)给组件绑定的菜单。
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct Index {
@Builder MenuBuilder(){
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
index b9c0e9cd7a1a410f2509f6ceb719820272d1c90f..e1721bc9f83cd9a035ac3bc98298bf53702c186f 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
@@ -33,7 +33,8 @@ show(options: TextPickerDialogOptions)
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct TextPickerDialogExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
index 073e84113a50767dab0a84a294b0ceb45e4faa91..afe90ef85aa9da72cb93a4365bfbdd2efa96d180 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
@@ -27,7 +27,8 @@ show(options?: TimePickerDialogOptions)
## 示例
### 时间滑动选择器（24小时制）示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct TimePickerDialogExample01 {
@@ -55,7 +56,8 @@ struct TimePickerDialogExample01 {
}
```
### 时间滑动选择器（12小时制）示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct TimePickerDialogExample02 {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md
index 82a6b6a35aa076ddd43098bb09048e7405871ec0..974abbe40eba9207be27823f97e04c8d8cea1e5a 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md
@@ -16,7 +16,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct MotionPathExample {
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 bc55f27ba3246e1b452d1924c4498373c31db6fc..8b60506c2b84bcc2f5679494e397b355a8786e66 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
@@ -48,7 +48,8 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
### fillStyle
-```
+```ts
+// xxx.ets
@Entry
@Component
struct FillStyleExample {
@@ -80,7 +81,8 @@ struct FillStyleExample {
### lineWidth
-```
+```ts
+// xxx.ets
@Entry
@Component
struct LineWidthExample {
@@ -112,7 +114,8 @@ struct LineWidthExample {
### strokeStyle
-```
+```ts
+// xxx.ets
@Entry
@Component
struct StrokeStyleExample {
@@ -146,7 +149,8 @@ struct StrokeStyleExample {
### lineCap
-```
+```ts
+// xxx.ets
@Entry
@Component
struct LineCapExample {
@@ -182,7 +186,8 @@ struct LineCapExample {
### lineJoin
-```
+```ts
+// xxx.ets
@Entry
@Component
struct LineJoinExample {
@@ -219,7 +224,8 @@ struct LineJoinExample {
### miterLimit
-```
+```ts
+// xxx.ets
@Entry
@Component
struct MiterLimit {
@@ -256,7 +262,8 @@ struct MiterLimit {
### font
-```
+```ts
+// xxx.ets
@Entry
@Component
struct Font {
@@ -288,7 +295,8 @@ struct Font {
### textAlign
-```
+```ts
+// xxx.ets
@Entry
@Component
struct CanvasExample {
@@ -335,7 +343,8 @@ struct CanvasExample {
### textBaseline
-```
+```ts
+// xxx.ets
@Entry
@Component
struct TextBaseline {
@@ -382,7 +391,8 @@ struct TextBaseline {
### globalAlpha
-```
+```ts
+// xxx.ets
@Entry
@Component
struct GlobalAlpha {
@@ -417,7 +427,8 @@ struct GlobalAlpha {
### lineDashOffset
-```
+```ts
+// xxx.ets
@Entry
@Component
struct LineDashOffset {
@@ -464,7 +475,8 @@ struct LineDashOffset {
| copy | 显示新绘制内容而忽略现有绘制内容。 |
| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
-```
+```ts
+// xxx.ets
@Entry
@Component
struct GlobalCompositeOperation {
@@ -504,7 +516,8 @@ struct GlobalCompositeOperation {
### shadowBlur
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ShadowBlur {
@@ -538,7 +551,8 @@ struct ShadowBlur {
### shadowColor
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ShadowColor {
@@ -573,7 +587,8 @@ struct ShadowColor {
### shadowOffsetX
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ShadowOffsetX {
@@ -608,7 +623,8 @@ struct ShadowOffsetX {
### shadowOffsetY
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ShadowOffsetY {
@@ -643,7 +659,8 @@ struct ShadowOffsetY {
### imageSmoothingEnabled
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ImageSmoothingEnabled {
@@ -692,8 +709,9 @@ fillRect(x: number, y: number, w: number, h: number): void
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct FillRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -736,8 +754,9 @@ strokeRect(x: number, y: number, w: number, h: number): void
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -779,8 +798,9 @@ clearRect(x: number, y: number, w: number, h: number): void
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -823,8 +843,9 @@ fillText(text: string, x: number, y: number): void
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -866,8 +887,9 @@ strokeText(text: string, x: number, y: number): void
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -917,8 +939,9 @@ measureText(text: string): TextMetrics
| width | number | 字符串的宽度。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -959,8 +982,9 @@ stroke(path?: Path2D): void
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct Stroke {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -997,8 +1021,9 @@ beginPath(): void
创建一个新的绘制路径。
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct BeginPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1043,8 +1068,9 @@ moveTo(x: number, y: number): void
| y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1087,8 +1113,9 @@ lineTo(x: number, y: number): void
| y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1125,8 +1152,9 @@ closePath(): void
结束当前路径形成一个封闭路径。
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1171,8 +1199,9 @@ createPattern(image: ImageBitmap, repetition: string): CanvasPattern
| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct CreatePattern {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1219,8 +1248,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1265,8 +1295,9 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1313,8 +1344,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1359,8 +1391,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1409,8 +1442,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1454,8 +1488,9 @@ rect(x: number, y: number, width: number, height: number): void
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1490,8 +1525,9 @@ fill(): void
对封闭路径进行填充。
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct Fill {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1526,8 +1562,9 @@ clip(): void
设置当前路径为剪切路径。
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1570,8 +1607,9 @@ rotate(rotate: number): void
| rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct Rotate {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1612,8 +1650,9 @@ scale(x: number, y: number): void
| y | number | 是 | 0 | 设置垂直方向的缩放值。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct Scale {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1666,8 +1705,9 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
| translateY | number | 是 | 0 | 指定垂直移动值。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct Transform {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1718,8 +1758,9 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
| translateY | number | 是 | 0 | 指定垂直移动值。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct SetTransform {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1763,8 +1804,9 @@ translate(x: number, y: number): void
| y | number | 是 | 0 | 设置竖直平移量。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1818,8 +1860,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct Index {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1917,8 +1960,9 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct PutImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1959,8 +2003,9 @@ restore(): void
对保存的绘图上下文进行恢复。
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1992,8 +2037,9 @@ save(): void
对当前的绘图上下文进行保存。
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -2033,8 +2079,9 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
| y1 | number | 是 | 0 | 终点的y轴坐标。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct CreateLinearGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -2084,8 +2131,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
- 示例
- ```
- @Entry
+ ```ts
+// xxx.ets
+@Entry
@Component
struct CreateRadialGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
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 a93b489369d1c21e595cc27960b2ae6caf5da3d1..729fe48e405cd00b13e72a5cd3abdba14be9f4ad 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
@@ -7,63 +7,63 @@
页面转场通过在全局pageTransition方法内配置页面入场组件和页面退场组件来自定义页面转场动效。
-| 名称 | 参数 | 参数描述 |
-| -------- | -------- | -------- |
+| 名称 | 参数 | 参数描述 |
+| ------------------- | ------ | ------------------------------- |
| PageTransitionEnter | Object | 页面入场组件，用于自定义当前页面的入场效果，详见动效参数说明。 |
-| PageTransitionExit | Object | 页面退场组件，用于自定义当前页面的退场效果，详见动效参数说明。 |
+| PageTransitionExit | Object | 页面退场组件，用于自定义当前页面的退场效果，详见动效参数说明。 |
- 动效参数说明
- | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | type | RouteType | - | 否 | 不配置时表明pop为push时效果的逆播。 |
- | duration | number | 1000 | 否 | 动画时长，单位为毫秒。 |
- | curve | Curve \| Curves | Linear | 否 | 动画曲线，有效值参见[Curve](ts-animatorproperty.md) 说明。 |
- | delay | number | 0 | 否 | 动画延迟时长，单位为毫秒，默认不延时播放。 |
+ | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
+ | -------- | ------------------------- | ------ | ---- | ---------------------------------------- |
+ | type | RouteType | - | 否 | 不配置时表明pop为push时效果的逆播。 |
+ | duration | number | 1000 | 否 | 动画时长，单位为毫秒。 |
+ | curve | Curve \| Curves | Linear | 否 | 动画曲线，有效值参见[Curve](ts-animatorproperty.md) 说明。 |
+ | delay | number | 0 | 否 | 动画延迟时长，单位为毫秒，默认不延时播放。 |
- RouteType枚举说明
- | 名称 | 描述 |
- | -------- | -------- |
- | Pop | PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。 |
- | Push | PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。 |
+ | 名称 | 描述 |
+ | ---- | ---------------------------------------- |
+ | Pop | PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。 |
+ | Push | PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。 |
## 属性
PageTransitionEnter和PageTransitionExit组件支持的属性：
-| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| slide | SlideEffect | SlideEffect.Right | 否 | 设置转场的滑入效果，有效值参见SlideEffect枚举说明。 |
-| translate | {
x? : number,
y? : number,
z? : number
} | - | 否 | 设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。 |
-| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number,
centerY? : number
} | - | 否 | 设置页面转场时的缩放效果，为入场时起点和退场时终点的值。 |
-| opacity | number | 1 | 否 | 设置入场的起点透明度值或者退场的终点透明度值。 |
+| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
+| --------- | ---------------------------------------- | ----------------- | ---- | ---------------------------------------- |
+| slide | SlideEffect | SlideEffect.Right | 否 | 设置转场的滑入效果，有效值参见SlideEffect枚举说明。 |
+| translate | {
x? : number,
y? : number,
z? : number
} | - | 否 | 设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。 |
+| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number,
centerY? : number
} | - | 否 | 设置页面转场时的缩放效果，为入场时起点和退场时终点的值。 |
+| opacity | number | 1 | 否 | 设置入场的起点透明度值或者退场的终点透明度值。 |
- SlideEffect枚举说明
- | 名称 | 描述 |
- | -------- | -------- |
- | Left | 设置到入场时表示从左边滑入，出场时表示滑出到左边。 |
- | Right | 设置到入场时表示从右边滑入，出场时表示滑出到右边。 |
- | Top | 设置到入场时表示从上边滑入，出场时表示滑出到上边。 |
- | Bottom | 设置到入场时表示从下边滑入，出场时表示滑出到下边。 |
+ | 名称 | 描述 |
+ | ------ | ------------------------- |
+ | Left | 设置到入场时表示从左边滑入，出场时表示滑出到左边。 |
+ | Right | 设置到入场时表示从右边滑入，出场时表示滑出到右边。 |
+ | Top | 设置到入场时表示从上边滑入，出场时表示滑出到上边。 |
+ | Bottom | 设置到入场时表示从下边滑入，出场时表示滑出到下边。 |
## 事件
PageTransitionEnter和PageTransitionExit组件支持的事件：
-| 事件 | 功能描述 |
-| -------- | -------- |
-| onEnter(type: RouteType, progress: number) => void | 回调入参为当前入场动画的归一化进度[0 - 1]。 |
-| onExit(type: RouteType, progress: number) => void | 回调入参为当前退场动画的归一化进度[0 - 1]。 |
+| 事件 | 功能描述 |
+| ---------------------------------------- | ----------------------------------- |
+| onEnter(type: RouteType, progress: number) => void | 回调入参为当前入场动画的归一化进度[0 - 1]。 |
+| onExit(type: RouteType, progress: number) => void | 回调入参为当前退场动画的归一化进度[0 - 1]。 |
## 示例
自定义方式1：配置了当前页面的入场动画为淡入，退场动画为缩小。
-```
+```ts
// index.ets
@Entry
@Component
@@ -97,7 +97,7 @@ struct PageTransitionExample1 {
}
```
-```
+```ts
// page1.ets
@Entry
@Component
@@ -132,7 +132,7 @@ struct AExample {
自定义方式2：配置了当前页面的入场动画为从左侧滑入，退场为缩小加透明度变化。
-```
+```ts
// index.ets
@Entry
@Component
@@ -163,7 +163,7 @@ struct PageTransitionExample {
}
```
-```
+```ts
// page1.ets
@Entry
@Component
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md
index cf0b35935cccc4d96d4b21a723664ba2e2b5ddd7..3a274eb3fe7bad4d816dd9ab187e1ed83a0048bb 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md
@@ -34,7 +34,8 @@
示例功能通过一个Button控制第二个Button的出现和消失，并通过transition配置第二个Button出现和消失的过场动画。
-```
+```ts
+// xxx.ets
@Entry
@Component
struct TransitionExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
index 3f7e939867de5b2f38f9b3d21b0405d780262915..e714d382f0a79cc3509ccddafb03819a85087193 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md
@@ -9,23 +9,24 @@
## 属性
-| 名称 | 参数 | 默认值 | 参数描述 |
-| -------- | -------- | -------- | -------- |
-| sharedTransition | id: string,
options?: Object | - | 两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。 |
+| 名称 | 参数 | 默认值 | 参数描述 |
+| ---------------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| sharedTransition | id: string,
options?: Object | - | 两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。 |
- options参数说明
- | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | duration | number | 1000 | 否 | 单位为毫秒，默认动画时长为1000毫秒。 |
- | curve | Curve \| Curves | Linear | 否 | 默认曲线为线性，有效值参见Curve说明。 |
- | delay | number | 0 | 否 | 单位为毫秒，默认不延时播放。 |
+ | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
+ | -------- | ------------------------- | ------ | ---- | --------------------- |
+ | duration | number | 1000 | 否 | 单位为毫秒，默认动画时长为1000毫秒。 |
+ | curve | Curve \| Curves | Linear | 否 | 默认曲线为线性，有效值参见Curve说明。 |
+ | delay | number | 0 | 否 | 单位为毫秒，默认不延时播放。 |
## 示例
示例功能为两个页面，共享元素转场页面图片点击后转场至页面B的图片。
-```
+```ts
+// xxx.ets
@Entry
@Component
struct SharedTransitionExample {
@@ -53,8 +54,8 @@ struct SharedTransitionExample {
}
```
-```
-// PageB
+```ts
+// PageB.ets
@Entry
@Component
struct BExample {
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 12b9c249fc0b3488240d5dcac36766867b0daa96..79f6dc1f5b1ba863c78c103ef4ce12b71319c820 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
@@ -33,7 +33,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct BackgroundExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
index add589fa8e92a1946bfbbb4d232e8bc1226a5970..3a10985a84f0c2749ba184ed3f94a539e5ef107f 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
@@ -34,7 +34,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct BorderExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
index 2f62426bd2ff18c88ae86ba0ab58eeddd93fd99d..d1721df37626ac43cc948b265d9153b4665f1724 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
@@ -19,7 +19,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct TouchAbleExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
index 530ccd6226f58f4e7f90b8773e281875e43de16d..777ffd6f4a8654117537681271dbf5f6b6b12333 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
@@ -57,7 +57,8 @@ sendEventByKey(id: string, action: number, params: string): boolean
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct IdExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
index b3939fe73d40d7bdc9aa1616497cd14829ef412d..0e2b0548523473f9a0bcbd4287d5346e7dbf8ac3 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
@@ -19,7 +19,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct EnabledExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
index ae6ce5b46ecfba98a33c852e996d3050552454aa..a982531bd0b6ee60cc2708868dedcf22795484b2 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
@@ -24,7 +24,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct FlexExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
index e6ed56978e3cbcb1fe41101ece127d0f09b40cce..0ff5a7f4f96788ecd4e1dac2f10958550a737095 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
@@ -21,7 +21,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct FocusableExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
index 8dfcbfc08201b7f2a9550f457d7754f9004db715..692d645a0dfbf2635bb0552f76ec07d777a4d5f6 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
@@ -37,7 +37,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ColorGradientExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
index 6237d39f4e76c11657955fea6fb7fe6e6f136aa5..d544845f80baac6e77733c25b5609f6b48069295 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
@@ -23,7 +23,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct GridContainerExample1 {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
index 796b92a921c929133d6c1f9adec13f2b0f78dcce..d5e10f79646ac2a39c9a3e6a275393b240419215 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md
@@ -26,7 +26,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct HoverExample {
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 b5e5b77b9bca685eb40200d781a905275614ba25..4aa1b58b820e18074d8447ae38dfba414b91d3ed 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
@@ -29,7 +29,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ImageEffectsExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
index 7f267aac3beda6f6a373fb0183922e512f3657c8..7ce14aa91346b7b756cbd1d340c4339c661c3b72 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
@@ -20,7 +20,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct AspectRatioExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
index ac65f17a241863ab26b65f9c4a0c217e38d5826f..33dc5251ceec2245330fac8b73c82546af78d974 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
@@ -31,7 +31,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct PositionExample {
@@ -64,7 +65,8 @@ struct PositionExample {
-```
+```ts
+// xxx.ets
@Entry
@Component
struct PositionExample2 {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
index 71c1273bb276dca02d9708a0bbd85601c98f1a31..1bdc9500fa73dc77fd8c217936b7bd81310d5c87 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
@@ -12,29 +12,30 @@
## 属性
-| 名称 | 参数类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| bindMenu | Array8+ | - | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
-| bindContextMenu8+ | content: [CustomBuilder](../../ui/ts-types.md)
responseType: ResponseType | - | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 |
+| 名称 | 参数类型 | 默认值 | 描述 |
+| ---------------------------- | ---------------------------------------- | ---- | ---------------------------------- |
+| bindMenu | Array8+ | - | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
+| bindContextMenu8+ | content: [CustomBuilder](../../ui/ts-types.md)
responseType: ResponseType | - | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 |
- MenuItem
- | 名称 | 类型 | 描述 |
- | -------- | -------- | -------- |
- | value | string | 菜单项文本。 |
+ | 名称 | 类型 | 描述 |
+ | ------ | ----------------------- | ----------- |
+ | value | string | 菜单项文本。 |
| action | () => void | 点击菜单项的事件回调。 |
- ResponseType8+
- | 参数值 | 描述 |
- | -------- | -------- |
- | LongPress | 通过长按触发菜单弹出。 |
+ | 参数值 | 描述 |
+ | ---------- | ------------- |
+ | LongPress | 通过长按触发菜单弹出。 |
| RightClick | 通过鼠标右键触发菜单弹出。 |
## 示例
#### 普通菜单
-```
+```ts
+// xxx.ets
@Entry
@Component
struct MenuExample {
@@ -66,7 +67,8 @@ struct MenuExample {
#### 自定义内容菜单
-```
+```ts
+// xxx.ets
import router from '@system.router';
@Entry
@@ -116,7 +118,8 @@ struct MenuExample {
#### 菜单(右键触发显示)
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ContextMenuExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
index bba65d744a27c56232b24f55b1fb46b29709d666..f522ae6583b76a5d8a1e675e153c79ee1410af74 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
@@ -22,7 +22,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct OpacityExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
index 45b00a1bdafd5018100d506adf76cf217180106f..d1848f4500a92cd904e17badeec72e6190cab39b 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
@@ -19,7 +19,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct OverlayExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
index 02941dc6bccbf1e0c8429e1aa69b0a22f2d30d43..66c1ebf0b84aa4bf6a296b182a49251830d052d2 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
@@ -28,7 +28,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct StyleExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
index 69d70e9c745cdc6ce553309a311376efdc601e9a..d04945feeb82f2a1b2ca439a0396d7349465376e 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
@@ -52,7 +52,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct PopupExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
index 3cf21fa6c0375a06dfff3802f382298ec0738bb0..ab3da965550fc0f3df687d9eaf73a79358609cbb 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
@@ -20,7 +20,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ClipAndMaskExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
index cb6e258fb771a93e1ea13c04f5f70c55ae477ac7..b2cb7abba7a68a019ccf21dad1a89a0c943db245 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
@@ -25,7 +25,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct SizeExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
index 920f40215e0a787c69bfad314c5d21d9989af9c0..28e1c501dfe5d3243d4b21fbee8c5f954f9d945d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
@@ -44,7 +44,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct TextStyleExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
index 2af9b5be1fb516d1c58c40c7f4e949a6f9b0a6a7..119294e603659f786c5f05a3b4d190761ffd4805 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
@@ -34,7 +34,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ResponseRegionExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
index 78e95635f49d05622b97de4dc09816b34a24711a..9c14d37e74e4d8b7ce6209abc561f2686c8cd67b 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
@@ -12,17 +12,18 @@
## 属性
-| 名称 | 参数类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| rotate | {
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: Length,
centerY?: Length
} | {
x: 0,
y: 0,
z: 0,
angle: 0,
centerX: '50%',
centerY: '50%'
} | (x, y, z)指定一个矢量，表示旋转轴，正角度为顺时针转动，负角度为逆时针转动，默认值为0，同时可以通过centerX和centerY设置旋转的中心点。 |
-| translate | {
x?: Length,
y?: Length,
z? : Length
} | {
x: 0,
y: 0,
z: 0
} | 可以分别设置X轴、Y轴、Z轴的平移距离，距离的正负控制平移的方向，默认值为0。 |
-| scale | {
x?: number,
y?: number,
z?: number,
centerX?: Length,
centerY?: Length
} | {
x: 1,
y: 1,
z: 1,
centerX:'50%',
centerY:'50%'
} | 可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。 |
-| transform | matrix: Matrix4 | - | 设置当前组件的变换矩阵。 |
+| 名称 | 参数类型 | 默认值 | 描述 |
+| --------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| rotate | {
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: Length,
centerY?: Length
} | {
x: 0,
y: 0,
z: 0,
angle: 0,
centerX: '50%',
centerY: '50%'
} | (x, y, z)指定一个矢量，表示旋转轴，正角度为顺时针转动，负角度为逆时针转动，默认值为0，同时可以通过centerX和centerY设置旋转的中心点。 |
+| translate | {
x?: Length,
y?: Length,
z? : Length
} | {
x: 0,
y: 0,
z: 0
} | 可以分别设置X轴、Y轴、Z轴的平移距离，距离的正负控制平移的方向，默认值为0。 |
+| scale | {
x?: number,
y?: number,
z?: number,
centerX?: Length,
centerY?: Length
} | {
x: 1,
y: 1,
z: 1,
centerX:'50%',
centerY:'50%'
} | 可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。 |
+| transform | matrix: Matrix4 | - | 设置当前组件的变换矩阵。 |
## 示例
-```
+```ts
+// xxx.ets
import Matrix4 from '@ohos.matrix4'
@Entry
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
index 81aee8bf9c665433b40692aec2413d21ef307fbb..c4a64cae233d14a1568d45e137555aff0fcd8336 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
@@ -27,7 +27,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct VisibilityExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
index 44b12c4482f71352de12022b04dd858f577a641f..0e08e5d2f33619ab52927eac9e189c7ee9548cbd 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
@@ -19,7 +19,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ZIndexExample {
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 101fddafada5973ec65c10bf8c43e8ea43cfb3a3..ad60e9afdc32ee30c37ee9dbb2d80e818e4eab04 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
@@ -18,7 +18,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct AreaExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
index c5da38006bd13fbe276f5b07436c91cf57320611..6139225a6761d6c5e2050c28694b0adba280a151 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
@@ -47,7 +47,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ClickExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
index 988437562c8fc9ac11f0fcfd3edc61a0fa5d5954..73ba24d2d4e2121cdf80410c6238497bb1e82771 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
@@ -31,7 +31,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct DragExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
index 6c310bc063b24a73dc1d8fae1f6d596b2a1ae049..b58d261bf9e1c82cf36aa52c374493ae9475f676 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
@@ -62,7 +62,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct KeyEventExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
index 417b6c0611f7827d2b71a95c31ee4df25f71d4e2..783eae66cf8ef2a4fbe89820e41731d1d3786267 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
@@ -11,15 +11,16 @@
## 事件
-| 名称 | 支持冒泡 | 功能描述 |
-| -------- | -------- | -------- |
-| onAppear(callback: () => void) | 否 | 组件挂载显示时触发此回调。 |
-| onDisappear(callback: () => void) | 否 | 组件卸载消失时触发此回调。 |
+| 名称 | 支持冒泡 | 功能描述 |
+| ---------------------------------------- | ---- | ------------- |
+| onAppear(callback: () => void) | 否 | 组件挂载显示时触发此回调。 |
+| onDisappear(callback: () => void) | 否 | 组件卸载消失时触发此回调。 |
## 示例
-```
+```ts
+// xxx.ets
import prompt from '@system.prompt'
@Entry
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
index 3aa7ea59de2419093c0c27545d8c8b1e044eb3ba..a78e3cd633f3e2531729f1818652b1612ea8b39d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
@@ -11,52 +11,53 @@
## 事件
-| 名称 | 是否冒泡 | 功能描述 |
-| -------- | -------- | -------- |
-| onTouch(callback: (event?: TouchEvent) => void) | 是 | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。
+| 名称 | 是否冒泡 | 功能描述 |
+| ---------------------------------------- | ---- | ---------------------------------------- |
+| onTouch(callback: (event?: TouchEvent) => void) | 是 | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。 |
### TouchEvent对象说明
- 属性
- | 属性名称 | 类型 | 描述 |
- | -------- | -------- | -------- |
- | type | TouchType | 触摸事件的类型。 |
- | touches | ArrayTouchObject> | 全部手指信息。 |
- | changedTouches | ArrayTouchObject> | 当前发生变化的手指信息。 |
- | timestamp | number | 事件时间戳。 |
- | target8+ | [EventTarget](ts-universal-events-click.md)| 被触摸元素对象。 |
+ | 属性名称 | 类型 | 描述 |
+ | ------------------- | ---------------------------------------- | ------------ |
+ | type | TouchType | 触摸事件的类型。 |
+ | touches | ArrayTouchObject> | 全部手指信息。 |
+ | changedTouches | ArrayTouchObject> | 当前发生变化的手指信息。 |
+ | timestamp | number | 事件时间戳。 |
+ | target8+ | [EventTarget](ts-universal-events-click.md) | 被触摸元素对象。 |
- 接口
- | 接口名称 | 功能描述 |
- | -------- | -------- |
- | stopPropagation()：void | 阻塞事件冒泡。 |
+ | 接口名称 | 功能描述 |
+ | ---------------------- | ------- |
+ | stopPropagation()：void | 阻塞事件冒泡。 |
- TouchObject对象说明
- | 属性名称 | 类型 | 描述 |
- | -------- | -------- | -------- |
- | type | TouchType | 触摸事件的类型。 |
- | id | number | 手指唯一标识符。 |
- | screenX | number | 触摸点相对于设备屏幕左边沿的X坐标。 |
- | screenY | number | 触摸点相对于设备屏幕上边沿的Y坐标。 |
- | x | number | 触摸点相对于被触摸元素左边沿的X坐标。 |
- | y | number | 触摸点相对于被触摸元素上边沿的Y坐标。 |
+ | 属性名称 | 类型 | 描述 |
+ | ------- | --------- | ------------------- |
+ | type | TouchType | 触摸事件的类型。 |
+ | id | number | 手指唯一标识符。 |
+ | screenX | number | 触摸点相对于设备屏幕左边沿的X坐标。 |
+ | screenY | number | 触摸点相对于设备屏幕上边沿的Y坐标。 |
+ | x | number | 触摸点相对于被触摸元素左边沿的X坐标。 |
+ | y | number | 触摸点相对于被触摸元素上边沿的Y坐标。 |
- TouchType枚举说明
- | 名称 | 描述 |
- | -------- | -------- |
- | Down | 手指按下时触发。 |
- | Up | 手指抬起时触发。 |
- | Move | 手指按压态在屏幕上移动时触发。 |
- | Cancel | 触摸事件取消时触发。 |
+ | 名称 | 描述 |
+ | ------ | --------------- |
+ | Down | 手指按下时触发。 |
+ | Up | 手指抬起时触发。 |
+ | Move | 手指按压态在屏幕上移动时触发。 |
+ | Cancel | 触摸事件取消时触发。 |
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct TouchExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md
index b816e134e544ffbc07b91d9946fb74ec0527e2d4..695d4d517a0d8cafbf78dd6066e0552a701a3ae4 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md
@@ -22,7 +22,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct FocusEventExample {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
index 61fd6b4dd9ea40f60dd470fd4387f019fe943f2b..ac24475042fe4f109c1cd98dae80395f62974325 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
@@ -49,7 +49,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct MouseEventExample {