• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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 IndexExample {
21  private settings: RenderingContextSettings = new RenderingContextSettings(true)
22  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
23
24  build() {
25    Column() {
26      Canvas(this.context)
27        .width('100%')
28        .height(300)
29        .padding({ left: 12, right: 12 })
30        .backgroundColor('#00ffff')
31      Row() {
32        Button('arc')
33          .width(130).height(45)
34          .key('arc')
35          .onClick(() => {
36            this.context.beginPath();
37            this.context.arc(185, 140, 50, 0, 6.28);
38            this.context.lineWidth = 2;
39            this.context.stroke();
40          })
41        Button('strokeText')
42          .width(130).height(45)
43          .key('strokeText')
44          .onClick(() => {
45            this.context.font = '100px sans-serif';
46            this.context.strokeText("hello World!", 50, 150);
47          })
48      }
49      .margin({ top: 10 })
50      .width('100%')
51      .justifyContent(FlexAlign.SpaceAround)
52
53      Row() {
54        Button('closePath')
55          .width(130).height(45)
56          .key('closePath')
57          .onClick(() => {
58            this.context.beginPath();
59            this.context.lineWidth = 2;
60            this.context.moveTo(100, 140);
61            this.context.lineTo(130, 190);
62            this.context.lineTo(70, 190);
63            this.context.closePath();
64            this.context.stroke();
65          })
66        Button('quadraticCurveTo')
67          .width(130).height(45)
68          .key('quadraticCurveTo')
69          .onClick(() => {
70            this.context.beginPath();
71            this.context.moveTo(20, 20);
72            this.context.quadraticCurveTo(185, 185, 290, 20);
73            this.context.stroke();
74          })
75      }.margin({ top: 10 })
76      .width('100%')
77      .justifyContent(FlexAlign.SpaceAround)
78
79      Row() {
80        Button('textBaseline')
81          .width(130).height(45)
82          .key('textBaseline')
83          .onClick(() => {
84            this.context.moveTo(50, 260);
85            this.context.lineTo(290, 260);
86            this.context.stroke();
87            this.context.font = '50px sans-serif';
88            this.context.textBaseline = 'top';
89            this.context.fillText('Top', 60, 260)
90            this.context.textBaseline = 'bottom';
91            this.context.fillText('Bottom', 90, 260);
92            this.context.textBaseline = 'middle';
93            this.context.fillText('Middle', 150, 260);
94            this.context.textBaseline = 'alphabetic';
95            this.context.fillText('Alphabetic', 200, 260);
96          })
97
98        Button('delete')
99          .width(130).height(45)
100          .key('delete')
101          .onClick(() => {
102            this.context.clearRect(0, 0, 950, 950)
103          })
104      }.margin({ top: 10 })
105      .width('100%')
106      .justifyContent(FlexAlign.SpaceAround)
107
108      Row() {
109        Button('back')
110          .key('back')
111          .width(130)
112          .height(45)
113          .backgroundColor(Color.Orange)
114          .onClick(() => {
115            router.back()
116          })
117      }.margin({ top: 10 })
118      .width('100%')
119      .justifyContent(FlexAlign.SpaceAround)
120    }
121    .alignItems(HorizontalAlign.Center)
122    .justifyContent(FlexAlign.Center)
123    .width('100%')
124    .height('100%')
125  }
126}