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