1# Path2D对象
2
3
4路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。具体请参考[Path2D对象](../reference/apis-arkui/arkui-js/js-components-canvas-path2d.md)。
5
6
7## 画线段
8
9创建Path2D，使用多条线段组合图形。
10
11```html
12<!-- xxx.hml -->
13<div class="container">
14  <canvas ref="canvas"></canvas>
15</div>
16```
17
18```css
19/* xxx.css */
20.container {
21    flex-direction: column;
22    background-color: #F1F3F5;
23    align-items: center;
24    justify-content: center;
25    width: 100%;
26    height: 100%;
27}
28
29canvas {
30    width: 600px;
31    height: 600px;
32    background-color: #fdfdfd;
33    border: 5px solid red;
34}
35```
36
37```js
38// xxx.js
39import promptAction from '@ohos.promptAction';
40
41export default {
42    onShow() {
43        let ctx = this.$refs.canvas.getContext('2d', {
44            antialias: true
45        });
46        let path = ctx.createPath2D();
47        // 房顶
48        path.moveTo(10, 300);
49        path.lineTo(210, 100);
50        path.lineTo(410, 300);
51        // 屋子
52        path.moveTo(10, 300);
53        path.lineTo(410, 300);
54        path.lineTo(410, 600);
55        path.lineTo(10, 600);
56        path.closePath();
57        // 窗子
58        path.moveTo(50, 450);
59        path.bezierCurveTo(70, 350, 130, 350, 150, 450);
60        path.closePath();
61        // 门
62        path.moveTo(250, 450);
63        path.rect(250, 450, 100, 600);
64        path.closePath();
65        // 烟囱
66        path.moveTo(365, 250);
67        path.ellipse(310, 215, 30, 130, 0, Math.PI * 0.04, Math.PI * 1.1, 1);
68        // 树
69        path.moveTo(485, 450);
70        path.quadraticCurveTo(510, 500, 485, 600);
71        path.moveTo(550, 450);
72        path.quadraticCurveTo(525, 500, 550, 600);
73        path.moveTo(600, 535);
74        path.arc(520, 450, 85, 0, 6);
75        ctx.stroke(path);
76    }
77}
78```
79
80
81![zh-cn_image_0000001177930616](figures/zh-cn_image_0000001177930616.png)
82
83
84## 画图形
85
86先使用createPath2D创建出路径对象，只对path1路径进行描边，所以画布上就只会出现path1的路径图形。点击text组件触发addPath方法会把path2路径对象当参数传入path1中，再对path1对象进行描边（stroke）操作后画布出现path1和path2两个图形。点击change文本改变setTransform属性值为setTransform(2, 0.1, 0.1, 2, 0,0)，图形变大并向左倾斜。
87
88
89```html
90<!-- xxx.hml -->
91<div class="container">
92    <canvas ref="canvas"></canvas>
93    <div class="content">
94        <text onclick="addPath">{{ isAdd }}</text>
95        <text onclick="setTransform">{{ textName }}</text>
96    </div>
97</div>
98```
99
100
101```css
102/* xxx.css */
103.container {
104    flex-direction: column;
105    background-color: #F1F3F5;
106    align-items: center;
107    justify-content: center;
108    width: 100%;
109    height: 100%;
110}
111
112canvas {
113    width: 600px;
114    height: 600px;
115    background-color: #fdfdfd;
116    border: 5px solid red;
117}
118
119.content {
120    width: 80%;
121    margin-top: 50px;
122    margin-bottom: 50px;
123    display: flex;
124    flex-wrap: wrap;
125    justify-content: space-around;
126}
127
128text {
129    width: 150px;
130    height: 80px;
131    color: white;
132    border-radius: 20px;
133    text-align: center;
134    background-color: #6060e7;
135    margin-bottom: 30px;
136}
137```
138
139
140```js
141// xxx.js
142import promptAction from '@ohos.promptAction';
143
144export default {
145    data: {
146        ctx: null,
147        path1: null,
148        path2: null,
149        path3: null,
150        isAdd: "addPath2",
151        isChange: true,
152        textName: 'change'
153    },
154    onShow() {
155        this.ctx = this.$refs.canvas.getContext('2d', {
156            antialias: true
157        });
158        this.path1 = this.ctx.createPath2D();
159        // 正方形
160        this.path1.moveTo(200, 200);
161        this.path1.lineTo(400, 200);
162        this.path1.lineTo(400, 400);
163        this.path1.lineTo(200, 400);
164        this.path1.closePath();
165        this.path2 = this.ctx.createPath2D();
166        // 圆形
167        this.path2.arc(300, 300, 75, 0, 6.28);
168        this.ctx.stroke(this.path1);
169    },
170    addPath() {
171        if (this.isAdd == "addPath2") {
172            // 删除指定指定区域的绘制内容
173            this.ctx.clearRect(0, 0, 600, 600);
174            this.ctx.beginPath();
175            // 将另一个的路径添加到当前路径对象中
176            this.path2.addPath(this.path1);
177            this.ctx.stroke(this.path2);
178            this.isAdd = "clearPath2";
179        } else {
180            this.ctx.clearRect(0, 0, 600, 600);
181            this.ctx.stroke(this.path1);
182            this.isAdd = "addPath2";
183        }
184    },
185    setTransform() {
186        if (this.isChange) {
187            this.ctx.clearRect(0, 0, 600, 600);
188            this.path3 = this.ctx.createPath2D();
189            this.path3.arc(150, 150, 100, 0, 6.28);
190            // 重置现有的变换矩阵并创建新的变换矩阵
191            this.path3.setTransform(2, 0.1, 0.1, 2, 0, 0);
192            this.ctx.stroke(this.path3);
193            this.isChange = !this.isChange;
194            this.textName = "back"
195        } else {
196            this.ctx.clearRect(0, 0, 600, 600);
197            this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0, 0);
198            this.ctx.stroke(this.path3);
199            this.isChange = !this.isChange;
200            this.textName = "change";
201        }
202    }
203}
204```
205
206![zh-cn_image_0000001177784684](figures/zh-cn_image_0000001177784684.gif)
207