• 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
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        // Roof
48        path.moveTo(10, 300);
49        path.lineTo(210, 100);
50        path.lineTo(410, 300);
51        // House
52        path.moveTo(10, 300);
53        path.lineTo(410, 300);
54        path.lineTo(410, 600);
55        path.lineTo(10, 600);
56        path.closePath();
57        // Window
58        path.moveTo(50, 450);
59        path.bezierCurveTo(70, 350, 130, 350, 150, 450);
60        path.closePath();
61        // Door
62        path.moveTo(250, 450);
63        path.rect(250, 450, 100, 600);
64        path.closePath();
65        // Chimney
66        path.moveTo(365, 250);
67        path.ellipse(310, 215, 30, 130, 0, Math.PI * 0.04, Math.PI * 1.1, 1);
68        // Tree
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![en-us_image_0000001232002968](figures/en-us_image_0000001232002968.png)
82
83
84## Drawing Graphs
85
86Use **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.
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        // Square
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        // Arc
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            // Clear the content in the specified area on the canvas.
173            this.ctx.clearRect(0, 0, 600, 600);
174            this.ctx.beginPath();
175            // Add a path to the current path.
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            // Reset and create a new transformation matrix.
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![en-us_image_0000001231683112](figures/en-us_image_0000001231683112.gif)
207