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 a3f690f5f5e7a8fa685b33d0906939d319d1501c..4da279cc7c27cfb55c8f441f0d5906496351d128 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 @@ -17,28 +17,28 @@ Circle(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)外，还支持以下属性： -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| -------- | -------- | -------- | -------- | -------- | -| fill | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 | -| fillOpacity | number \| string \| [Resource](ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | -| stroke | [ResourceColor](ts-types.md) | Color.Black | 否 | 设置线条颜色。 | -| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | -| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | -| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | -| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | -| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | -| strokeOpacity | number \| string \| [Resource](ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | -| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | -| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | +| 参数名称 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| fill | [ResourceColor](ts-types.md) | 否 | 设置填充区域颜色。
默认值：Color.Black | +| fillOpacity | number \| string \| [Resource](ts-types.md#resource类型) | 否 | 设置填充区域透明度。
默认值：1 | +| stroke | [ResourceColor](ts-types.md) | 否 | 设置线条颜色。
默认值：Color.Black | +| strokeDashArray | Array<Length> | 否 | 设置线条间隙。
默认值：[] | +| strokeDashOffset | number \| string | 否 | 线条绘制起点的偏移量。
默认值：0 | +| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 否 | 设置线条端点绘制样式。
默认值：LineCapStyle.Butt | +| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | 否 | 设置线条拐角绘制样式。
默认值：LineJoinStyle.Miter | +| strokeMiterLimit | number \| string | 否 | 设置锐角绘制成斜角的极限值。
默认值：4 | +| strokeOpacity | number \| string \| [Resource](ts-types.md#resource类型) | 否 | 设置线条透明度。
默认值：1 | +| strokeWidth | Length | 否 | 设置线条宽度。
默认值：1 | +| antiAlias | boolean | 否 | 是否开启抗锯齿效果。
默认值：true | ## 示例 @@ -49,12 +49,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 6558f3733f669d7a05500e802d68d35c0715cacc..6825c18b27042263f7d1f3d585e51df7cc104c0c 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 @@ -50,12 +50,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 * 80 的矩形框中绘制一个椭圆 - 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 99d75d06f4f6976e0317af603f3103dbb7b11f8b..402ee63e599f2651bae58fa4a8db249117026a3c 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 @@ -59,11 +59,29 @@ Line(value?: {width?: string | number, height?: string | number}) @Component struct LineExample { build() { - Column() { - Line().startPoint([0, 0]).endPoint([50, 100]) - Line({ width: 50, height: 50 }).startPoint([0, 0]).endPoint([100, 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') + } } } ``` 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 372b056e1951d565b0bf50f566526cebcd26cf4e..5929aa6c23a2eab7ad9b5cf08584b635cebf41cc 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 @@ -67,24 +67,75 @@ commands支持的绘制命令如下： @Component struct PathExample { build() { - Column({ space: 5 }) { - Text('Straight line').fontSize(9).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(9).fontColor(0xCCCCCC).width('90%') - Flex({ justifyContent: FlexAlign.SpaceAround }) { - Path().width(100).height(100).commands('M150 0 L300 300 L0 300 Z') - Path().width(100).height(100).commands('M0 0 H300 V300 H0 Z') - 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 }) { - Path().width(100).height(100).commands("M0 300 S150 0 300 300 Z") - 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 f526142d55f80e3579842f0ae32d75fffdddd667..a19263b9c725dc2891057eef3a5fc6f6e1072390 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 @@ -60,16 +60,23 @@ Polygon(value?: {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 }) } } ``` 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 f9f3b2f766918fbc83dd81bc8733b7b12f68a5c5..0c0c496424bb46a68ba6b304ee6928a37e3d6f0f 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 @@ -59,14 +59,26 @@ Polyline(value?: {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%') } } ``` 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 108921f4a45dd147b2c2a8dfbbf630b5acfa66be..a7582c53b2ea630fda8cde04b89174273ccab123 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 @@ -58,19 +58,30 @@ Rect(value?: {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 502c54c40e5c3d5ffdee4834b6c654f8abd7d032..2e8274988c83aad1a3f964e4c78886336811f01b 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 @@ -48,7 +48,7 @@ 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 @@ -56,61 +56,169 @@ Shape(value?: PixelMap) @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 }) + } +} +```