Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 8caf1f63 编写于 作者: W wangshuainan
浏览文件
操作

整改文docs文档 

Signed-off-by: Nwangshuainan <wangshuainan1@huawei.com>
上级 4b198b91
显示空白变更内容
内联 并排
Showing with 337 addition and 275 deletion
zh-cn/application-dev/reference/apis/js-apis-prompt.md
浏览文件 @ 8caf1f63
...@@ -32,6 +32,8 @@ prompt.showToast({ ...@@ -32,6 +32,8 @@ prompt.showToast({
duration: 2000, duration: 2000,
}); });
``` ```
![zh-cn_image_0001](figures/zh-cn_image_0001.gif)
## ShowToastOptions ## ShowToastOptions
文本提示框的选项。 文本提示框的选项。
...@@ -88,6 +90,8 @@ prompt.showDialog({ ...@@ -88,6 +90,8 @@ prompt.showDialog({
}) })
``` ```
![zh-cn_image_0002](figures/zh-cn_image_0002.gif)
## prompt.showDialog ## prompt.showDialog
showDialog(options: ShowDialogOptions, callback: AsyncCallback&lt;ShowDialogSuccessResponse&gt;):void showDialog(options: ShowDialogOptions, callback: AsyncCallback&lt;ShowDialogSuccessResponse&gt;):void
...@@ -127,6 +131,8 @@ prompt.showDialog({ ...@@ -127,6 +131,8 @@ prompt.showDialog({
}); });
``` ```
![zh-cn_image_0004](figures/zh-cn_image_0004.gif)
## ShowDialogOptions ## ShowDialogOptions
对话框的选项。 对话框的选项。
...@@ -188,6 +194,8 @@ prompt.showActionMenu({ ...@@ -188,6 +194,8 @@ prompt.showActionMenu({
}) })
``` ```
![zh-cn_image_0005](figures/zh-cn_image_0005.gif)
## prompt.showActionMenu ## prompt.showActionMenu
showActionMenu(options: ActionMenuOptions): Promise&lt;ActionMenuSuccessResponse&gt; showActionMenu(options: ActionMenuOptions): Promise&lt;ActionMenuSuccessResponse&gt;
...@@ -228,6 +236,8 @@ prompt.showActionMenu({ ...@@ -228,6 +236,8 @@ prompt.showActionMenu({
console.info('showActionMenu error: ' + err); console.info('showActionMenu error: ' + err);
}) })
``` ```
![zh-cn_image_0006](figures/zh-cn_image_0006.gif)
## ActionMenuOptions ## ActionMenuOptions
操作菜单的选项。 操作菜单的选项。
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md
浏览文件 @ 8caf1f63
# piece # piece
一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。
> **说明：** > **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。
## 子组件 ## 子组件
...@@ -15,11 +15,11 @@ ...@@ -15,11 +15,11 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 必填 | 描述 |
| -------- | ------- | ----- | ---- | ---------------------------------------- | | -------- | ------- | ---- | ------------------------------------------------------------ |
| content | string | - | 是 | 操作块文本内容。 | | content | string | 是 | 操作块文本内容。 |
| closable | boolean | false | 否 | 设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。 | | closable | boolean | 否 | 设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。<br/>默认值：false |
| icon | string | - | 否 | 操作块删除图标的url，支持本地路径。 | | icon | string | 否 | 操作块删除图标的url，支持本地路径。 |
## 样式 ## 样式
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ 8caf1f63
...@@ -35,8 +35,8 @@ Image(src: string | PixelMap | Resource) ...@@ -35,8 +35,8 @@ Image(src: string | PixelMap | Resource)
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | ------ | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 | - | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。 | | src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 | - | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。<br/>\- 支持file:///data/storage路径前缀的字符串，用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。 |
## 属性 ## 属性
...@@ -356,3 +356,53 @@ struct ImageExample3 { ...@@ -356,3 +356,53 @@ struct ImageExample3 {
``` ```
![zh-cn_image_0000001205972610](figures/zh-cn_image_0000001205972610.gif) ![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
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @ 8caf1f63
...@@ -59,7 +59,7 @@ Slider(options:{value?: number, min?: number, max?: number, step?: number, style ...@@ -59,7 +59,7 @@ Slider(options:{value?: number, min?: number, max?: number, step?: number, style
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | -------- | -------- |
| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value：当前进度值。<br/>mode：拖动状态。 | | onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value：当前进度值。若返回值有小数，可使用Math.toFixed()将数据处理为想要的精度。<br/>mode：拖动状态。 |
- SliderChangeMode枚举说明 - SliderChangeMode枚举说明
| 名称 | 值 | 描述 | | 名称 | 值 | 描述 |
......
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 8caf1f63
...@@ -13,9 +13,9 @@ CanvasRenderingContext2D(setting: RenderingContextSetting) ...@@ -13,9 +13,9 @@ CanvasRenderingContext2D(setting: RenderingContextSetting)
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 | | setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 |
### RenderingContextSettings ### RenderingContextSettings
...@@ -26,9 +26,9 @@ RenderingContextSettings(antialias?: boolean) ...@@ -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 ...@@ -662,12 +662,12 @@ fillRect(x: number, y: number, w: number, h: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 |
| y | number | 是 | 0 | 指定矩形左上角点的y坐标。 | | y | number | 是 | 0 | 指定矩形左上角点的y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 | | width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 | | height | number | 是 | 0 | 指定矩形的高度。 |
**示例：** **示例：**
...@@ -706,12 +706,12 @@ strokeRect(x: number, y: number, w: number, h: number): void ...@@ -706,12 +706,12 @@ strokeRect(x: number, y: number, w: number, h: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------ | | ------ | ------ | ---- | ---- | ------------ |
| x | number | 是 | 0 | 指定矩形的左上角x坐标。 | | x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标。 |
| w | number | 是 | 0 | 指定矩形的宽度。 | | w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 | | h | number | 是 | 0 | 指定矩形的高度。 |
**示例：** **示例：**
...@@ -750,12 +750,12 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -750,12 +750,12 @@ clearRect(x: number, y: number, w: number, h: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 |
| w | number | 是 | 0 | 指定矩形的宽度。 | | w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 | | h | number | 是 | 0 | 指定矩形的高度。 |
**示例：** **示例：**
...@@ -772,7 +772,7 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -772,7 +772,7 @@ clearRect(x: number, y: number, w: number, h: number): void
Canvas(this.context) Canvas(this.context)
.width('100%') .width('100%')
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffffff')
.onReady(() =>{ .onReady(() =>{
this.context.fillStyle = 'rgb(0,0,255)' this.context.fillStyle = 'rgb(0,0,255)'
this.context.fillRect(0,0,500,500) this.context.fillRect(0,0,500,500)
...@@ -796,12 +796,12 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void ...@@ -796,12 +796,12 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------------- | | ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 | | text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 指定文本允许的最大宽度。 | | maxWidth | number | 否 | - | 指定文本允许的最大宽度。 |
**示例：** **示例：**
...@@ -841,12 +841,12 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void ...@@ -841,12 +841,12 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- | | ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 | | text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。| | maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。|
**示例：** **示例：**
...@@ -886,33 +886,33 @@ measureText(text: string): TextMetrics ...@@ -886,33 +886,33 @@ measureText(text: string): TextMetrics
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ---------- | | ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 | | text | string | 是 | "" | 需要进行测量的文本。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ----------- | ------- | | ----------- | ------- |
| TextMetrics | 文本的尺寸信息 | | TextMetrics | 文本的尺寸信息 |
**TextMetrics类型描述:** **TextMetrics类型描述:**
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| ----- | ------ | ------- | | ----- | ------ | ------- |
| width | number | 字符串的宽度。 | | width | number | 字符串的宽度。 |
| height | number | 字符串的高度。 | | height | number | 字符串的高度。 |
| actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 | | actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 |
| actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 | | actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 |
| actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 | | actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 |
| actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。| | actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。|
| alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。| | alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。|
| emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。| | emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。|
| emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。| | emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。|
| fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。| | fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。|
| fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。| | fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。|
| hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。| | hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。|
| ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。| | ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。|
...@@ -956,9 +956,9 @@ stroke(path?: Path2D): void ...@@ -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 ...@@ -1040,10 +1040,10 @@ moveTo(x: number, y: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------- | | ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 | | x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 |
**示例：** **示例：**
...@@ -1085,10 +1085,10 @@ lineTo(x: number, y: number): void ...@@ -1085,10 +1085,10 @@ lineTo(x: number, y: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------- | | ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 | | x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 | | y | number | 是 | 0 | 指定位置的y坐标。 |
**示例：** **示例：**
...@@ -1170,16 +1170,16 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu ...@@ -1170,16 +1170,16 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 |
| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 | | repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
**返回值：**： **返回值：**：
| 类型 | 说明 | | 类型 | 说明 |
| ---------- | ---------------------------------------- | | ---------- | ---------------------------------------- |
| [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 | | [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 |
**示例：** **示例：**
...@@ -1221,14 +1221,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -1221,14 +1221,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- | | ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 | | cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 | | x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 |
**示例：** **示例：**
...@@ -1270,12 +1270,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1270,12 +1270,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- | | ---- | ------ | ---- | ---- | ----------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 | | x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 | | y | number | 是 | 0 | 路径结束时的y坐标值。 |
**示例：** **示例：**
...@@ -1317,14 +1317,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -1317,14 +1317,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ------- | ---- | ----- | ---------- | | ------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 | | x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 | | y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 | | radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 | | startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 | | endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | | counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
**示例：** **示例：**
...@@ -1365,13 +1365,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1365,13 +1365,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | --------------- | | ------ | ------ | ---- | ---- | --------------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 | | radius | number | 是 | 0 | 圆弧的圆半径值。 |
**示例：** **示例：**
...@@ -1412,16 +1412,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1412,16 +1412,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------------- | ------- | ---- | ----- | ----------------- | | ------------- | ------- | ---- | ----- | ----------------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 | | radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | | counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
**示例：** **示例：**
...@@ -1462,12 +1462,12 @@ rect(x: number, y: number, w: number, h: number): void ...@@ -1462,12 +1462,12 @@ rect(x: number, y: number, w: number, h: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| w | number | 是 | 0 | 指定矩形的宽度。 | | w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 | | h | number | 是 | 0 | 指定矩形的高度。 |
**示例：** **示例：**
...@@ -1507,9 +1507,9 @@ fill(fillRule?: CanvasFillRule): void ...@@ -1507,9 +1507,9 @@ fill(fillRule?: CanvasFillRule): void
**参数:** **参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。| | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。|
**示例:** **示例:**
...@@ -1548,10 +1548,10 @@ fill(path: Path2D, fillRule?: CanvasFillRule): void ...@@ -1548,10 +1548,10 @@ fill(path: Path2D, fillRule?: CanvasFillRule): void
**参数:** **参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| path | Path2D | 是 | | Path2D填充路径。 | | path | Path2D | 是 | | Path2D填充路径。 |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。| | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。|
**示例:** **示例:**
...@@ -1588,7 +1588,7 @@ struct Fill { ...@@ -1588,7 +1588,7 @@ struct Fill {
.height('100%') .height('100%')
} }
} }
``` ```
![zh-cn_image_000000127777774](figures/zh-cn_image_000000127777774.png) ![zh-cn_image_000000127777774](figures/zh-cn_image_000000127777774.png)
...@@ -1601,9 +1601,9 @@ clip(fillRule?: CanvasFillRule): void ...@@ -1601,9 +1601,9 @@ clip(fillRule?: CanvasFillRule): void
**参数:** **参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。| | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。|
**示例:** **示例:**
...@@ -1644,10 +1644,10 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void ...@@ -1644,10 +1644,10 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void
**参数:** **参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| path | Path2D | 是 | - | Path2D剪切路径。 | | path | Path2D | 是 | - | Path2D剪切路径。 |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。| | fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。|
...@@ -1659,9 +1659,9 @@ filter(filter: string): void ...@@ -1659,9 +1659,9 @@ filter(filter: string): void
**参数:** **参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 | | 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| filter | string | 是 | - | 接受各类滤镜效果的函数。| | filter | string | 是 | - | 接受各类滤镜效果的函数。|
### getTransform ### getTransform
...@@ -1693,9 +1693,9 @@ rotate(angle: number): void ...@@ -1693,9 +1693,9 @@ rotate(angle: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ---------------------------------------- | | ------ | ------ | ---- | ---- | ---------------------------------------- |
| angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 | | angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
**示例：** **示例：**
...@@ -1735,10 +1735,10 @@ scale(x: number, y: number): void ...@@ -1735,10 +1735,10 @@ scale(x: number, y: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- | | ---- | ------ | ---- | ---- | ----------- |
| x | number | 是 | 0 | 设置水平方向的缩放值。 | | x | number | 是 | 0 | 设置水平方向的缩放值。 |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 | | y | number | 是 | 0 | 设置垂直方向的缩放值。 |
**示例：** **示例：**
...@@ -1786,14 +1786,14 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 ...@@ -1786,14 +1786,14 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- | | ---------- | ------ | ---- | ---- | -------- |
| a | number | 是 | 0 |scaleX: 指定水平缩放值。 | | a | number | 是 | 0 |scaleX: 指定水平缩放值。 |
| b | number | 是 | 0 |skewX: 指定水平倾斜值。 | | b | number | 是 | 0 |skewX: 指定水平倾斜值。 |
| c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 |
| d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 |
| e | number | 是 | 0 |translateX: 指定水平移动值。 | | e | number | 是 | 0 |translateX: 指定水平移动值。 |
| f | number | 是 | 0 |translateY: 指定垂直移动值。 | | f | number | 是 | 0 |translateY: 指定垂直移动值。 |
**示例：** **示例：**
...@@ -1839,14 +1839,14 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform() ...@@ -1839,14 +1839,14 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- | | ---------- | ------ | ---- | ---- | -------- |
| a | number | 是 | 0 |scaleX: 指定水平缩放值。 | | a | number | 是 | 0 |scaleX: 指定水平缩放值。 |
| b | number | 是 | 0 |skewX: 指定水平倾斜值。 | | b | number | 是 | 0 |skewX: 指定水平倾斜值。 |
| c | number | 是 | 0 |skewY: 指定垂直倾斜值。 | | c | number | 是 | 0 |skewY: 指定垂直倾斜值。 |
| d | number | 是 | 0 |scaleY: 指定垂直缩放值。 | | d | number | 是 | 0 |scaleY: 指定垂直缩放值。 |
| e | number | 是 | 0 |translateX: 指定水平移动值。 | | e | number | 是 | 0 |translateX: 指定水平移动值。 |
| f | number | 是 | 0 |translateY: 指定垂直移动值。 | | f | number | 是 | 0 |translateY: 指定垂直移动值。 |
**示例：** **示例：**
...@@ -1894,10 +1894,10 @@ translate(x: number, y: number): void ...@@ -1894,10 +1894,10 @@ translate(x: number, y: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- | | ---- | ------ | ---- | ---- | -------- |
| x | number | 是 | 0 | 设置水平平移量。 | | x | number | 是 | 0 | 设置水平平移量。 |
| y | number | 是 | 0 | 设置竖直平移量。 | | y | number | 是 | 0 | 设置竖直平移量。 |
**示例：** **示例：**
...@@ -1942,17 +1942,17 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: ...@@ -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。 | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 |
| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 | | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 | | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
| sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 | | sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
| sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 | | sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 | | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
| dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 | | dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
| dw | number | 否 | 0 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 | | dw | number | 否 | 0 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 |
| dh | number | 否 | 0 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 | | dh | number | 否 | 0 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 |
**示例：** **示例：**
...@@ -1993,10 +1993,10 @@ createImageData(sw: number, sh: number): ImageData ...@@ -1993,10 +1993,10 @@ createImageData(sw: number, sh: number): ImageData
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 | | 参数 | 类型 | 必填 | 默认 | 描述 |
| ------ | ------ | ---- | ---- | ------------- | | ------ | ------ | ---- | ---- | ------------- |
| sw | number | 是 | 0 | ImageData的宽度。 | | sw | number | 是 | 0 | ImageData的宽度。 |
| sh | number | 是 | 0 | ImageData的高度。 | | sh | number | 是 | 0 | ImageData的高度。 |
### createImageData ### createImageData
...@@ -2007,15 +2007,15 @@ createImageData(imageData: ImageData): ImageData ...@@ -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 ### getPixelMap
...@@ -2026,18 +2026,18 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap ...@@ -2026,18 +2026,18 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- | | ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 | | sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 | | sh | number | 是 | 0 | 需要输出的区域的高度。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ---------- | ---------------------------------------- | | ---------- | ---------------------------------------- |
| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象。 | | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象。 |
### getImageData ### getImageData
...@@ -2047,18 +2047,18 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData ...@@ -2047,18 +2047,18 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- | | ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 | | sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 | | sh | number | 是 | 0 | 需要输出的区域的高度。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ---------- | ---------------------------------------- | | ---------- | ---------------------------------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 | | [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 |
### putImageData ### putImageData
...@@ -2071,15 +2071,15 @@ putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirty ...@@ -2071,15 +2071,15 @@ putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirty
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | ------ | ---- | ------------ | ----------------------------- | | ----------- | ------ | ---- | ------------ | ----------------------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 包含像素值的ImageData对象。 | | imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 包含像素值的ImageData对象。 |
| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | | dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 |
| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | | dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 |
| dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | | dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
| dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | | dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | | dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 |
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | | dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
**示例：** **示例：**
...@@ -2386,12 +2386,12 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void ...@@ -2386,12 +2386,12 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- | | ---- | ------ | ---- | ---- | -------- |
| x0 | number | 是 | 0 | 起点的x轴坐标。 | | x0 | number | 是 | 0 | 起点的x轴坐标。 |
| y0 | number | 是 | 0 | 起点的y轴坐标。 | | y0 | number | 是 | 0 | 起点的y轴坐标。 |
| x1 | number | 是 | 0 | 终点的x轴坐标。 | | x1 | number | 是 | 0 | 终点的x轴坐标。 |
| y1 | number | 是 | 0 | 终点的y轴坐标。 | | y1 | number | 是 | 0 | 终点的y轴坐标。 |
**示例：** **示例：**
...@@ -2435,14 +2435,14 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -2435,14 +2435,14 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
**参数：** **参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 | | 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------------- | | ---- | ------ | ---- | ---- | ----------------- |
| x0 | number | 是 | 0 | 起始圆的x轴坐标。 | | x0 | number | 是 | 0 | 起始圆的x轴坐标。 |
| y0 | number | 是 | 0 | 起始圆的y轴坐标。 | | y0 | number | 是 | 0 | 起始圆的y轴坐标。 |
| r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 | | r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 |
| x1 | number | 是 | 0 | 终点圆的x轴坐标。 | | x1 | number | 是 | 0 | 终点圆的x轴坐标。 |
| y1 | number | 是 | 0 | 终点圆的y轴坐标。 | | y1 | number | 是 | 0 | 终点圆的y轴坐标。 |
| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | | r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
**示例：** **示例：**
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
浏览文件 @ 8caf1f63
...@@ -57,26 +57,26 @@ struct ActionSheetExample { ...@@ -57,26 +57,26 @@ struct ActionSheetExample {
confirm: { confirm: {
value: 'Confirm button', value: 'Confirm button',
action: () => { action: () => {
console.log('Get Alert Dialog handled') console.log('Get Alert Dialog handled');
} }
}, },
sheets: [ sheets: [
{ {
title: 'apples', title: 'apples',
action: () => { action: () => {
console.error('apples') console.log('apples');
} }
}, },
{ {
title: 'bananas', title: 'bananas',
action: () => { action: () => {
console.error('bananas') console.log('bananas');
} }
}, },
{ {
title: 'pears', title: 'pears',
action: () => { action: () => {
console.error('pears') console.log('pears');
} }
} }
] ]
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
浏览文件 @ 8caf1f63
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 | | cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 | | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 | | offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 | | gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。<br/>**说明：**<br/>当gridCount小于等于0时，弹窗宽度是固定的；大于0时，按照设置的数值显示宽度，最大值为4，若值为小数，则向下取整。 |
- paramObject2参数 - paramObject2参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 | | cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 | | alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 | | offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 | | gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。<br/>**说明：**<br/>当gridCount小于等于0时，弹窗宽度是固定的；大于0时，按照设置的数值显示宽度，最大值为4，若值为小数，则向下取整。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
浏览文件 @ 8caf1f63
...@@ -27,11 +27,11 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut ...@@ -27,11 +27,11 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
- DialogAlignment枚举说明 - DialogAlignment枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| ------------------------ | ------- | | ------------------------ | ------------------------------------------------------ |
| Top | 垂直顶部对齐。 | | Top | 垂直顶部对齐。 |
| Center | 垂直居中对齐。 | | Center | 垂直居中对齐。 |
| Bottom | 垂直底部对齐。 | | Bottom | 垂直底部对齐。 |
| Default | 默认对齐。 | | Default | 默认对齐。<br/>**说明：**<br/>与枚举值Center效果相同。 |
| TopStart<sup>8+</sup> | 左上对齐。 | | TopStart<sup>8+</sup> | 左上对齐。 |
| TopEnd<sup>8+</sup> | 右上对齐。 | | TopEnd<sup>8+</sup> | 右上对齐。 |
| CenterStart<sup>8+</sup> | 左中对齐。 | | CenterStart<sup>8+</sup> | 左中对齐。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
浏览文件 @ 8caf1f63
...@@ -17,13 +17,13 @@ show(options?: TimePickerDialogOptions) ...@@ -17,13 +17,13 @@ show(options?: TimePickerDialogOptions)
定义时间滑动选择器弹窗并弹出。 定义时间滑动选择器弹窗并弹出。
- options参数 - options参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 | | selected | Date | 否 | 设置选中项的时间。<br/>默认值：当前系统时间 |
| useMilitaryTime | boolean | 否 | false | 展示时间是否为24小时制。 | | useMilitaryTime | boolean | 否 | 展示时间是否为24小时制。<br/>默认值：false |
| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | - | 点击弹窗中确定按钮时触发。 | | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 点击弹窗中确定按钮时触发。 |
| onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 | | onCancel | () => void | 否 | 点击弹窗中取消按钮时触发。 |
| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | - | 滑动选择器，当前选择项改变时触发。 | | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 滑动选择器，当前选择项改变时触发。 |
## 示例 ## 示例
...@@ -33,7 +33,7 @@ show(options?: TimePickerDialogOptions) ...@@ -33,7 +33,7 @@ show(options?: TimePickerDialogOptions)
@Entry @Entry
@Component @Component
struct TimePickerDialogExample01 { struct TimePickerDialogExample01 {
@State isUseMilitaryTime: boolean = true @State isUseMilitaryTime: boolean = true;
build() { build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
...@@ -42,13 +42,13 @@ struct TimePickerDialogExample01 { ...@@ -42,13 +42,13 @@ struct TimePickerDialogExample01 {
TimePickerDialog.show({ TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime, useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => { onAccept: (value: TimePickerResult) => {
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
}, },
onCancel: () => { onCancel: () => {
console.info("TimePickerDialog:onCancel()") console.info("TimePickerDialog:onCancel()");
}, },
onChange: (value: TimePickerResult) => { onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
} }
}) })
}) })
...@@ -62,7 +62,7 @@ struct TimePickerDialogExample01 { ...@@ -62,7 +62,7 @@ struct TimePickerDialogExample01 {
@Entry @Entry
@Component @Component
struct TimePickerDialogExample02 { struct TimePickerDialogExample02 {
@State isUseMilitaryTime: boolean = false @State isUseMilitaryTime: boolean = false;
build() { build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
...@@ -71,13 +71,13 @@ struct TimePickerDialogExample02 { ...@@ -71,13 +71,13 @@ struct TimePickerDialogExample02 {
TimePickerDialog.show({ TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime, useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => { onAccept: (value: TimePickerResult) => {
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
}, },
onCancel: () => { onCancel: () => {
console.info("TimePickerDialog:onCancel()") console.info("TimePickerDialog:onCancel()");
}, },
onChange: (value: TimePickerResult) => { onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
} }
}) })
}) })
......
zh-cn/application-dev/ui/ts-component-creation-re-initialization.md
浏览文件 @ 8caf1f63
...@@ -56,10 +56,10 @@ struct ParentComp { ...@@ -56,10 +56,10 @@ struct ParentComp {
Column() { Column() {
Text(this.isCountDown ? 'Count Down' : 'Stopwatch') Text(this.isCountDown ? 'Count Down' : 'Stopwatch')
if (this.isCountDown) { if (this.isCountDown) {
Image('countdown.png') Image($r("app.media.countdown")).width(200).height(200)
TimerComponent({counter: 10, changePerSec: -1, showInColor: Color.Red}) TimerComponent({counter: 10, changePerSec: -1, showInColor: Color.Red})
} else { } else {
Image('stopwatch.png') Image($r("app.media.stopwatch")).width(200).height(200)
TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black }) TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black })
} }
Button(this.isCountDown ? 'Switch to Stopwatch' : 'Switch to Count Down') Button(this.isCountDown ? 'Switch to Stopwatch' : 'Switch to Count Down')
...@@ -93,3 +93,5 @@ struct TimerComponent { ...@@ -93,3 +93,5 @@ struct TimerComponent {
} }
} }
``` ```
![](figures/zh-cn_image_0000001118642023.gif)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或