1/* 2 * Copyright (c) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import router from '@ohos.router'; 17 18@Entry 19@Component 20struct PathExample { 21 private path2Da: Path2D = new Path2D() 22 private path2Dc: Path2D = new Path2D() 23 private path2Df: Path2D = new Path2D() 24 private path2De: Path2D = new Path2D() 25 private path2Db: Path2D = new Path2D("M250 190 L150 350 L350 350 Z") 26 private settings: RenderingContextSettings = new RenderingContextSettings(true) 27 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 28 29 build() { 30 Column() { 31 Canvas(this.context) 32 .width('90%') 33 .height(300) 34 .backgroundColor('#00ffff') 35 36 Row() { 37 Button('arc') 38 .width(130) 39 .height(45) 40 .key('arc') 41 .onClick(() => { 42 this.path2Da.arc(155, 150, 100, 0, 6.28); 43 this.context.stroke(this.path2Da); 44 this.context.save(); 45 }) 46 Button('quadraticCurveTo') 47 .width(150) 48 .height(45) 49 .key('quadraticCurveTo') 50 .onClick(() => { 51 this.context.restore() 52 this.path2Da.moveTo(20, 20) 53 this.path2Da.quadraticCurveTo(155, 285, 300, 20); 54 this.context.stroke(this.path2Da) 55 this.context.save() 56 }) 57 }.margin({ top: 10 }) 58 .width('100%') 59 .justifyContent(FlexAlign.SpaceAround) 60 61 Row() { 62 Button('bezierCurveTo') 63 .width(130) 64 .height(45) 65 .key('bezierCurveTo') 66 .onClick(() => { 67 this.path2Da.moveTo(100, 30); 68 this.path2Da.bezierCurveTo(50, 100, 250, 100, 200, 30); 69 this.context.stroke(this.path2Da) 70 this.context.save() 71 }) 72 Button('arcTo') 73 .width(130) 74 .height(45) 75 .key('arcTo') 76 .onClick(() => { 77 this.path2Dc.arcTo(100, 80, 120, 50, 50) 78 this.context.stroke(this.path2Dc) 79 }) 80 }.margin({ top: 10 }) 81 .width('100%') 82 .justifyContent(FlexAlign.SpaceAround) 83 84 Row() { 85 Button('ellipse') 86 .width(130) 87 .height(45) 88 .key('ellipse') 89 .onClick(() => { 90 this.context.restore(); 91 this.path2De.ellipse(100, 150, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI) 92 this.context.stroke(this.path2De); 93 this.context.save(); 94 95 }) 96 Button('rect') 97 .width(130) 98 .height(45) 99 .key('rect') 100 .onClick(() => { 101 this.context.save(); 102 this.path2Df.rect(20, 240, 100, 100) 103 this.context.stroke(this.path2Df); 104 this.context.restore(); 105 }) 106 }.margin({ top: 10 }) 107 .width('100%') 108 .justifyContent(FlexAlign.SpaceAround) 109 110 Row() { 111 Button('closePath') 112 .width(130) 113 .height(45) 114 .key('closePath') 115 .onClick(() => { 116 this.path2Da.moveTo(160, 150); 117 this.path2Da.lineTo(110, 220); 118 this.path2Da.lineTo(210, 220); 119 this.path2Da.closePath(); 120 this.context.stroke(this.path2Da); 121 }) 122 Button('delete') 123 .width(130) 124 .height(45) 125 .key('delete') 126 .onClick(() => { 127 this.context.clearRect(0, 0, 950, 950) 128 }) 129 }.margin({ top: 10 }) 130 .width('100%') 131 .justifyContent(FlexAlign.SpaceAround) 132 133 Row() { 134 Button('addPath') 135 .width(130) 136 .height(45) 137 .key('addPath') 138 .onClick(() => { 139 this.path2Da.addPath(this.path2Db) 140 this.context.stroke(this.path2Da) 141 }) 142 Button('back') 143 .width(130) 144 .height(45) 145 .key('back') 146 .backgroundColor(Color.Orange) 147 .onClick(() => { 148 router.back() 149 }) 150 }.margin({ top: 10 }) 151 .width('100%') 152 .justifyContent(FlexAlign.SpaceAround) 153 } 154 .width('100%') 155 .height('100%') 156 .justifyContent(FlexAlign.Center) 157 .alignItems(HorizontalAlign.Center) 158 } 159}