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 */ 15import router from '@ohos.router'; 16 17@Entry 18@Component 19struct RenderingExample { 20 private settings: RenderingContextSettings = new RenderingContextSettings(true) 21 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 22 private img: ImageBitmap = new ImageBitmap("/common/images/icon.png") 23 24 build() { 25 Column() { 26 Canvas(this.context) 27 .width('100%') 28 .height('50%') 29 .padding({ left: 12, right: 12 }) 30 .backgroundColor('#00ffff') 31 .onReady(() => { 32 }) 33 Row() { 34 Button('arcTo').width(130).height(45) 35 .key('arcTo') 36 .onClick(() => { 37 this.context.arcTo(150, 50, 250, 150, 250); 38 this.context.lineWidth = 1; 39 this.context.stroke(); 40 this.context.save(); 41 }) 42 Button('bezierCurveTo').width(130).height(45) 43 .key('bezierCurveTo') 44 .onClick(() => { 45 this.context.restore(); 46 this.context.beginPath(); 47 this.context.moveTo(30, 20); 48 this.context.bezierCurveTo(100, 150, 180, 150, 220, 20); 49 this.context.stroke(); 50 this.context.save() 51 }) 52 }.margin({ top: 10 }) 53 .width('100%') 54 .justifyContent(FlexAlign.SpaceAround) 55 56 Row() { 57 Button('ellipse').width(130).height(45) 58 .key('ellipse') 59 .onClick(() => { 60 this.context.restore(); 61 this.context.beginPath(); 62 this.context.lineWidth = 1; 63 this.context.ellipse(100, 300, 100, 50, Math.PI * 0.25, Math.PI * 0.5, Math.PI) 64 this.context.stroke(); 65 this.context.save(); 66 }) 67 Button('rect').width(130).height(45) 68 .key('rect') 69 .onClick(() => { 70 this.context.restore(); 71 this.context.rect(80, 250, 100, 100); 72 this.context.fill(); 73 this.context.save(); 74 }) 75 }.margin({ top: 10 }) 76 .width('100%') 77 .justifyContent(FlexAlign.SpaceAround) 78 79 Row() { 80 Button('createPattern').width(130).height(45) 81 .key('createPattern') 82 .onClick(() => { 83 this.context.restore(); 84 var pattern = this.context.createPattern(this.img, 'repeat'); 85 this.context.fillStyle = pattern; 86 this.context.fillRect(190, 200, 150, 150); 87 this.context.save(); 88 89 }) 90 Button('lineDashOffset') 91 .width(130).height(45) 92 .key('lineDashOffset') 93 .onClick(() => { 94 this.context.restore(); 95 this.context.arc(250, 100, 40, 0, 6.28); 96 this.context.setLineDash([10, 20]); 97 this.context.lineWidth = 3; 98 this.context.stroke(); 99 this.context.save(); 100 }) 101 }.margin({ top: 10 }) 102 .width('100%') 103 .justifyContent(FlexAlign.SpaceAround) 104 105 Row() { 106 Button('scale').width(130).height(45) 107 .key('scale') 108 .onClick(() => { 109 this.context.restore(); 110 this.context.strokeRect(10, 10, 25, 25); 111 this.context.scale(2, 2); 112 this.context.strokeRect(10, 10, 25, 25); 113 this.context.save(); 114 }) 115 Button('delete') 116 .width(130).height(45) 117 .onClick(() => { 118 this.context.clearRect(0, 0, 950, 950) 119 }) 120 }.margin({ top: 10 }) 121 .width('100%') 122 .justifyContent(FlexAlign.SpaceAround) 123 124 Button('back') 125 .width(130) 126 .height(45) 127 .key('back') 128 .backgroundColor(Color.Orange) 129 .onClick(() => { 130 router.back() 131 }) 132 .margin({ top: 10 }) 133 }.width('100%').height('100%') 134 .alignItems(HorizontalAlign.Center) 135 .justifyContent(FlexAlign.Center) 136 } 137}
