diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image1_0000001184628104.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image1_0000001184628104.png new file mode 100644 index 0000000000000000000000000000000000000000..80879c86fff48d1ed267c93bcc35f99e489103e0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image1_0000001184628104.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image2_0000001184628104.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image2_0000001184628104.png new file mode 100644 index 0000000000000000000000000000000000000000..67894b933c7d1470582a827bbc1aec5fb123e1f2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image2_0000001184628104.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104394.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104394.png index b85ac72fcec0f4b2eb752307d4abe05ef4795ef2..3d9d5916e4dd08a6190848d402dcd1b6540ec613 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104394.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104394.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264386.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264386.png index ad2c71e4bcc008c0d286a05b2e969103aa06236d..2ff75f958a860f1ed483d799e2ef6431fbce5a74 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264386.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264386.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582856.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582856.gif deleted file mode 100644 index 78e7436bf654889a3a04e9d2e5dd53f5fb562906..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582856.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582856.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582856.png new file mode 100644 index 0000000000000000000000000000000000000000..837f6723b62e7402ba6e240372bd3de88e2ff0f6 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174582856.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001184628104.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001184628104.png index e766d36181c3d1fbd96bb0acab1b3eb670e14cd4..8f23571d332303deff7085c23f28fbe759beb16f 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001184628104.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001184628104.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744185.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744185.gif deleted file mode 100644 index 49167ceae5eb50a96334c73496ed534d25bbecf4..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744185.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744185.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744185.png new file mode 100644 index 0000000000000000000000000000000000000000..0e103f4f2200e361cc966b8bed337c8a73380cfd Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744185.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744191.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744191.png index d34ba19a667f40c8dc3b4e668095bda1bd4868aa..c2aeef3f178867e832601aae0b723ae1ddf3db49 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744191.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744191.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744193.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744193.png index b7c6998d7f55a75562fbf709aa84b4bd12922ae6..5855095851b92058f270d69a46546db43ec974b8 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744193.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744193.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.jpg b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.jpg deleted file mode 100644 index e3d3e1023746c03c9ad426328de0114321ac3f66..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.jpg and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.png new file mode 100644 index 0000000000000000000000000000000000000000..8e1eb1e09de7fe545f80f7a0601f63843369375a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219982725.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md index c638706d9fae260e9485cab1b6d48e5d8e665d60..528a1e9c5cd23a373897f747fe4e6496ccae7938 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md @@ -22,10 +22,10 @@ Circle(options?: {width?: string | number, height?: string | number}) ## 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | width | string \| number | 否 | 0 | 宽度。 | - | height | string \| number | 否 | 0 | 高度。 | +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| width | string \| number | 否 | 0 | 宽度。 | +| height | string \| number | 否 | 0 | 高度。 | ## 属性 @@ -55,12 +55,18 @@ Circle(options?: {width?: string | number, height?: string | number}) @Component struct CircleExample { build() { - Flex({ justifyContent: FlexAlign.SpaceAround }) { + Column({ space: 10 }) { // 绘制一个直径为150的圆 Circle({ width: 150, height: 150 }) - // 绘制一个直径为150的圆 - Circle().width(150).height(150) - }.width('100%').margin({ top: 5 }) + // 绘制一个直径为150、线条为红色虚线的圆环（宽高设置不一致时以短边为直径） + Circle() + .width(150) + .height(200) + .fillOpacity(0) + .strokeWidth(3) + .stroke(Color.Red) + .strokeDashArray([1, 2]) + }.width('100%') } } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md index 2fc055cb80c7cdf41160d15bd6b6b1fe1298e0ed..e4f4a98f6b16c09f55cc4a8122c1ed37d60c9b18 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md @@ -23,10 +23,10 @@ ellipse(options?: {width?: string | number, height?: string | number}) - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | - | width | string \| number | 否 | 0 | 宽度。 | - | height | string \| number | 否 | 0 | 高度。 | + | width | string \| number | 否 | 0 | 宽度。 | + | height | string \| number | 否 | 0 | 高度。 | ## 属性 @@ -56,12 +56,17 @@ ellipse(options?: {width?: string | number, height?: string | number}) @Component struct EllipseExample { build() { - Flex({ justifyContent: FlexAlign.SpaceAround }) { - // 在一个 150 * 80 的矩形框中绘制一个椭圆 + Column({ space: 10 }) { + // 绘制一个 150 * 80 的椭圆 Ellipse({ width: 150, height: 80 }) - // 在一个 150 * 70 的矩形框中绘制一个椭圆 - Ellipse().width(150).height(80) - }.width('100%').margin({ top: 5 }) + // 绘制一个 150 * 100 、线条为蓝色的椭圆环 + Ellipse() + .width(150) + .height(100) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + }.width('100%') } } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md index 4ec9dcfc8792e81be58f0c7fec06501d607c7828..9c95e30148689074566d2753d95ac4f17b31b527 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md @@ -22,17 +22,17 @@ Line(options?: {width?: string | number, height?: string | number}) - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | - | width | string \| number | 否 | 0 | 宽度。 | - | height | string \| number | 否 | 0 | 高度。 | + | width | string \| number | 否 | 0 | 宽度。 | + | height | string \| number | 否 | 0 | 高度。 | ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | | startPoint | Array | [0, 0] | 是 | 直线起点坐标点(相对坐标)。 | | endPoint | Array | [0, 0] | 是 | 直线终点坐标点(相对坐标)。 | @@ -57,12 +57,31 @@ Line(options?: {width?: string | number, height?: string | number}) @Component struct LineExample { build() { - Column() { - Line({ width: 50, height: 100 }).startPoint([0, 0]).endPoint([50, 100]) - Line().width(200).height(200).startPoint([50, 50]).endPoint([150, 150]) - }.margin({ top: 5 }) + Column({ space: 10 }) { + // 线条绘制的起止点坐标均是相对于Line组件本身绘制区域的坐标 + Line() + .startPoint([0, 0]) + .endPoint([50, 100]) + .backgroundColor('#F5F5F5') + Line() + .width(200) + .height(200) + .startPoint([50, 50]) + .endPoint([150, 150]) + .strokeWidth(5) + .stroke(Color.Orange) + .strokeOpacity(0.5) + .backgroundColor('#F5F5F5') + // 当坐标点设置的值超出Line组件的宽高范围时，线条会画出组件绘制区域 + Line({ width: 50, height: 50 }) + .startPoint([0, 0]) + .endPoint([100, 100]) + .strokeWidth(3) + .strokeDashArray([1, 3]) + .backgroundColor('#F5F5F5') + } } } ``` -![zh-cn_image_0000001219982725](figures/zh-cn_image_0000001219982725.jpg) +![zh-cn_image_0000001219982725](figures/zh-cn_image_0000001219982725.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md index ccc28784eadcd7dbb21c9f49701a19d04455bd95..e68971388ea5068f906f68fb3a60a1846e69ed82 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md @@ -72,28 +72,75 @@ commands支持的绘制命令如下： @Component struct PathExample { build() { - Column({ space: 5 }) { - Text('Straight line').fontSize(9).fontColor(0xCCCCCC).width('90%') - Path().width(300).height(10).commands('M0 0 L900 0').stroke(Color.Black).strokeWidth(3) - - Text('Straight line graph').fontSize(9).fontColor(0xCCCCCC).width('90%') - Flex({ justifyContent: FlexAlign.SpaceAround }) { - // 先后执行MoveTo(150, 0), LineTo(300, 300), LineTo(0, 300), ClosePath() - Path().width(100).height(100).commands('M150 0 L300 300 L0 300 Z') - // 先后执行MoveTo(0, 0), HorizontalLineto(300), VerticalLineto(300), HorizontalLineto(0), ClosePath() - Path().width(100).height(100).commands('M0 0 H300 V300 H0 Z') - // 先后执行MoveTo(150, 0), LineTo(0, 150), LineTo(60, 300), LineTo(240, 300), LineTo(300, 150), ClosePath() - Path().width(100).height(100).commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z') + Column({ space: 10 }) { + Text('Straight line') + .fontSize(11) + .fontColor(0xCCCCCC) + .width('90%') + // 绘制一条长900px，宽3vp的直线 + Path() + .width(300) + .height(10) + .commands('M0 0 L900 0') + .stroke(Color.Black) + .strokeWidth(3) + + Text('Straight line graph') + .fontSize(11) + .fontColor(0xCCCCCC) + .width('90%') + // 绘制直线图形 + Row({ space: 20 }) { + Path() + .width(100) + .height(100) + .commands('M150 0 L300 300 L0 300 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + Path() + .width(100) + .height(100) + .commands('M0 0 H300 V300 H0 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + Path() + .width(100) + .height(100) + .commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) }.width('100%') - Text('Curve graphics').fontSize(9).fontColor(0xCCCCCC).width('90%') - Flex({ justifyContent: FlexAlign.SpaceAround }) { - // 先后执行MoveTo(0, 300),(150, 0)(300, 300)两点之间画曲线, ClosePath() - Path().width(100).height(100).commands("M0 300 S150 0 300 300 Z") - // 先后执行MoveTo(0, 150),(0, 150)(150, 0)(300, 150)三点之间依次画曲线, LineTo(150, 300),ClosePath() - Path().width(100).height(100).commands('M0 150 C0 150 150 0 300 150 L150 300 Z') + Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%') + // 绘制弧线图形 + Row({ space: 20 }) { + Path() + .width(100) + .height(100) + .commands("M0 300 S150 0 300 300 Z") + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + Path() + .width(100) + .height(100) + .commands('M0 150 C0 150 150 0 300 150 L150 300 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + Path() + .width(100) + .height(100) + .commands('M0 200 A30 20 20 0 0 250 200 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) } - }.width('100%').margin({ top: 5 }) + }.width('100%') + .margin({ top: 5 }) } } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md index 40438c691979ad9109b11c72ff5edbe1009aad07..949c9173d9901dbd85d3e8525949bc084e97d5ef 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md @@ -22,17 +22,17 @@ Polygon(options?: {width?: string | number, height?: string | number}) - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | - | width | string \| number | 否 | 0 | 宽度。 | - | height | string \| number | 否 | 0 | 高度。 | + | width | string \| number | 否 | 0 | 宽度。 | + | height | string \| number | 否 | 0 | 高度。 | ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | | points | Array<Point> | [] | 否 | 多边形的顶点坐标列表。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | @@ -64,18 +64,25 @@ Polygon(options?: {width?: string | number, height?: string | number}) @Component struct PolygonExample { build() { - Column({ space: 5 }) { - Flex({ justifyContent: FlexAlign.SpaceAround }) { - // 在 100 * 100 的矩形框中绘制一个三角形，起点(0, 0)，经过(50, 100)，终点(100, 0) - Polygon({ width: 100, height: 100 }).points([[0, 0], [50, 100], [100, 0]]) - // 在 100 * 100 的矩形框中绘制一个四边形，起点(0, 0)，经过(0, 100)和(100, 100)，终点(100, 0) - Polygon().width(100).height(100).points([[0, 0], [0, 100], [100, 100], [100, 0]]) - // 在 100 * 100 的矩形框中绘制一个五边形，起点(50, 0)，依次经过(0, 50)、(20, 100)和(80, 100)，终点(100, 50) - Polygon().width(100).height(100).points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) - }.width('100%') - }.margin({ top: 5 }) + Column({ space: 10 }) { + // 在 100 * 100 的矩形框中绘制一个三角形，起点(0, 0)，经过(50, 100)，终点(100, 0) + Polygon({ width: 100, height: 100 }) + .points([[0, 0], [50, 100], [100, 0]]) + .fill(Color.Green) + // 在 100 * 100 的矩形框中绘制一个四边形，起点(0, 0)，经过(0, 100)和(100, 100)，终点(100, 0) + Polygon().width(100).height(100) + .points([[0, 0], [0, 100], [100, 100], [100, 0]]) + .fillOpacity(0) + .strokeWidth(5) + .stroke(Color.Blue) + // 在 100 * 100 的矩形框中绘制一个五边形，起点(50, 0)，依次经过(0, 50)、(20, 100)和(80, 100)，终点(100, 50) + Polygon().width(100).height(100) + .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) + .fill(Color.Red) + .fillOpacity(0.6) + }.width('100%').margin({ top: 10 }) } } ``` -![zh-cn_image_0000001174582856](figures/zh-cn_image_0000001174582856.gif) +![zh-cn_image_0000001174582856](figures/zh-cn_image_0000001174582856.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md index 75da55722969a84c2c659837c2da3b200b743de0..08178a33fd35a544af9044698c035925694b2fae 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md @@ -23,19 +23,19 @@ Polyline(options?: {width?: string | number, height?: string | number}) - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | - | width | string \| number | 否 | 0 | 宽度。 | - | height | string \| number | 否 | 0 | 高度。 | + | width | string \| number | 否 | 0 | 宽度。 | + | height | string \| number | 否 | 0 | 高度。 | ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | -| points | Array<Point> | [] | 否 | 折线经过坐标点列表。 | +| points | Array<Point> | [] | 否 | 折线经过坐标点列表。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置线条颜色。 | @@ -65,16 +65,28 @@ Polyline(options?: {width?: string | number, height?: string | number}) @Component struct PolylineExample { build() { - Column({ space: 5 }) { - Flex({ justifyContent: FlexAlign.SpaceAround }) { - // 在 100 * 100 的矩形框中绘制一段折线，起点(0, 0)，经过(20,60)，到达终点(100, 100) - Polyline({ width: 100, height: 100 }).points([[0, 0], [20, 60], [100, 100]]) - // 在 100 * 100 的矩形框中绘制一段折线，起点(0, 0)，经过(0,100)，到达终点(100, 100) - Polyline().width(100).height(100).points([[0, 0], [0, 100], [100, 100]]) - }.width('100%') - }.margin({ top: 5 }) + Column({ space: 10 }) { + // 在 100 * 100 的矩形框中绘制一段折线，起点(0, 0)，经过(20,60)，到达终点(100, 100) + Polyline({ width: 100, height: 100 }) + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + // 在 100 * 100 的矩形框中绘制一段折线，起点(20, 0)，经过(0,100)，到达终点(100, 90) + Polyline() + .width(100) + .height(100) + .fillOpacity(0) + .stroke(Color.Red) + .strokeWidth(8) + .points([[20, 0], [0, 100], [100, 90]]) + // 设置折线拐角处为圆弧 + .strokeLineJoin(LineJoinStyle.Round) + // 设置折线两端为半圆 + .strokeLineCap(LineCapStyle.Round) + }.width('100%') } } ``` -![zh-cn_image_0000001219744185](figures/zh-cn_image_0000001219744185.gif) +![zh-cn_image_0000001219744185](figures/zh-cn_image_0000001219744185.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md index 41bf4dabafe90bfefb6739d325dcb372097d39f8..bdac39b9f40fdcc41573fc0274b848816b9682b8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md @@ -24,23 +24,23 @@ Rect(options?: {width?: string | number,height?: string | number,radius?: string {width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number}) - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | - | width | string \| number | 否 | 0 | 宽度。 | - | height | string \| number | 否 | 0 | 高度。 | - | radius | string \| number \| Array<string \| number> | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 | - | radiusWidth | string \| number | 否 | 0 | 圆角宽度。 | - | radiusHeight | string \| number | 否 | 0 | 圆角高度。 | + | width | string \| number | 否 | 0 | 宽度。 | + | height | string \| number | 否 | 0 | 高度。 | + | radius | string \| number \| Array<string \| number> | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 | + | radiusWidth | string \| number | 否 | 0 | 圆角宽度。 | + | radiusHeight | string \| number | 否 | 0 | 圆角高度。 | ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | +| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | -| radiusWidth | string \| number | 0 | 否 | 圆角的宽度，仅设置宽时宽高一致。 | -| radiusHeight | string \| number | 0 | 否 | 圆角的高度，仅设置高时宽高一致。 | +| radiusWidth | string \| number | 0 | 否 | 圆角的宽度，仅设置宽时宽高一致。 | +| radiusHeight | string \| number | 0 | 否 | 圆角的高度，仅设置高时宽高一致。 | | radius | string \| number \| Array<string \| number> | 0 | 否 | 圆角半径大小。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | @@ -63,19 +63,30 @@ Rect(options?: {width?: string | number,height?: string | number,radius?: string @Component struct RectExample { build() { - Column({ space: 5 }) { - Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%') - // 绘制90% * 50矩形 + Column({ space: 10 }) { + Text('normal').fontSize(11).fontColor(0xCCCCCC).width('90%') + // 绘制90% * 50的矩形 Rect({ width: '90%', height: 50 }) - // 绘制90% * 50矩形 - Rect().width('90%').height(50) - - Text('with rounded corners').fontSize(9).fontColor(0xCCCCCC).width('90%') - // 绘制90% * 50矩形, 圆角宽高20 - Rect({ width: '90%', height: 50 }).radiusHeight(20).radiusWidth(20) - // 绘制90% * 50矩形, 圆角宽高20 - Rect({ width: '90%', height: 50 }).radius(20) - }.width('100%').margin({ top: 5 }) + .fill(Color.Pink) + // 绘制90% * 50的矩形框 + Rect() + .width('90%') + .height(50) + .fillOpacity(0) + .stroke(Color.Red) + .strokeWidth(3) + + Text('with rounded corners').fontSize(11).fontColor(0xCCCCCC).width('90%') + // 绘制90% * 80的矩形, 圆角宽高分别为40、20 + Rect({ width: '90%', height: 80 }) + .radiusHeight(20) + .radiusWidth(40) + .fill(Color.Pink) + // 绘制90% * 80的矩形, 圆角宽高为20 + Rect({ width: '90%', height: 80 }) + .radius(20) + .fill(Color.Pink) + }.width('100%').margin({ top: 10 }) } } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md index 233d1cb8b0cbb29d8e5b4c8fe14f312887dba580..56daced9b08fafc401b9c2af9beaceca213debff 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md @@ -26,9 +26,9 @@ Shape(value?: PixelMap) - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | - | value | PixelMap | 否 | - | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 | + | value | PixelMap | 否 | - | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 | ## 属性 @@ -51,70 +51,188 @@ Shape(value?: PixelMap) | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | mesh8+ | Array<number>,number,number | [],0,0 | 否 | 设置mesh效果。第一个参数为长度（column + 1）* （row + 1）* 2的数组，它记录了扭曲后的位图各个顶点位置，第二个参数为mesh矩阵列数column，第三个参数为mesh矩阵行数row。 | - ## 示例 +### 示例1 + ```ts // xxx.ets @Entry @Component struct ShapeExample { build() { - Column({ space: 5 }) { - Text('basic').fontSize(30).fontColor(0xCCCCCC).width(320) - // 在Shape的(-2, -2)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) - // 在Shape的(-2, 58)点绘制一个 300 * 50 带边框的椭圆,颜色0x317Af7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) - // 在Shape的(-2, 118)点绘制一个 300 * 10 线段,颜色0x317Af7,边框颜色黑色,宽度4,间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) + Column({ space: 10 }) { + Text('basic').fontSize(11).fontColor(0xCCCCCC).width(320) + // 在Shape的(-2, -2)点绘制一个 300 * 50 带边框的矩形,颜色0x317AF7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启) + // 在Shape的(-2, 58)点绘制一个 300 * 50 带边框的椭圆,颜色0x317AF7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启) + // 在Shape的(-2, 118)点绘制一个 300 * 10 直线路径,颜色0x317AF7,边框颜色黑色,宽度4,间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启) Shape() { Rect().width(300).height(50) Ellipse().width(300).height(50).offset({ x: 0, y: 60 }) Path().width(300).height(10).commands('M0 0 L900 0').offset({ x: 0, y: 120 }) } .viewPort({ x: -2, y: -2, width: 304, height: 130 }) - .fill(0x317Af7).stroke(Color.Black).strokeWidth(4) - .strokeDashArray([20]).strokeDashOffset(10).strokeLineCap(LineCapStyle.Round) - .strokeLineJoin(LineJoinStyle.Round).antiAlias(true) - // 在Shape的(-1, -1)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框颜色黑色,边框宽度2 + .fill(0x317AF7) + .stroke(Color.Black) + .strokeWidth(4) + .strokeDashArray([20]) + .strokeDashOffset(10) + .strokeLineCap(LineCapStyle.Round) + .strokeLineJoin(LineJoinStyle.Round) + .antiAlias(true) + // 分别在Shape的(0, 0)、(-5, -5)点绘制一个 300 * 50 带边框的矩形,可以看出之所以将视口的起始位置坐标设为负值是因为绘制的起点默认为线宽的中点位置，因此要让边框完全显示则需要让视口偏移半个线宽 Shape() { Rect().width(300).height(50) - }.viewPort({ x: -1, y: -1, width: 302, height: 52 }).fill(0x317Af7).stroke(Color.Black).strokeWidth(2) + } + .viewPort({ x: 0, y: 0, width: 320, height: 70 }) + .fill(0x317AF7) + .stroke(Color.Black) + .strokeWidth(10) - Text('border').fontSize(30).fontColor(0xCCCCCC).width(320).margin({top:30}) - // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20 Shape() { - Path().width(300).height(10).commands('M0 0 L900 0') - }.viewPort({ x: 0, y: -5, width: 300, height: 20 }).stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]) - // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20,向左偏移10 + Rect().width(300).height(50) + } + .viewPort({ x: -5, y: -5, width: 320, height: 70 }) + .fill(0x317AF7) + .stroke(Color.Black) + .strokeWidth(10) + + Text('path').fontSize(11).fontColor(0xCCCCCC).width(320) + // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙20 Shape() { Path().width(300).height(10).commands('M0 0 L900 0') } .viewPort({ x: 0, y: -5, width: 300, height: 20 }) - .stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]).strokeDashOffset(10) - // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,透明度0.5 + .stroke(0xEE8443) + .strokeWidth(10) + .strokeDashArray([20]) + // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙20,向左偏移10 Shape() { Path().width(300).height(10).commands('M0 0 L900 0') - }.viewPort({ x: 0, y: -5, width: 300, height: 20 }).stroke(0xEE8443).strokeWidth(10).strokeOpacity(0.5) - // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20,向左偏移10,尖端样式圆角 + } + .viewPort({ x: 0, y: -5, width: 300, height: 20 }) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeDashArray([20]) + .strokeDashOffset(10) + // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,透明度0.5 Shape() { Path().width(300).height(10).commands('M0 0 L900 0') } .viewPort({ x: 0, y: -5, width: 300, height: 20 }) - .stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]).strokeLineCap(LineCapStyle.Round) - // 在Shape的(-5, -5)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框宽度10,边框颜色0xEE8443,拐角样式圆角 + .stroke(0xEE8443) + .strokeWidth(10) + .strokeOpacity(0.5) + // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙20,线条两端样式为半圆 Shape() { - Rect().width(300).height(100) + Path().width(300).height(10).commands('M0 0 L900 0') } - .viewPort({ x: -5, y: -5, width: 310, height: 120 }) - .fill(0x317Af7).stroke(0xEE8443).strokeWidth(10).strokeLineJoin(LineJoinStyle.Round) + .viewPort({ x: 0, y: -5, width: 300, height: 20 }) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeDashArray([20]) + .strokeLineCap(LineCapStyle.Round) + // 在Shape的(-80, -5)点绘制一个封闭路径,颜色0x317AF7,线条宽度10,边框颜色0xEE8443,拐角样式锐角（默认值） Shape() { - Path().width(300).height(60).commands('M0 0 L400 0 L400 200 Z') + Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z') } - .viewPort({ x: -80, y: -5, width: 310, height: 100 }) - .fill(0x317Af7).stroke(0xEE8443).strokeWidth(10) - .strokeLineJoin(LineJoinStyle.Miter).strokeMiterLimit(5) + .viewPort({ x: -80, y: -5, width: 310, height: 90 }) + .fill(0x317AF7) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeLineJoin(LineJoinStyle.Miter) + .strokeMiterLimit(5) }.width('100%').margin({ top: 15 }) } } ``` ![zh-cn_image_0000001184628104](figures/zh-cn_image_0000001184628104.png) + +### 示例2 + +```ts +// xxx.ets +@Entry +@Component +struct ShapeMeshExample { + @State columnVal: number = 0; + @State rowVal: number = 0; + @State count: number = 0; + @State verts: Array = []; + @State shapeWidth: number = 600; + @State shapeHeight: number = 600; + + build() { + Column() { + Shape() { + Rect() + .width('250px') + .height('250px') + .radiusWidth('10px') + .radiusHeight('10px') + .stroke('10px') + .margin({ left: '10px', top: '10px' }) + .strokeWidth('10px') + .fill(Color.Blue) + Rect() + .width('250px') + .height('250px') + .radiusWidth('10px') + .radiusHeight('10px') + .stroke('10px') + .margin({ left: '270px', top: '10px' }) + .strokeWidth('10px') + .fill(Color.Red) + } + .mesh(this.verts, this.columnVal, this.rowVal) + .width(this.shapeWidth + 'px') + .height(this.shapeHeight + 'px') + // 手指触摸Shape组件时会显示mesh扭曲效果 + .onTouch((event: TouchEvent) => { + var touchX = event.touches[0].x * 2; + var touchY = event.touches[0].y * 2; + this.columnVal = 20; + this.rowVal = 20; + this.count = (this.columnVal + 1) * (this.rowVal + 1); + var orig = [this.count * 2]; + var index = 0; + for (var i = 0; i <= this.rowVal; i++) { + var fy = this.shapeWidth * i / this.rowVal; + for (var j = 0; j <= this.columnVal; j++) { + var fx = this.shapeWidth * j / this.columnVal; + orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx; + orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy; + index++; + } + } + for (var k = 0; k < this.count * 2; k += 2) { + var dx = touchX - orig[k + 0]; + var dy = touchY - orig[k + 1]; + var dd = dx * dx + dy * dy; + var d = Math.sqrt(dd); + var pull = 80000 / (dd * d); + if (pull >= 1) { + this.verts[k + 0] = touchX; + this.verts[k + 1] = touchY; + } else { + this.verts[k + 0] = orig[k + 0] + dx * pull; + this.verts[k + 1] = orig[k + 1] + dy * pull; + } + } + }) + } + .width('600px') + .height('600px') + .border({ width: 3, color: Color.Black }) + } +} +``` + +示意图： + +![zh-cn_image1_0000001184628104](figures/zh-cn_image1_0000001184628104.png) + +手指触摸Shape组件时会显示mesh扭曲效果： + +![zh-cn_image2_0000001184628104](figures/zh-cn_image2_0000001184628104.png) \ No newline at end of file