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