• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Path2D
2
3
4**\<Path2D>** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. For details, see [Path2D](../reference/arkui-js/js-components-canvas-path2d.md).
5
6
7## Drawing Line Segments
8
9Create a **\<Path2D>** object and use line segments to create different shapes.
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
39export default {
40    onShow() {
41        let ctx = this.$refs.canvas.getContext('2d', {
42            antialias: true
43        });
44        let path = ctx.createPath2D();
45        // Roof
46        path.moveTo(10, 300);
47        path.lineTo(210, 100);
48        path.lineTo(410, 300);
49        // House
50        path.moveTo(10, 300);
51        path.lineTo(410, 300);
52        path.lineTo(410, 600);
53        path.lineTo(10, 600);
54        path.closePath();
55        // Window
56        path.moveTo(50, 450);
57        path.bezierCurveTo(70, 350, 130, 350, 150, 450);
58        path.closePath();
59        // Door
60        path.moveTo(250, 450);
61        path.rect(250, 450, 100, 600);
62        path.closePath();
63        // Chimney
64        path.moveTo(365, 250);
65        path.ellipse(310, 215, 30, 130, 0, Math.PI * 0.04, Math.PI * 1.1, 1);
66        // Tree
67        path.moveTo(485, 450);
68        path.quadraticCurveTo(510, 500, 485, 600);
69        path.moveTo(550, 450);
70        path.quadraticCurveTo(525, 500, 550, 600);
71        path.moveTo(600, 535);
72        path.arc(520, 450, 85, 0, 6);
73        ctx.stroke(path);
74    }
75}
76```
77
78
79![en-us_image_0000001232002968](figures/en-us_image_0000001232002968.png)
80
81
82## Drawing Graphs
83
84Use **createPath2D** to create a path object and draw only **path1** so that only **path1** is displayed on the canvas. Click the **\<text>** component to trigger the **addPath** method. The **path2** object is passed to **path1** as a parameter. After the **stroke** operation is performed on the **path1** object, **path1** and **path2** are displayed on the canvas. Click **Change** to change the value of **setTransform** to** setTransform(2, 0.1, 0.1, 2, 0,0)**. The graph is enlarged and tilted to the left.
85
86
87```html
88<!-- xxx.hml -->
89<div class="container">
90    <canvas ref="canvas"></canvas>
91    <div class="content">
92        <text onclick="addPath">{{ isAdd }}</text>
93        <text onclick="setTransform">{{ textName }}</text>
94    </div>
95</div>
96```
97
98
99```css
100/* xxx.css */
101.container {
102    flex-direction: column;
103    background-color: #F1F3F5;
104    align-items: center;
105    justify-content: center;
106    width: 100%;
107    height: 100%;
108}
109
110canvas {
111    width: 600px;
112    height: 600px;
113    background-color: #fdfdfd;
114    border: 5px solid red;
115}
116
117.content {
118    width: 80%;
119    margin-top: 50px;
120    margin-bottom: 50px;
121    display: flex;
122    flex-wrap: wrap;
123    justify-content: space-around;
124}
125
126text {
127    width: 150px;
128    height: 80px;
129    color: white;
130    border-radius: 20px;
131    text-align: center;
132    background-color: #6060e7;
133    margin-bottom: 30px;
134}
135```
136
137
138```js
139// xxx.js
140export default {
141    data: {
142        ctx: null,
143        path1: null,
144        path2: null,
145        path3: null,
146        isAdd: "addPath2",
147        isChange: true,
148        textName: 'change'
149    },
150    onShow() {
151        this.ctx = this.$refs.canvas.getContext('2d', {
152            antialias: true
153        });
154        this.path1 = this.ctx.createPath2D();
155        // Square
156        this.path1.moveTo(200, 200);
157        this.path1.lineTo(400, 200);
158        this.path1.lineTo(400, 400);
159        this.path1.lineTo(200, 400);
160        this.path1.closePath();
161        this.path2 = this.ctx.createPath2D();
162        // Arc
163        this.path2.arc(300, 300, 75, 0, 6.28);
164        this.ctx.stroke(this.path1);
165    },
166    addPath() {
167        if (this.isAdd == "addPath2") {
168            // Clear the content in the specified area on the canvas.
169            this.ctx.clearRect(0, 0, 600, 600);
170            this.ctx.beginPath();
171            // Add a path to the current path.
172            this.path2.addPath(this.path1);
173            this.ctx.stroke(this.path2);
174            this.isAdd = "clearPath2";
175        } else {
176            this.ctx.clearRect(0, 0, 600, 600);
177            this.ctx.stroke(this.path1);
178            this.isAdd = "addPath2";
179        }
180    },
181    setTransform() {
182        if (this.isChange) {
183            this.ctx.clearRect(0, 0, 600, 600);
184            this.path3 = this.ctx.createPath2D();
185            this.path3.arc(150, 150, 100, 0, 6.28);
186            // Reset and create a new transformation matrix.
187            this.path3.setTransform(2, 0.1, 0.1, 2, 0, 0);
188            this.ctx.stroke(this.path3);
189            this.isChange = !this.isChange;
190            this.textName = "back"
191        } else {
192            this.ctx.clearRect(0, 0, 600, 600);
193            this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0, 0);
194            this.ctx.stroke(this.path3);
195            this.isChange = !this.isChange;
196            this.textName = "change";
197        }
198    }
199}
200```
201
202![en-us_image_0000001231683112](figures/en-us_image_0000001231683112.gif)
203