Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“b861b626720154d3592a83d400855b2aa408df69”上不存在“...application-dev/reference/arkui-js/js-framework-syntax.md”
未验证 提交 059ddc4b 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!10265 绘制组件示例图整改挑单到3.1release 

Merge pull request !10265 from 田雨/OpenHarmony-3.1-Release
上级 33001e88 0804d89b
隐藏空白更改
内联 并排
Showing with 350 addition and 125 deletion
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
浏览文件 @ 059ddc4b
......@@ -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%')
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
浏览文件 @ 059ddc4b
......@@ -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%')
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
浏览文件 @ 059ddc4b
......@@ -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)
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @ 059ddc4b
......@@ -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 })
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
浏览文件 @ 059ddc4b
......@@ -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)
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
浏览文件 @ 059ddc4b
......@@ -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)
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
浏览文件 @ 059ddc4b
......@@ -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 })
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
浏览文件 @ 059ddc4b
......@@ -26,9 +26,9 @@
Shape(value?: PixelMap)
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | PixelMap | 否 | - | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 |
| value | PixelMap | 否 | - | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 |
## 属性
......@@ -51,70 +51,188 @@ Shape(value?: PixelMap)
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
| mesh<sup>8+</sup> | Array&lt;number&gt;,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<number> = [];
@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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或