在HarmonyOS NEXT中绘制实心圆的方法？DrawingRenderingContext可以吗？

Question

在HarmonyOS NEXT中绘制实心圆的方法？DrawingRenderingContext可以吗？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

具体解决方案，参考代码：

@Entry 
@Component 
struct CircleByOneHeart { 
  @State currentCenterColor: string = '蓝色' 
  @State currentUpColor: string = '蓝色' 
  @State currentDownColor: string = '蓝色' 
  @State currentLeftColor: string = '蓝色' 
  @State currentRightColor: string = '蓝色' 
  private countDown: number = 0; //设置一个flag，用来接受定时器，可以看作定时器实体 
 
  aboutToDisappear(): void { 
    clearTimeout(this.countDown) //销毁定时器 
  } 
 
  build() { 
    Row() { 
      Column({ space: 100 }) { 
        //画一个直径为90的同心圆 
        Column() { 
          Line({ 
            //上 
            width: 10, 
            height: 20 
          }) 
            .startPoint([5, 0]) 
            .endPoint([5, 20]) 
            .strokeWidth(10) 
            .position({ x: 45, y: 5 }) 
            .stroke(this.currentUpColor == '蓝色' ? Color.Blue : Color.Red) 
            .onClick(() => { 
              if (this.currentUpColor == '蓝色') { 
                this.currentUpColor = '红色' 
              } else { 
                this.currentUpColor = '蓝色' 
              } 
              this.countDown = setTimeout(() => { 
                this.currentUpColor = '蓝色' 
              }, TimeSetting.stayTime) //设置定时器时间以及处理事件 
            }) 
          Line({ 
            //下 
            width: 10, 
            height: 20 
          }) 
            .startPoint([5, 0]) 
            .endPoint([5, 20]) 
            .strokeWidth(10) 
            .position({ x: 45, y: 75 }) 
            .stroke(this.currentDownColor == '蓝色' ? Color.Blue : Color.Red) 
            .onClick(() => { 
              if (this.currentDownColor == '蓝色') { 
                this.currentDownColor = '红色' 
              } else { 
                this.currentDownColor = '蓝色' 
              } 
              this.countDown = setTimeout(() => { 
                this.currentDownColor = '蓝色' 
              }, TimeSetting.stayTime) //设置定时器时间以及处理事件 
            }) 
          Line({ 
            //左 
            width: 20, 
            height: 10 
          }) 
            .startPoint([0, 5]) 
            .endPoint([20, 5]) 
            .strokeWidth(10) 
            .position({ x: 5, y: 45 }) 
            .stroke(this.currentLeftColor == '蓝色' ? Color.Blue : Color.Red) 
            .onClick(() => { 
              if (this.currentLeftColor == '蓝色') { 
                this.currentLeftColor = '红色' 
              } else { 
                this.currentLeftColor = '蓝色' 
              } 
              this.countDown = setTimeout(() => { 
                this.currentLeftColor = '蓝色' 
              }, TimeSetting.stayTime) //设置定时器时间以及处理事件 
            }) 
          Line({ 
            //右 
            width: 20, 
            height: 10 
          }) 
            .startPoint([0, 5]) 
            .endPoint([20, 5]) 
            .strokeWidth(10) 
            .position({ x: 75, y: 45 }) 
            .stroke(this.currentRightColor == '蓝色' ? Color.Blue : Color.Red) 
            .onClick(() => { 
              if (this.currentRightColor == '蓝色') { 
                this.currentRightColor = '红色' 
              } else { 
                this.currentRightColor = '蓝色' 
              } 
              this.countDown = setTimeout(() => { 
                this.currentRightColor = '蓝色' 
              }, TimeSetting.stayTime) //设置定时器时间以及处理事件 
            }) 
          Button('确定') 
            .width(50) 
            .height(50) 
            .type(ButtonType.Circle) 
            .position({ x: 25, y: 25 })//绝对定位 
            .backgroundColor(this.currentCenterColor == '蓝色' ? Color.Blue : Color.Red) 
            .onClick(() => { 
              if (this.currentCenterColor == '蓝色') { 
                this.currentCenterColor = '红色' 
              } else { 
                this.currentCenterColor = '蓝色' 
              } 
              this.countDown = setTimeout(() => { 
                this.currentCenterColor = '蓝色' 
              }, TimeSetting.stayTime) //设置定时器时间以及处理事件 
            }) 
        } 
        .width('100') 
        .height('100') 
        .backgroundColor('#ffffff') 
        .border({ 
          //border的宽度是向内的，宽度越大占用内部空间越大 
          color: Color.Blue, 
          width: 10, 
          radius: 100 
        }) 
      } 
      .width('100%') 
      .height('100%') 
      .justifyContent(FlexAlign.Center) 
    } 
    .height('100%') 
  } 
} 
 
class TimeSetting { 
  public static readonly stayTime = 300 //单位是毫秒 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 2

需要创建一个自定义组件，在组件的build方法中获取绘图上下文并进行绘制。

import { Component, Canvas } from '@ohos.application.Component';
@Component
struct MyCircleComponent {
    build() {
        Canvas({ width: 200, height: 200 }) {
            let context = this.getContext('2d') as DrawingRenderingContext;
            if (context) {
                context.beginPath();
                // 以画布中心为圆心，半径为80绘制圆形路径
                context.arc(100, 100, 80, 0, 2 * Math.PI);
                context.fillStyle = 'red';
                context.fill();
            }
        }
    }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。