diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0001.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0001.gif new file mode 100644 index 0000000000000000000000000000000000000000..fc737da287358cd81c65567e17da1bd4d701edff Binary files /dev/null and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0001.gif differ diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0002.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0002.gif new file mode 100644 index 0000000000000000000000000000000000000000..9e3ff82c3de3a8867949b0d65aa4ffe55360e7cb Binary files /dev/null and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0002.gif differ diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0004.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0004.gif new file mode 100644 index 0000000000000000000000000000000000000000..3b8462cf93c07e4b92c250bcb46409cc81e5129f Binary files /dev/null and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0004.gif differ diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0005.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0005.gif new file mode 100644 index 0000000000000000000000000000000000000000..2bb6aa6c2a2086f16ae6149e9d3e4b2340d6fe37 Binary files /dev/null and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0005.gif differ diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0006.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0006.gif new file mode 100644 index 0000000000000000000000000000000000000000..2bb6aa6c2a2086f16ae6149e9d3e4b2340d6fe37 Binary files /dev/null and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0006.gif differ diff --git a/zh-cn/application-dev/reference/apis/js-apis-prompt.md b/zh-cn/application-dev/reference/apis/js-apis-prompt.md index a0fbe254c019fadee070f0eec5657ef79bd595b3..872e601e2b800b462600df2612d5a4060055a459 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-prompt.md +++ b/zh-cn/application-dev/reference/apis/js-apis-prompt.md @@ -32,6 +32,8 @@ prompt.showToast({ duration: 2000, }); ``` + ![zh-cn_image_0001](figures/zh-cn_image_0001.gif) + ## ShowToastOptions 文本提示框的选项。 @@ -88,6 +90,8 @@ prompt.showDialog({ }) ``` + ![zh-cn_image_0002](figures/zh-cn_image_0002.gif) + ## prompt.showDialog showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSuccessResponse>):void @@ -127,6 +131,8 @@ prompt.showDialog({ }); ``` + ![zh-cn_image_0004](figures/zh-cn_image_0004.gif) + ## ShowDialogOptions 对话框的选项。 @@ -188,6 +194,8 @@ prompt.showActionMenu({ }) ``` + ![zh-cn_image_0005](figures/zh-cn_image_0005.gif) + ## prompt.showActionMenu showActionMenu(options: ActionMenuOptions): Promise<ActionMenuSuccessResponse> @@ -228,6 +236,8 @@ prompt.showActionMenu({ console.info('showActionMenu error: ' + err); }) ``` + ![zh-cn_image_0006](figures/zh-cn_image_0006.gif) + ## ActionMenuOptions 操作菜单的选项。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md index 9e443a8bcf848efe396b10fcdb535aa88efe45be..7074755e95339db7f1e21f9834f26dd8f738b63e 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md @@ -1,10 +1,10 @@ # piece +一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。 + > **说明：** > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。 - ## 子组件 @@ -15,11 +15,11 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | ------- | ----- | ---- | ---------------------------------------- | -| content | string | - | 是 | 操作块文本内容。 | -| closable | boolean | false | 否 | 设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。 | -| icon | string | - | 否 | 操作块删除图标的url，支持本地路径。 | +| 名称 | 类型 | 必填 | 描述 | +| -------- | ------- | ---- | ------------------------------------------------------------ | +| content | string | 是 | 操作块文本内容。 | +| closable | boolean | 否 | 设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。
默认值：false | +| icon | string | 否 | 操作块删除图标的url，支持本地路径。 | ## 样式 diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952377.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952377.png index 5da42e3e14d601745274cb62d914c6600620bb25..eb03ebe25132eb551b633d052cdfc984eda432ee 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952377.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952377.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md index aa9037ff771aff36d33a0f710f287b314346924d..41aa680039975684244290c58df308608ce27104 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -34,9 +34,9 @@ Image(src: string | PixelMap | Resource) **参数：** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | -| src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](../../ui/ts-types.md#resource类型) | 是 | - | 图片的数据源，支持本地图片和网络图片。
当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。
\- 支持的图片格式包括png、jpg、bmp、svg和gif。
\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。
\- 支持`dataability://`路径前缀的字符串，用于访问通过data ability提供的图片路径。 | +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ------ | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ | +| src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](../../ui/ts-types.md#resource类型) | 是 | - | 图片的数据源，支持本地图片和网络图片。
当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。
\- 支持的图片格式包括png、jpg、bmp、svg和gif。
\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。
\- 支持`dataability://`路径前缀的字符串，用于访问通过data ability提供的图片路径。
\- 支持file:///data/storage路径前缀的字符串，用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。 | ## 属性 @@ -356,3 +356,53 @@ struct ImageExample3 { ``` ![zh-cn_image_0000001205972610](figures/zh-cn_image_0000001205972610.gif) + +### 渲染沙箱路径图片 + +``` +import fileio from '@ohos.fileio'; +import image from '@ohos.multimedia.image'; + +const EMPTY_PATH = 'file://'; + +@Entry +@Component +struct LoadImageExample { + @State fileContent: string = ''; + @State path: string = EMPTY_PATH; + @State accountInfoHeadPic: any = ''; + + build() { + Column() { + Button('读取沙箱图片') + .margin({ bottom: 10 }) + .onClick(() => { + try { + this.path = EMPTY_PATH; + let context = getContext(this); + let path = context.getApplicationContext().filesDir + '/icon.png'; + console.log(`读取沙箱图片=========>${path}`); + let fd = fileio.openSync(path, 0o100, 0o666); + console.log(`create file========>${fd}`); + let srcPath = context.bundleCodeDir + '/entry/resource/base/media/icon.png'; + fileio.copyFileSync(srcPath, path); + console.log(`error:=============>${e.message}`); + } + }) + Button('读取资源图片') + .margin({ bottom: 10 }) + .onClick(() => { + this.path = EMPTY_PATH; + this.path += getContext(this.bundleCodeDir + '/entry/resource/base/media/icon.png'); + }) + Text(`图片路径:${this.path}`) + .fontSize(20) + .margin({ bottom: 10 }) + Image(this.path) + .width(100) + .height(100) + } + .width('100%').height('100%') + } +} +``` \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md index 28c6ba13e0f2bd0cc47958f0ed8b267cb1517f6e..e33b8e8ee57d398b754dc1dbea31749ad4a27b27 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md @@ -59,7 +59,7 @@ Slider(options:{value?: number, min?: number, max?: number, step?: number, style | 名称 | 功能描述 | | -------- | -------- | -| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Slider滑动时触发事件回调。
value：当前进度值。
mode：拖动状态。 | +| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Slider滑动时触发事件回调。
value：当前进度值。若返回值有小数，可使用Math.toFixed()将数据处理为想要的精度。
mode：拖动状态。 | - SliderChangeMode枚举说明 | 名称 | 值 | 描述 | 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 152ff182e77fc382f99a785de5ad2aa95194deb9..074b2450dde46c07c121d9c1c4411eab22a85267 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -13,9 +13,9 @@ CanvasRenderingContext2D(setting: RenderingContextSetting) **参数：** - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | - | setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 | +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | +| setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 | ### RenderingContextSettings @@ -26,9 +26,9 @@ RenderingContextSettings(antialias?: boolean) **参数：** - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | --------- | ------- | ---- | ----- | ---------------- | - | antialias | boolean | 否 | false | 表明canvas是否开启抗锯齿。 | +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| --------- | ------- | ---- | ----- | ---------------- | +| antialias | boolean | 否 | false | 表明canvas是否开启抗锯齿。 | ## 属性 @@ -662,12 +662,12 @@ 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 | 指定矩形的高度。 | **示例：** @@ -706,12 +706,12 @@ strokeRect(x: number, y: number, w: number, h: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ------ | ------ | ---- | ---- | ------------ | - | x | number | 是 | 0 | 指定矩形的左上角x坐标。 | - | y | number | 是 | 0 | 指定矩形的左上角y坐标。 | - | w | number | 是 | 0 | 指定矩形的宽度。 | - | h | number | 是 | 0 | 指定矩形的高度。 | +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ------ | ------ | ---- | ---- | ------------ | +| x | number | 是 | 0 | 指定矩形的左上角x坐标。 | +| y | number | 是 | 0 | 指定矩形的左上角y坐标。 | +| w | number | 是 | 0 | 指定矩形的宽度。 | +| h | number | 是 | 0 | 指定矩形的高度。 | **示例：** @@ -750,12 +750,12 @@ clearRect(x: number, y: number, w: number, h: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | - | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | - | w | number | 是 | 0 | 指定矩形的宽度。 | - | h | number | 是 | 0 | 指定矩形的高度。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------ | ------ | ---- | ---- | ------------- | +| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | +| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | +| w | number | 是 | 0 | 指定矩形的宽度。 | +| h | number | 是 | 0 | 指定矩形的高度。 | **示例：** @@ -772,7 +772,7 @@ clearRect(x: number, y: number, w: number, h: number): void Canvas(this.context) .width('100%') .height('100%') - .backgroundColor('#ffff00') + .backgroundColor('#ffffff') .onReady(() =>{ this.context.fillStyle = 'rgb(0,0,255)' this.context.fillRect(0,0,500,500) @@ -796,12 +796,12 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ---- | ------ | ---- | ---- | --------------- | - | text | string | 是 | “” | 需要绘制的文本内容。 | - | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | - | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | - | maxWidth | number | 否 | - | 指定文本允许的最大宽度。 | +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ---- | ------ | ---- | ---- | --------------- | +| text | string | 是 | “” | 需要绘制的文本内容。 | +| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | +| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | +| maxWidth | number | 否 | - | 指定文本允许的最大宽度。 | **示例：** @@ -841,12 +841,12 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | --------------- | - | text | string | 是 | “” | 需要绘制的文本内容。 | - | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | - | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | - | maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。| +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | --------------- | +| text | string | 是 | “” | 需要绘制的文本内容。 | +| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | +| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | +| maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。| **示例：** @@ -886,33 +886,33 @@ measureText(text: string): TextMetrics **参数：** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ---- | ------ | ---- | ---- | ---------- | - | text | string | 是 | "" | 需要进行测量的文本。 | +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ---- | ------ | ---- | ---- | ---------- | +| text | string | 是 | "" | 需要进行测量的文本。 | **返回值：** - | 类型 | 说明 | - | ----------- | ------- | - | TextMetrics | 文本的尺寸信息 | +| 类型 | 说明 | +| ----------- | ------- | +| TextMetrics | 文本的尺寸信息 | **TextMetrics类型描述:** - | 属性 | 类型 | 描述 | - | ----- | ------ | ------- | - | width | number | 字符串的宽度。 | - | height | number | 字符串的高度。 | - | actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 | - | actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 | - | actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 | - | actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。| - | alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。| - | emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。| - | emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。| - | fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。| - | fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。| - | hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。| - | ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。| +| 属性 | 类型 | 描述 | +| ----- | ------ | ------- | +| width | number | 字符串的宽度。 | +| height | number | 字符串的高度。 | +| actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 | +| actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 | +| actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 | +| actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。| +| alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。| +| emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。| +| emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。| +| fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。| +| fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。| +| hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。| +| ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。| @@ -956,9 +956,9 @@ stroke(path?: Path2D): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ---------------------------------------- | ---- | ---- | ------------ | - | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ---------------------------------------- | ---- | ---- | ------------ | +| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | **示例：** @@ -1040,10 +1040,10 @@ moveTo(x: number, y: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ---- | ------ | ---- | ---- | --------- | - | x | number | 是 | 0 | 指定位置的x坐标。 | - | y | number | 是 | 0 | 指定位置的y坐标。 | +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ---- | ------ | ---- | ---- | --------- | +| x | number | 是 | 0 | 指定位置的x坐标。 | +| y | number | 是 | 0 | 指定位置的y坐标。 | **示例：** @@ -1085,10 +1085,10 @@ lineTo(x: number, y: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | --------- | - | x | number | 是 | 0 | 指定位置的x坐标。 | - | y | number | 是 | 0 | 指定位置的y坐标。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | --------- | +| x | number | 是 | 0 | 指定位置的x坐标。 | +| y | number | 是 | 0 | 指定位置的y坐标。 | **示例：** @@ -1170,16 +1170,16 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | - | 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'。 | **返回值：**： - | 类型 | 说明 | - | ---------- | ---------------------------------------- | - | [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 | +| 类型 | 说明 | +| ---------- | ---------------------------------------- | +| [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 | **示例：** @@ -1221,14 +1221,14 @@ 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坐标值。 | **示例：** @@ -1270,12 +1270,12 @@ 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坐标值。 | **示例：** @@ -1317,14 +1317,14 @@ 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 | 弧线的终止弧度。 | - | counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------------- | ------- | ---- | ----- | ---------- | +| x | number | 是 | 0 | 弧线圆心的x坐标值。 | +| y | number | 是 | 0 | 弧线圆心的y坐标值。 | +| radius | number | 是 | 0 | 弧线的圆半径。 | +| startAngle | number | 是 | 0 | 弧线的起始弧度。 | +| endAngle | number | 是 | 0 | 弧线的终止弧度。 | +| counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | **示例：** @@ -1365,13 +1365,13 @@ 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 | 圆弧的圆半径值。 | **示例：** @@ -1412,16 +1412,16 @@ 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 | 椭圆绘制的结束点角度，以弧度表示。 | - | counterclockwise | 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 | 椭圆绘制的结束点角度，以弧度表示。 | +| counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | **示例：** @@ -1462,12 +1462,12 @@ rect(x: number, y: number, w: number, h: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | - | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | - | w | number | 是 | 0 | 指定矩形的宽度。 | - | h | number | 是 | 0 | 指定矩形的高度。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------ | ------ | ---- | ---- | ------------- | +| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | +| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | +| w | number | 是 | 0 | 指定矩形的宽度。 | +| h | number | 是 | 0 | 指定矩形的高度。 | **示例：** @@ -1507,9 +1507,9 @@ fill(fillRule?: CanvasFillRule): void **参数:** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。
可选参数为："nonzero", "evenodd"。| +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------ | ------ | ---- | ---- | ------------- | +| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。
可选参数为："nonzero", "evenodd"。| **示例:** @@ -1548,10 +1548,10 @@ fill(path: Path2D, fillRule?: CanvasFillRule): void **参数:** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | path | Path2D | 是 | | Path2D填充路径。 | - | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。
可选参数为："nonzero", "evenodd"。| +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------ | ------ | ---- | ---- | ------------- | +| path | Path2D | 是 | | Path2D填充路径。 | +| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。
可选参数为："nonzero", "evenodd"。| **示例:** @@ -1588,7 +1588,7 @@ struct Fill { .height('100%') } } - ``` +``` ![zh-cn_image_000000127777774](figures/zh-cn_image_000000127777774.png) @@ -1601,9 +1601,9 @@ clip(fillRule?: CanvasFillRule): void **参数:** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。| +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------ | ------ | ---- | ---- | ------------- | +| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。| **示例:** @@ -1644,11 +1644,11 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void **参数:** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | path | Path2D | 是 | - | Path2D剪切路径。 | - | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。| - +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------ | ------ | ---- | ---- | ------------- | +| path | Path2D | 是 | - | Path2D剪切路径。 | +| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。
可选参数为："nonzero", "evenodd"。| + ### filter @@ -1659,9 +1659,9 @@ filter(filter: string): void **参数:** - | 参数 | 类型 | 必填 | 默认值 | 说明 | - | ------ | ------ | ---- | ---- | ------------- | - | filter | string | 是 | - | 接受各类滤镜效果的函数。| +| 参数 | 类型 | 必填 | 默认值 | 说明 | +| ------ | ------ | ---- | ---- | ------------- | +| filter | string | 是 | - | 接受各类滤镜效果的函数。| ### getTransform @@ -1693,9 +1693,9 @@ rotate(angle: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ---------------------------------------- | - | angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ------ | ------ | ---- | ---- | ---------------------------------------- | +| angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | **示例：** @@ -1735,10 +1735,10 @@ scale(x: number, y: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | ----------- | - | x | number | 是 | 0 | 设置水平方向的缩放值。 | - | y | number | 是 | 0 | 设置垂直方向的缩放值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | ----------- | +| x | number | 是 | 0 | 设置水平方向的缩放值。 | +| y | number | 是 | 0 | 设置垂直方向的缩放值。 | **示例：** @@ -1786,14 +1786,14 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---------- | ------ | ---- | ---- | -------- | - | a | number | 是 | 0 |scaleX: 指定水平缩放值。 | - | b | number | 是 | 0 |skewX: 指定水平倾斜值。 | - | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | - | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | - | e | number | 是 | 0 |translateX: 指定水平移动值。 | - | f | number | 是 | 0 |translateY: 指定垂直移动值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---------- | ------ | ---- | ---- | -------- | +| a | number | 是 | 0 |scaleX: 指定水平缩放值。 | +| b | number | 是 | 0 |skewX: 指定水平倾斜值。 | +| c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | +| d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | +| e | number | 是 | 0 |translateX: 指定水平移动值。 | +| f | number | 是 | 0 |translateY: 指定垂直移动值。 | **示例：** @@ -1839,14 +1839,14 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform() **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---------- | ------ | ---- | ---- | -------- | - | a | number | 是 | 0 |scaleX: 指定水平缩放值。 | - | b | number | 是 | 0 |skewX: 指定水平倾斜值。 | - | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | - | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | - | e | number | 是 | 0 |translateX: 指定水平移动值。 | - | f | number | 是 | 0 |translateY: 指定垂直移动值。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---------- | ------ | ---- | ---- | -------- | +| a | number | 是 | 0 |scaleX: 指定水平缩放值。 | +| b | number | 是 | 0 |skewX: 指定水平倾斜值。 | +| c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | +| d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | +| e | number | 是 | 0 |translateX: 指定水平移动值。 | +| f | number | 是 | 0 |translateY: 指定垂直移动值。 | **示例：** @@ -1894,10 +1894,10 @@ translate(x: number, y: number): void **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | -------- | - | x | number | 是 | 0 | 设置水平平移量。 | - | y | number | 是 | 0 | 设置竖直平移量。 | +| 参数 | 类型 | 必填 | 默认值 | 描述 | +| ---- | ------ | ---- | ---- | -------- | +| x | number | 是 | 0 | 设置水平平移量。 | +| y | number | 是 | 0 | 设置竖直平移量。 | **示例：** @@ -1942,17 +1942,17 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | - | 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坐标值。 | - | sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | - | sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | - | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | - | dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | - | dw | number | 否 | 0 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 | - | dh | 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坐标值。 | +| sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | +| sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | +| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | +| dy | number | 是 | 0 | 绘制区域左上角在y 轴的位置。 | +| dw | number | 否 | 0 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 | +| dh | number | 否 | 0 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 | **示例：** @@ -1993,10 +1993,10 @@ createImageData(sw: number, sh: number): ImageData **参数：** - | 参数 | 类型 | 必填 | 默认 | 描述 | - | ------ | ------ | ---- | ---- | ------------- | - | sw | number | 是 | 0 | ImageData的宽度。 | - | sh | number | 是 | 0 | ImageData的高度。 | +| 参数 | 类型 | 必填 | 默认 | 描述 | +| ------ | ------ | ---- | ---- | ------------- | +| sw | number | 是 | 0 | ImageData的宽度。 | +| sh | number | 是 | 0 | ImageData的高度。 | ### createImageData @@ -2007,15 +2007,15 @@ createImageData(imageData: ImageData): ImageData **参数：** - | 参数 | 类型 | 必填 | 默认 | 描述 | - | --------- | ------ | ---- | ---- | ----------------- | - | imagedata | [ImageData](ts-components-canvas-imagebitmap.md)| 是 | null | 复制现有的ImageData对象。 | +| 参数 | 类型 | 必填 | 默认 | 描述 | +| --------- | ------ | ---- | ---- | ----------------- | +| imagedata | [ImageData](ts-components-canvas-imagebitmap.md)| 是 | null | 复制现有的ImageData对象。 | **返回值：** - | 类型 | 说明 | - | ---------- | ---------------------------------------- | - | [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。| +| 类型 | 说明 | +| ---------- | ---------------------------------------- | +| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。| ### getPixelMap @@ -2026,18 +2026,18 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | --------------- | - | 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 | 需要输出的区域的高度。 | **返回值：** - | 类型 | 说明 | - | ---------- | ---------------------------------------- | - | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象。 | +| 类型 | 说明 | +| ---------- | ---------------------------------------- | +| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象。 | ### getImageData @@ -2047,18 +2047,18 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | --------------- | - | 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 | 需要输出的区域的高度。 | **返回值：** - | 类型 | 说明 | - | ---------- | ---------------------------------------- | - | [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 | +| 类型 | 说明 | +| ---------- | ---------------------------------------- | +| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 | ### putImageData @@ -2071,15 +2071,15 @@ putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirty **参数：** - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ----------- | ------ | ---- | ------------ | ----------------------------- | - | imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | 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 | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 包含像素值的ImageData对象。 | +| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | +| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | +| dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | +| dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | +| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | +| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | **示例：** @@ -2386,12 +2386,12 @@ 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轴坐标。 | **示例：** @@ -2435,14 +2435,14 @@ 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 | 终点圆的半径。必须为非负且有限的。 | **示例：** 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 558cd8b546884cdabc80525e904ccf8fe3767c62..10bc64eaa88a877e86591d86dd81c4fc72ecfe7e 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 @@ -57,26 +57,26 @@ struct ActionSheetExample { confirm: { value: 'Confirm button', action: () => { - console.log('Get Alert Dialog handled') + console.log('Get Alert Dialog handled'); } }, sheets: [ { title: 'apples', action: () => { - console.error('apples') + console.log('apples'); } }, { title: 'bananas', action: () => { - console.error('bananas') + console.log('bananas'); } }, { title: 'pears', action: () => { - console.error('pears') + console.log('pears'); } } ] 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 12cdbdc5ac5a514480680d49e5ecc947c5376b05..b7b0a781753f9d25881ef4e707894c439f027824 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 @@ -22,7 +22,7 @@ | cancel | () => void | 否 | - | 点击遮障层关闭dialog时的回调。 | | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 | | offset | {
dx: Length \| [Resource](../../ui/ts-types.md#resource类型),
dy: Length  \| [Resource](../../ui/ts-types.md#resource类型)
} | 否 | - | 弹窗相对alignment所在位置的偏移量。 | - | gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 | + | gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。
**说明：**
当gridCount小于等于0时，弹窗宽度是固定的；大于0时，按照设置的数值显示宽度，最大值为4，若值为小数，则向下取整。 | - paramObject2参数 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | @@ -35,7 +35,7 @@ | cancel | () => void | 否 | - | 点击遮障层关闭dialog时的回调。 | | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 | | offset | {
dx: Length \| [Resource](../../ui/ts-types.md#resource类型),
dy: Length  \| [Resource](../../ui/ts-types.md#resource类型)
} | 否 | - | 弹窗相对alignment所在位置的偏移量。 | - | gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 | + | gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。
**说明：**
当gridCount小于等于0时，弹窗宽度是固定的；大于0时，按照设置的数值显示宽度，最大值为4，若值为小数，则向下取整。 | ## 示例 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 da83aa7d4459f4fe9fffefe6dc2a248ada8c2e7b..04696d5b995e526a8e16e41604fae22016c87f77 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 @@ -26,18 +26,18 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, aut | gridCount8+ | number | 否 | - | 弹窗宽度占栅格宽度的个数。 | - DialogAlignment枚举说明 - | 名称 | 描述 | - | ------------------------ | ------- | - | Top | 垂直顶部对齐。 | - | Center | 垂直居中对齐。 | - | Bottom | 垂直底部对齐。 | - | Default | 默认对齐。 | - | TopStart8+ | 左上对齐。 | - | TopEnd8+ | 右上对齐。 | - | CenterStart8+ | 左中对齐。 | - | CenterEnd8+ | 右中对齐。 | - | BottomStart8+ | 左下对齐。 | - | BottomEnd8+ | 右下对齐。 | + | 名称 | 描述 | + | ------------------------ | ------------------------------------------------------ | + | Top | 垂直顶部对齐。 | + | Center | 垂直居中对齐。 | + | Bottom | 垂直底部对齐。 | + | Default | 默认对齐。
**说明：**
与枚举值Center效果相同。 | + | TopStart8+ | 左上对齐。 | + | TopEnd8+ | 右上对齐。 | + | CenterStart8+ | 左中对齐。 | + | CenterEnd8+ | 右中对齐。 | + | BottomStart8+ | 左下对齐。 | + | BottomEnd8+ | 右下对齐。 | ## CustomDialogController 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 d79f6d23c1f18890c2461a771a52e0d3f5369aa1..ca0f86212cf2e291f8207ed16a97b338126e173a 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 @@ -17,13 +17,13 @@ show(options?: TimePickerDialogOptions) 定义时间滑动选择器弹窗并弹出。 - options参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 | - | useMilitaryTime | boolean | 否 | false | 展示时间是否为24小时制。 | - | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | - | 点击弹窗中确定按钮时触发。 | - | onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 | - | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | - | 滑动选择器，当前选择项改变时触发。 | + | 参数名 | 参数类型 | 必填 | 参数描述 | + | -------- | -------- | -------- | -------- | + | selected | Date | 否 | 设置选中项的时间。
默认值：当前系统时间 | + | useMilitaryTime | boolean | 否 | 展示时间是否为24小时制。
默认值：false | + | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 点击弹窗中确定按钮时触发。 | + | onCancel | () => void | 否 | 点击弹窗中取消按钮时触发。 | + | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 滑动选择器，当前选择项改变时触发。 | ## 示例 @@ -33,7 +33,7 @@ show(options?: TimePickerDialogOptions) @Entry @Component struct TimePickerDialogExample01 { - @State isUseMilitaryTime: boolean = true + @State isUseMilitaryTime: boolean = true; build() { Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, @@ -42,13 +42,13 @@ struct TimePickerDialogExample01 { TimePickerDialog.show({ useMilitaryTime: this.isUseMilitaryTime, onAccept: (value: TimePickerResult) => { - console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) + console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); }, onCancel: () => { - console.info("TimePickerDialog:onCancel()") + console.info("TimePickerDialog:onCancel()"); }, onChange: (value: TimePickerResult) => { - console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) + console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); } }) }) @@ -62,7 +62,7 @@ struct TimePickerDialogExample01 { @Entry @Component struct TimePickerDialogExample02 { - @State isUseMilitaryTime: boolean = false + @State isUseMilitaryTime: boolean = false; build() { Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, @@ -71,13 +71,13 @@ struct TimePickerDialogExample02 { TimePickerDialog.show({ useMilitaryTime: this.isUseMilitaryTime, onAccept: (value: TimePickerResult) => { - console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) + console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); }, onCancel: () => { - console.info("TimePickerDialog:onCancel()") + console.info("TimePickerDialog:onCancel()"); }, onChange: (value: TimePickerResult) => { - console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) + console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); } }) }) diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642023.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642023.gif new file mode 100644 index 0000000000000000000000000000000000000000..c584f3fddad26c473453a573a12f6aa869d2cdbc Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642023.gif differ diff --git a/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md b/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md index 2ec686adbe79f83c44d548b31d928c51d7f841f9..3c39754bef147eeb52e78b179a9602dd7473d926 100644 --- a/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md +++ b/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md @@ -56,10 +56,10 @@ struct ParentComp { Column() { Text(this.isCountDown ? 'Count Down' : 'Stopwatch') if (this.isCountDown) { - Image('countdown.png') + Image($r("app.media.countdown")).width(200).height(200) TimerComponent({counter: 10, changePerSec: -1, showInColor: Color.Red}) } else { - Image('stopwatch.png') + Image($r("app.media.stopwatch")).width(200).height(200) TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black }) } Button(this.isCountDown ? 'Switch to Stopwatch' : 'Switch to Count Down') @@ -93,3 +93,5 @@ struct TimerComponent { } } ``` + + ![](figures/zh-cn_image_0000001118642023.gif) \ No newline at end of file