HarmonyOS 5.0应用开发——Canvas绘制饼图

【高心星出品】

Canvas绘制饼图

Canvas提供画布组件，用于自定义绘制图形，开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制，绘制对象可以是基础形状、文本、图片等。

运行结果

开发步骤

定义Canvas上下文环境。

// 抗锯齿设置
private canvassetting: RenderingContextSettings = new RenderingContextSettings(true)
// canvas上下文环境
private cavascontext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.canvassetting)

布局Canvas

//绑定上下文环境
Canvas(this.cavascontext)
  .width(300)
  .height(300)
  .backgroundColor(Color.Gray)
  .onReady(() => {
    //开始绘制
  })

标准绘制过程

let width = this.cavascontext.width
let height = this.cavascontext.height
// 清空内容
this.cavascontext.clearRect(0, 0, width, height)
//保存空的画板
this.cavascontext.save()
//平移画板
this.cavascontext.translate(width / 2, height / 2)
//旋转画板
this.cavascontext.rotate(angle)
// 开始绘制内容
..........
// 绘制结束 呈现内容
this.cavascontext.restore()

具体绘制过程

绘制文本

//开始路径
this.cavascontext.beginPath()
//设置画笔
this.cavascontext.font = '15vp'
this.cavascontext.fillStyle = '#ff0000'
//画文字
this.cavascontext.fillText(text, x, y)
this.cavascontext.fill()
//关闭路径
this.cavascontext.closePath()

绘制圆弧

//开始路径
this.cavascontext.beginPath();
//设置颜色
this.cavascontext.fillStyle = color;
//绘制一个点
this.cavascontext.moveTo(0, 0);
//绘制圆弧
this.cavascontext.arc(0, 0, randus, startangle, endangle);
this.cavascontext.fill();
//关闭路径
this.cavascontext.closePath();

旋转手势

.gesture(
  RotationGesture()
    .onActionUpdate((event) => {
      this.invaliate(event.angle * Math.PI / 180)
    })
)

完整代码

@Entry
@Component
struct Canvaspage {
  @State message: string = 'Hello World';
  // 抗锯齿设置
  private canvassetting: RenderingContextSettings = new RenderingContextSettings(true)
  // canvas上下文环境
  private cavascontext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.canvassetting)

  build() {
    Column() {
      Canvas(this.cavascontext)
        .width(300)
        .height(300)
        .backgroundColor(Color.Gray)
        .onReady(() => {

          this.invaliate(0);
        })
        .gesture(
          RotationGesture()
            .onActionUpdate((event) => {
              this.invaliate(event.angle * Math.PI / 180)
            })
        )
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }

  invaliate(angle: number) {
    let width = this.cavascontext.width
    let height = this.cavascontext.height
    // 清空内容
    this.cavascontext.clearRect(0, 0, width, height)
    this.cavascontext.save()
    this.cavascontext.translate(width / 2, height / 2)
    this.cavascontext.rotate(angle)
    // 开始绘制
    this.drawarc('#00ff00', 100, 0, Math.PI / 4);
    this.drawtext('Android', 90, 45);
    this.drawarc('#00ffff', 90, Math.PI / 4, Math.PI / 12 * 7);
    this.drawtext('IOS', 10, 100);
    this.drawarc('#ffff00', 80, Math.PI / 12 * 7, Math.PI);
    this.drawtext('Flutter', -110, 50);
    this.drawarc('#0000ff', 100, Math.PI, 0);
    this.drawtext('HarmonyOS', -30, -100);
    this.drawcircle(50, '#ff0000');
    // 绘制结束
    this.cavascontext.restore()
  }

  drawcircle(randus: number, color: string) {
    this.cavascontext.beginPath()
    this.cavascontext.fillStyle = color
    this.cavascontext.arc(0, 0, randus, 0, 2 * Math.PI)
    this.cavascontext.fill()
    this.cavascontext.closePath()
  }

  drawarc(color: string, randus: number, startangle: number, endangle: number) {
    this.cavascontext.beginPath();
    this.cavascontext.fillStyle = color;
    this.cavascontext.moveTo(0, 0);
    this.cavascontext.arc(0, 0, randus, startangle, endangle);
    this.cavascontext.fill();
    this.cavascontext.closePath();
  }

  drawtext(text: string, x: number, y: number) {
    this.cavascontext.beginPath()
    this.cavascontext.font = '15vp'
    this.cavascontext.fillStyle = '#ff0000'
    this.cavascontext.fillText(text, x, y)
    this.cavascontext.fill()
    this.cavascontext.closePath()
  }
}