ts-drawing-components-polyline.md 6.3 KB
Newer Older
Z
zengyawen 已提交
1 2 3 4
# Polyline<a name="ZH-CN_TOPIC_0000001192595150"></a>

>![](../../public_sys-resources/icon-note.gif) **说明:** 
>该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
Z
zengyawen 已提交
5 6 7

折线绘制组件。

Z
zengyawen 已提交
8 9 10 11
## 权限列表<a name="section53281531154915"></a>



Z
zengyawen 已提交
12 13 14 15 16 17 18 19 20 21
## 子组件<a name="section29916914716"></a>



## 接口<a name="section19864224475"></a>

Polyline\(options?: \{width: Lenght, height: Length\}\)

-   参数

Z
zengyawen 已提交
22
    <table><thead align="left"><tr><th class="cellrowborder" valign="top" width="15.47%" id="mcps1.1.6.1.1"><p>参数名</p>
Z
zengyawen 已提交
23
    </th>
Z
zengyawen 已提交
24
    <th class="cellrowborder" valign="top" width="17.22%" id="mcps1.1.6.1.2"><p>参数类型</p>
Z
zengyawen 已提交
25
    </th>
Z
zengyawen 已提交
26
    <th class="cellrowborder" valign="top" width="12.49%" id="mcps1.1.6.1.3"><p>必填</p>
Z
zengyawen 已提交
27
    </th>
Z
zengyawen 已提交
28
    <th class="cellrowborder" valign="top" width="18.6%" id="mcps1.1.6.1.4"><p>默认值</p>
Z
zengyawen 已提交
29
    </th>
Z
zengyawen 已提交
30
    <th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p>参数描述</p>
Z
zengyawen 已提交
31 32 33
    </th>
    </tr>
    </thead>
Z
zengyawen 已提交
34
    <tbody><tr><td class="cellrowborder" valign="top" width="15.47%" headers="mcps1.1.6.1.1 "><p>options</p>
Z
zengyawen 已提交
35
    </td>
Z
zengyawen 已提交
36
    <td class="cellrowborder" valign="top" width="17.22%" headers="mcps1.1.6.1.2 "><p>Object</p>
Z
zengyawen 已提交
37
    </td>
Z
zengyawen 已提交
38
    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p>否</p>
Z
zengyawen 已提交
39
    </td>
Z
zengyawen 已提交
40
    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p>-</p>
Z
zengyawen 已提交
41
    </td>
Z
zengyawen 已提交
42
    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p>见<a href="#li67915428493">options参数说明</a>。</p>
Z
zengyawen 已提交
43 44 45 46 47 48 49
    </td>
    </tr>
    </tbody>
    </table>

-   <a name="li67915428493"></a>options参数说明

Z
zengyawen 已提交
50
    <table><thead align="left"><tr><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p>参数名</p>
Z
zengyawen 已提交
51
    </th>
Z
zengyawen 已提交
52
    <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><p>参数类型</p>
Z
zengyawen 已提交
53
    </th>
Z
zengyawen 已提交
54
    <th class="cellrowborder" valign="top" width="14.499999999999998%" id="mcps1.1.6.1.3"><p>必填</p>
Z
zengyawen 已提交
55
    </th>
Z
zengyawen 已提交
56
    <th class="cellrowborder" valign="top" width="13.170000000000002%" id="mcps1.1.6.1.4"><p>默认值</p>
Z
zengyawen 已提交
57
    </th>
Z
zengyawen 已提交
58
    <th class="cellrowborder" valign="top" width="42.21%" id="mcps1.1.6.1.5"><p>参数描述</p>
Z
zengyawen 已提交
59 60 61
    </th>
    </tr>
    </thead>
Z
zengyawen 已提交
62
    <tbody><tr><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p>width</p>
Z
zengyawen 已提交
63
    </td>
Z
zengyawen 已提交
64
    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p>Length</p>
Z
zengyawen 已提交
65
    </td>
Z
zengyawen 已提交
66
    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p>是</p>
Z
zengyawen 已提交
67
    </td>
Z
zengyawen 已提交
68
    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p>-</p>
Z
zengyawen 已提交
69
    </td>
Z
zengyawen 已提交
70
    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p>宽度。</p>
Z
zengyawen 已提交
71 72
    </td>
    </tr>
Z
zengyawen 已提交
73
    <tr><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p>height</p>
Z
zengyawen 已提交
74
    </td>
Z
zengyawen 已提交
75
    <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><p>Length</p>
Z
zengyawen 已提交
76
    </td>
Z
zengyawen 已提交
77
    <td class="cellrowborder" valign="top" width="14.499999999999998%" headers="mcps1.1.6.1.3 "><p>是</p>
Z
zengyawen 已提交
78
    </td>
Z
zengyawen 已提交
79
    <td class="cellrowborder" valign="top" width="13.170000000000002%" headers="mcps1.1.6.1.4 "><p>-</p>
Z
zengyawen 已提交
80
    </td>
Z
zengyawen 已提交
81
    <td class="cellrowborder" valign="top" width="42.21%" headers="mcps1.1.6.1.5 "><p>高度。</p>
Z
zengyawen 已提交
82 83 84 85 86 87 88 89
    </td>
    </tr>
    </tbody>
    </table>


## 属性<a name="section1181110508478"></a>

Z
zengyawen 已提交
90
<table><thead align="left"><tr><th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.1"><p>参数名称</p>
Z
zengyawen 已提交
91
</th>
Z
zengyawen 已提交
92
<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.2"><p>参数类型</p>
Z
zengyawen 已提交
93
</th>
Z
zengyawen 已提交
94
<th class="cellrowborder" valign="top" width="20%" id="mcps1.1.6.1.3"><p>默认值</p>
Z
zengyawen 已提交
95
</th>
Z
zengyawen 已提交
96
<th class="cellrowborder" valign="top" width="16.12%" id="mcps1.1.6.1.4"><p>必填</p>
Z
zengyawen 已提交
97
</th>
Z
zengyawen 已提交
98
<th class="cellrowborder" valign="top" width="23.880000000000003%" id="mcps1.1.6.1.5"><p>参数描述</p>
Z
zengyawen 已提交
99 100 101
</th>
</tr>
</thead>
Z
zengyawen 已提交
102
<tbody><tr><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p>width</p>
Z
zengyawen 已提交
103
</td>
Z
zengyawen 已提交
104
<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p>Length</p>
Z
zengyawen 已提交
105
</td>
Z
zengyawen 已提交
106
<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p>0</p>
Z
zengyawen 已提交
107
</td>
Z
zengyawen 已提交
108
<td class="cellrowborder" valign="top" width="16.12%" headers="mcps1.1.6.1.4 "><p></p>
Z
zengyawen 已提交
109
</td>
Z
zengyawen 已提交
110
<td class="cellrowborder" valign="top" width="23.880000000000003%" headers="mcps1.1.6.1.5 "><p>折线所在矩形的宽度。</p>
Z
zengyawen 已提交
111 112
</td>
</tr>
Z
zengyawen 已提交
113
<tr><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p>height</p>
Z
zengyawen 已提交
114
</td>
Z
zengyawen 已提交
115
<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p>Length</p>
Z
zengyawen 已提交
116
</td>
Z
zengyawen 已提交
117
<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p>0</p>
Z
zengyawen 已提交
118
</td>
Z
zengyawen 已提交
119
<td class="cellrowborder" valign="top" width="16.12%" headers="mcps1.1.6.1.4 "><p></p>
Z
zengyawen 已提交
120
</td>
Z
zengyawen 已提交
121
<td class="cellrowborder" valign="top" width="23.880000000000003%" headers="mcps1.1.6.1.5 "><p>折线所在矩形的高度。</p>
Z
zengyawen 已提交
122 123
</td>
</tr>
Z
zengyawen 已提交
124
<tr><td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.1 "><p>points</p>
Z
zengyawen 已提交
125
</td>
Z
zengyawen 已提交
126
<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.2 "><p>Array<span>&lt;</span><span>Point</span><span>&gt;</span></p>
Z
zengyawen 已提交
127
</td>
Z
zengyawen 已提交
128
<td class="cellrowborder" valign="top" width="20%" headers="mcps1.1.6.1.3 "><p>-</p>
Z
zengyawen 已提交
129
</td>
Z
zengyawen 已提交
130
<td class="cellrowborder" valign="top" width="16.12%" headers="mcps1.1.6.1.4 "><p></p>
Z
zengyawen 已提交
131
</td>
Z
zengyawen 已提交
132
<td class="cellrowborder" valign="top" width="23.880000000000003%" headers="mcps1.1.6.1.5 "><p>折线经过坐标点列表。</p>
Z
zengyawen 已提交
133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
</td>
</tr>
</tbody>
</table>

## 示例<a name="section4459736105512"></a>

```
@Entry
@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 })
  }
}
```

![](figures/polyline.gif)