Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs
提交 a0060c97 编写于 作者: H HelloCrease
浏览文件
操作

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 36e1e2b3
显示空白变更内容
内联 并排
Showing with 532 addition and 527 deletion
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ a0060c97
......@@ -37,16 +37,18 @@
```
- 示意图（关闭抗锯齿）
![zh-cn_image_0000001214837333](figures/zh-cn_image_0000001214837333.png)
- 示意图（开启抗锯齿）
![zh-cn_image_0000001127125162](figures/zh-cn_image_0000001127125162.png)
## 属性
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;CanvasPattern | - | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用&nbsp;createLinearGradient()方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用&nbsp;createPattern()方法创建。 |
| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;CanvasPattern | - | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用&nbsp;createLinearGradient()方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用&nbsp;createPattern()方法创建。 |
......@@ -380,7 +382,7 @@ export default {
- 类型字段说明
| 值 | 描述 |
| -------- | -------- |
| ---------------- | ------------------------ |
| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 |
| source-atop | 在现有绘制内容顶部显示新绘制内容。 |
| source-in | 在现有绘制内容中显示新绘制内容。 |
......@@ -569,7 +571,7 @@ fillRect(x: number, y: number, width:number, height: number): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ------ | ------ | ------------- |
| x | number | 指定矩形左上角点的x坐标。 |
| y | number | 指定矩形左上角点的y坐标。 |
| width | number | 指定矩形的宽度。 |
......@@ -604,7 +606,7 @@ clearRect(x: number, y: number, width:number, height: number): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ------ | ------ | ------------- |
| x | number | 指定矩形上的左上角x坐标。 |
| y | number | 指定矩形上的左上角y坐标。 |
| width | number | 指定矩形的宽度。 |
......@@ -642,7 +644,7 @@ strokeRect(x: number, y: number, width:number, height: number): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ------ | ------ | ------------ |
| x | number | 指定矩形的左上角x坐标。 |
| y | number | 指定矩形的左上角y坐标。 |
| width | number | 指定矩形的宽度。 |
......@@ -678,7 +680,7 @@ fillText(text: string, x: number, y: number): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---- | ------ | --------------- |
| text | string | 需要绘制的文本内容。 |
| x | number | 需要绘制的文本的左下角x坐标。 |
| y | number | 需要绘制的文本的左下角y坐标。 |
......@@ -713,7 +715,7 @@ strokeText(text: string, x: number, y: number): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---- | ------ | --------------- |
| text | string | 需要绘制的文本内容。 |
| x | number | 需要绘制的文本的左下角x坐标。 |
| y | number | 需要绘制的文本的左下角y坐标。 |
......@@ -748,12 +750,12 @@ measureText(text: string): TextMetrics
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---- | ------ | ---------- |
| text | string | 需要进行测量的文本。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| ----------- | -------------------------------------- |
| TextMetrics | 包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。 |
- 示例
......@@ -851,7 +853,7 @@ moveTo(x: number, y: number): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 |
| y | number | 指定位置的y坐标。 |
......@@ -887,7 +889,7 @@ lineTo(x: number, y: number): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 |
| y | number | 指定位置的y坐标。 |
......@@ -955,13 +957,13 @@ createPattern(image: Image, repetition: string): Object
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---------- | ------ | ---------------------------------------- |
| image | Image | 图源对象，具体参考[Image对象](../arkui-js/js-components-canvas-image.md)。 |
| repetition | string | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| ------ | ----------------- |
| Object | 指定图像填充的Pattern对象。 |
- 示例
......@@ -997,7 +999,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---- | ------ | -------------- |
| cp1x | number | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 第二个贝塞尔参数的x坐标值。 |
......@@ -1037,7 +1039,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---- | ------ | ----------- |
| cpx | number | 贝塞尔参数的x坐标值。 |
| cpy | number | 贝塞尔参数的y坐标值。 |
| x | number | 路径结束时的x坐标值。 |
......@@ -1075,7 +1077,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ------------- | ------- | ---------- |
| x | number | 弧线圆心的x坐标值。 |
| y | number | 弧线圆心的y坐标值。 |
| radius | number | 弧线的圆半径。 |
......@@ -1114,7 +1116,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ------ | ------ | --------------- |
| x1 | number | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 圆弧经过的第二个点的x坐标值。 |
......@@ -1152,7 +1154,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ------------- | ------ | ------------------------------------ |
| x | number | 椭圆圆心的x轴坐标。 |
| y | number | 椭圆圆心的y轴坐标。 |
| radiusX | number | 椭圆x轴的半径长度。 |
......@@ -1193,7 +1195,7 @@ rect(x: number, y: number, width: number, height: number): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ------ | ------ | ------------- |
| x | number | 指定矩形的左上角x坐标值。 |
| y | number | 指定矩形的左上角y坐标值。 |
| width | number | 指定矩形的宽度。 |
......@@ -1289,7 +1291,7 @@ rotate(rotate: number): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ------ | ------ | ---------------------------------------- |
| rotate | number | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
- 示例
......@@ -1322,7 +1324,7 @@ scale(x: number, y: number): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---- | ------ | ----------- |
| x | number | 设置水平方向的缩放值。 |
| y | number | 设置垂直方向的缩放值。 |
......@@ -1364,7 +1366,7 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---------- | ------ | -------- |
| scaleX | number | 指定水平缩放值。 |
| skewX | number | 指定水平倾斜值。 |
| skewY | number | 指定垂直倾斜值。 |
......@@ -1408,7 +1410,7 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---------- | ------ | -------- |
| scaleX | number | 指定水平缩放值。 |
| skewX | number | 指定水平倾斜值。 |
| skewY | number | 指定垂直倾斜值。 |
......@@ -1449,7 +1451,7 @@ translate(x: number, y: number): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---- | ------ | -------- |
| x | number | 设置水平平移量。 |
| y | number | 设置竖直平移量。 |
......@@ -1484,7 +1486,7 @@ createPath2D(path: Path2D, cmds: string): Path2D
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---- | ------ | -------------- |
| path | Path2D | Path2D对象。 |
| cmds | string | SVG的Path描述字符串。 |
......@@ -1529,7 +1531,7 @@ drawImage(image: Image, sx: number, sy: number, sWidth: number, sHeight: number,
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ------- | ------ | ---------------------------------------- |
| image | Image | 图片资源，请参考[Image对象](../arkui-js/js-components-canvas-image.md)。 |
| sx | number | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 裁切源图像时距离源图像左上角的y坐标值。 |
......@@ -1621,7 +1623,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---- | ------ | -------- |
| x0 | number | 起点的x轴坐标。 |
| y0 | number | 起点的y轴坐标。 |
| x1 | number | 终点的x轴坐标。 |
......@@ -1629,7 +1631,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| ------ | ---------------------- |
| Object | 返回创建的CanvasGradient对象。 |
- 示例
......@@ -1670,7 +1672,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---- | ------ | ----------------- |
| x0 | number | 起始圆的x轴坐标。 |
| y0 | number | 起始圆的y轴坐标。 |
| r0 | number | 起始圆的半径。必须是非负且有限的。 |
......@@ -1680,7 +1682,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| ------ | ---------------------- |
| Object | 返回创建的CanvasGradient对象。 |
- 示例
......@@ -1721,14 +1723,14 @@ createImageData(width: number, height: number, imageData: Object): Object
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| --------- | ------ | ----------------- |
| width | number | ImageData的宽度。 |
| height | number | ImageData的高度。 |
| imagedata | Object | 复制现有的ImageData对象。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| ------ | ----------------- |
| Object | 返回创建的ImageData对象。 |
- 示例
......@@ -1759,7 +1761,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ---- | ------ | --------------- |
| sx | number | 需要输出的区域的左上角x坐标。 |
| sy | number | 需要输出的区域的左上角y坐标。 |
| sw | number | 需要输出的区域的宽度。 |
......@@ -1767,7 +1769,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| ------ | ----------------------- |
| Object | 返回包含指定区域像素的ImageData对象。 |
- 示例
......@@ -1797,7 +1799,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ----------- | ------ | ----------------------------- |
| imagedata | Object | 包含像素值的ImageData对象。 |
| dx | number | 填充区域在x轴方向的偏移量。 |
| dy | number | 填充区域在y轴方向的偏移量。 |
......@@ -1842,7 +1844,7 @@ setLineDash(segments: Array): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| -------- | ----- | -------------------- |
| segments | Array | 作为数组用来描述线段如何交替和间距长度。 |
- 示例
......@@ -1876,7 +1878,7 @@ getLineDash(): Array
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| ----- | ------------------------ |
| Array | 返回数组，该数组用来描述线段如何交替和间距长度。 |
- 示例
......@@ -1906,7 +1908,7 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
- 参数
| 参数 | 类型 | 描述 |
| -------- | -------- | -------- |
| ------ | ----------- | ------------------ |
| bitmap | ImageBitmap | 待显示的ImageBitmap对象。 |
- 示例
......@@ -1935,7 +1937,3 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
```
![zh-cn_image_0000001168984882](figures/zh-cn_image_0000001168984882.png)
```
```
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
浏览文件 @ a0060c97
......@@ -12,11 +12,11 @@
## 导入模块
```
import lottie from 'lottie-ohos-ets'
import lottie from '@ohos/lottieETS'
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 在Terminal窗口使用 npm install 'lottie-ohos-ets'命令下载Lottie。
> 在Terminal窗口使用 `npm install @ohos/lottieETS` 命令下载Lottie。
## lottie.loadAnimation
......
zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ a0060c97
# OffscreenCanvasRenderingConxt2D对象
# OffscreenCanvasRenderingContext2D对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -13,16 +13,16 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------- | ---------------------------------------- | ---- | ---- | ------------------------------ |
| width | number | 是 | - | 离屏画布的宽度 |
| height | number | 是 | - | 离屏画布的高度 |
| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d#renderingcontextsettings) | 是 | - | 见RenderingContextSettings接口描述。 |
| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 是 | - | 见RenderingContextSettings接口描述。 |
## 属性
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用&nbsp;[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
......@@ -451,7 +451,7 @@ struct LineDashOffset {
### globalCompositeOperation
| 名称 | 描述 |
| -------- | -------- |
| ---------------- | ------------------------ |
| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 |
| source-atop | 在现有绘制内容顶部显示新绘制内容。 |
| source-in | 在现有绘制内容中显示新绘制内容。 |
......@@ -685,7 +685,7 @@ fillRect(x: number, y: number, w: number, h: number): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形左上角点的x坐标。 |
| y | number | 是 | 0 | 指定矩形左上角点的y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
......@@ -729,7 +729,7 @@ strokeRect(x: number, y: number, w: number, h: number): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | ---- | ---- | ------------ |
| x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
......@@ -772,7 +772,7 @@ clearRect(x: number, y: number, w: number, h: number): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
......@@ -817,7 +817,7 @@ fillText(text: string, x: number, y: number): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
......@@ -860,7 +860,7 @@ strokeText(text: string, x: number, y: number): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
......@@ -903,17 +903,17 @@ measureText(text: string): TextMetrics
- 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 |
- 返回值
| 类型 | 说明 |
| -------- | -------- |
| ----------- | ------- |
| TextMetrics | 文本的尺寸信息 |
- TextMetrics类型描述
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| ----- | ------ | ------- |
| width | number | 字符串的宽度。 |
- 示例
......@@ -955,7 +955,7 @@ stroke(path?: Path2D): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ---------------------------------------- | ---- | ---- | ------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
- 示例
......@@ -1038,7 +1038,7 @@ moveTo(x: number, y: number): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 |
......@@ -1082,7 +1082,7 @@ lineTo(x: number, y: number): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 |
......@@ -1166,7 +1166,7 @@ createPattern(image: ImageBitmap, repetition: string): CanvasPattern
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 |
| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
......@@ -1210,7 +1210,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
......@@ -1258,7 +1258,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | ---- | ---- | ----------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
......@@ -1304,7 +1304,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 |
......@@ -1351,7 +1351,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | ---- | ---- | --------------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
......@@ -1397,7 +1397,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
- 参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| ------------- | ------- | ---- | ----- | ----------------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
......@@ -1447,7 +1447,7 @@ rect(x: number, y: number, width: number, height: number): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
......@@ -1566,7 +1566,7 @@ rotate(rotate: number): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | ---- | ---- | ---------------------------------------- |
| rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
- 示例
......@@ -1607,7 +1607,7 @@ scale(x: number, y: number): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | ---- | ---- | ----------- |
| x | number | 是 | 0 | 设置水平方向的缩放值。 |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 |
......@@ -1657,7 +1657,7 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 |
......@@ -1709,7 +1709,7 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 |
......@@ -1758,7 +1758,7 @@ translate(x: number, y: number): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | ---- | ---- | -------- |
| x | number | 是 | 0 | 设置水平平移量。 |
| y | number | 是 | 0 | 设置竖直平移量。 |
......@@ -1805,7 +1805,7 @@ drawImage(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: n
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------- | ---------------------------------------- | ---- | ---- | -------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图片资源，请参考ImageBitmap。 |
| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
......@@ -1855,7 +1855,7 @@ createImageData(width: number, height: number): Object
- 参数
| 参数 | 类型 | 必填 | 默认 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ------ | ---- | ---- | ------------- |
| width | number | 是 | 0 | ImageData的宽度。 |
| height | number | 是 | 0 | ImageData的高度。 |
......@@ -1868,7 +1868,7 @@ createImageData(imageData: ImageData): Object
- 参数
| 参数 | 类型 | 必填 | 默认 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| --------- | ---------------------------------------- | ---- | ---- | ---------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 被复制的ImageData对象。 |
......@@ -1880,7 +1880,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
......@@ -1895,7 +1895,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ----------- | ------ | ---- | ------------ | ----------------------------- |
| imagedata | Object | 是 | null | 包含像素值的ImageData对象。 |
| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 |
| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 |
......@@ -2014,7 +2014,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | ---- | ---- | -------- |
| x0 | number | 是 | 0 | 起点的x轴坐标。 |
| y0 | number | 是 | 0 | 起点的y轴坐标。 |
| x1 | number | 是 | 0 | 终点的x轴坐标。 |
......@@ -2063,7 +2063,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ---- | ------ | ---- | ---- | ----------------- |
| x0 | number | 是 | 0 | 起始圆的x轴坐标。 |
| y0 | number | 是 | 0 | 起始圆的y轴坐标。 |
| r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 |
......
zh-cn/application-dev/ui/ui-ts-basic-components-button.md
浏览文件 @ a0060c97
......@@ -8,8 +8,9 @@ Button是按钮组件，通常用于响应用户的点击操作，如提交表
Button通过调用接口来创建，接口调用有以下两种形式：
- Button(options?: {type?: ButtonType, stateEffect?: boolean})
该接口用于创建包含子组件的按钮，其中type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。
- 创建包含子组件的按钮
`Button(options?: {type?: ButtonType, stateEffect?: boolean})`，该接口用于创建包含子组件的按钮，其中type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。
```
......@@ -23,8 +24,9 @@ Button通过调用接口来创建，接口调用有以下两种形式：
![zh-cn_image_0000001260555857](figures/zh-cn_image_0000001260555857.png)
- Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
该接口用于创建不包含子组件的按钮，其中label确定所创建的Button是否包含子组件。
- 创建不包含子组件的按钮
`Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })`，该接口用于创建不包含子组件的按钮，其中label确定所创建的Button是否包含子组件。
```
......
zh-cn/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @ a0060c97
......@@ -8,7 +8,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
接口的调用形式如下：
Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
`Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })`
通过参数direction定义弹性布局的布局方向，justifyContent定义弹性布局方向上的子组件对齐方式， alignContent定义与布局方向垂直的方向上的子组件对齐方式，wrap定义内容超过一行时是否换行。
## 弹性布局方向
......
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
浏览文件 @ a0060c97
......@@ -8,7 +8,7 @@
2. 给系统提供一种统一的定位标注，保证各模块各设备的布局一致性。
3. 给应用提供一种灵活的间距调整方法，满足特殊场景布局调整的可能性。
为实现栅格布局效果，声明式范式提供了GridContainer栅格容器组件，配合其子组件的通用属性useSizeType来实现栅格布局。
为实现栅格布局效果，声明式范式提供了[GridContainer](../reference/arkui-ts/)栅格容器组件，配合其子组件的通用属性useSizeType来实现栅格布局。
## 栅格系统
......@@ -32,11 +32,9 @@
系统以设备的水平宽度的屏幕密度像素值作为断点依据，根据当前设备水平宽度所在的断点范围，定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述，以及对应的默认总列数(columns)，边距（gutter)，间隔(gutter)定义如下：
<a id="grid_system_define">系统栅格定义</a>
| 设备水平宽度断点范围 | 设备宽度类型 | 描述 | columns | gutter | margin |
| -------- | -------- | -------- | -------- | -------- | -------- |
| ----------------------- | ------ | --------- | ------- | ------ | ------ |
| 0&lt;水平宽度&lt;320vp | XS | 最小宽度类型设备。 | 2 | 12vp | 12vp |
| 320vp&lt;=水平宽度&lt;600vp | SM | 小宽度类型设备。 | 4 | 24vp | 24vp |
| 600vp&lt;=水平宽度&lt;840vp | MD | 中等宽度类型设备。 | 8 | 24vp | 32vp |
......@@ -48,26 +46,28 @@
### 创建栅格容器
通过接口：GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。
通过接口`GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})`创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。
可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列于列间隔为10vp, 两侧边距为20vp：
```
GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
```
栅格容器不设置参数，或者sizeType设置为SizeType.Auto时使用默认的栅格系统定义，如：
- 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列于列间隔为10vp, 两侧边距为20vp：
```
GridContainer() {}
```
上述例子中，默认在在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列于列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列于列的间隔为24vp，两侧边距是32vp。
```
GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
```
栅格容器不设置参数，或者sizeType设置为SizeType.Auto时使用默认的栅格系统定义，如：
```
GridContainer() {}
```
也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如：
上述例子中，默认在在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列于列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列于列的间隔为24vp，两侧边距是32vp。
```
GridContainer({ sizeType: SizeType.SM) {
- 也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如：
```
GridContainer({ sizeType: SizeType.SM) {
Row() {
Text('1')
.useSizeType({
xs: { span: 2},
......@@ -76,9 +76,10 @@ GridContainer({ sizeType: SizeType.SM) {
lg: { span: 8, offset: 2 },
})
}
}
```
上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType.SM类型的栅格设置即占用3列，放置在第1列。
}
```
上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType.SM类型的栅格设置即占用3列，放置在第1列。
### 栅格容器内子组件的栅格设置
......@@ -97,7 +98,7 @@ GridContainer() {
}
}
```
其中sm: { span: 2, offset: 0 } 指在设备宽度类型为SM的设备上，Text组件占用3列，且放在栅格容器的第1列上。
其中`sm: { span: 2, offset: 0 } `指在设备宽度类型为SM的设备上，Text组件占用3列，且放在栅格容器的第1列上。
## 场景示例
使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。
......
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @ a0060c97
......@@ -38,15 +38,19 @@ listener.on('change', onPortrait)
[media-type] [and|not|only] [(media-feature)]
```
例如：
screen and (round-screen: true) // 当设备屏幕是圆形时条件成立
(max-height: 800) // 当高度小于800时条件成立
(height &lt;= 800) // 当高度小于800时条件成立
screen and (device-type: tv) or (resolution &lt; 2) // 包含多个媒体特征的多条件复杂语句查询
### 媒体类型(media-type)
| 类型 | 说明 |
| -------- | -------- |
| 类型 | 说明 |
| ------ | -------------- |
| screen | 按屏幕相关参数进行媒体查询。 |
......@@ -57,7 +61,7 @@ screen and (device-type: tv) or (resolution &lt; 2) // 包含多个媒体特征
**表1** 媒体逻辑操作符
| 类型 | 说明 |
| -------- | -------- |
| -------- | ---------------------------------------- |
| and | 将多个媒体特征（Media&nbsp;Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 |
| not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。<br/>例如：not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当应用高度小于50个像素单位或者大于600个像素单位时成立。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用not运算符时必须指定媒体类型。 |
| only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：<br/>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br/>老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用only时必须指定媒体类型。 |
......@@ -69,7 +73,7 @@ screen and (device-type: tv) or (resolution &lt; 2) // 包含多个媒体特征
**表2** 媒体逻辑范围操作符
| 类型 | 说明 |
| -------- | -------- |
| ----- | ---------------------------------------- |
| &lt;= | 小于等于，例如：screen&nbsp;and&nbsp;(50&nbsp;&lt;=&nbsp;height)。 |
| &gt;= | 大于等于，例如：screen&nbsp;and&nbsp;(600&nbsp;&gt;=&nbsp;height)。 |
| &lt; | 小于，例如：screen&nbsp;and&nbsp;(50&nbsp;&lt;&nbsp;height)。 |
......@@ -78,8 +82,8 @@ screen and (device-type: tv) or (resolution &lt; 2) // 包含多个媒体特征
### 媒体特征(media-feature)
| 类型 | 说明 |
| -------- | -------- |
| 类型 | 说明 |
| ----------------- | ---------------------------------------- |
| height | 应用页面显示区域的高度。 |
| min-height | 应用页面显示区域的最小高度。 |
| max-height | 应用页面显示区域的最大高度。 |
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或