1# Path2D对象 2 3 4路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。具体请参考[Path2D对象](../reference/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 39export default { 40 onShow() { 41 let ctx = this.$refs.canvas.getContext('2d', { 42 antialias: true 43 }); 44 let path = ctx.createPath2D(); 45 // 房顶 46 path.moveTo(10, 300); 47 path.lineTo(210, 100); 48 path.lineTo(410, 300); 49 // 屋子 50 path.moveTo(10, 300); 51 path.lineTo(410, 300); 52 path.lineTo(410, 600); 53 path.lineTo(10, 600); 54 path.closePath(); 55 // 窗子 56 path.moveTo(50, 450); 57 path.bezierCurveTo(70, 350, 130, 350, 150, 450); 58 path.closePath(); 59 // 门 60 path.moveTo(250, 450); 61 path.rect(250, 450, 100, 600); 62 path.closePath(); 63 // 烟囱 64 path.moveTo(365, 250); 65 path.ellipse(310, 215, 30, 130, 0, Math.PI * 0.04, Math.PI * 1.1, 1); 66 // 树 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 80 81 82## 画图形 83 84先使用createPath2D创建出路径对象，只对path1路径进行描边，所以画布上就只会出现path1的路径图形。点击text组件触发addPath方法会把path2路径对象当参数传入path1中，再对path1对象进行描边（stroke）操作后画布出现path1和path2两个图形。点击change文本改变setTransform属性值为setTransform(2, 0.1, 0.1, 2, 0,0)，图形变大并向左倾斜。 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 // 正方形 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 // 圆形 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 // 删除指定指定区域的绘制内容 169 this.ctx.clearRect(0, 0, 600, 600); 170 this.ctx.beginPath(); 171 // 将另一个的路径添加到当前路径对象中 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 // 重置现有的变换矩阵并创建新的变换矩阵 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 203
