205.HarmonyOS NEXT系列教程之 TabsConcaveCircle组件Canvas渲染实现

原创

全栈若城

发布于 2025-03-27 12:45:42

670

文章被收录于专栏：harmonyos从入门到精通harmonyos从入门到精通

温馨提示：本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！

HarmonyOS NEXT系列教程之 TabsConcaveCircle组件Canvas渲染实现

本文将详细介绍TabsConcaveCircle组件中Canvas的渲染实现，包括背景绘制和凹槽效果的创建。

效果演示

1. Canvas初始化

private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

initCanvas() {
  this.circleInfo = new ConcaveCircle(this.context, this.tabsMenu.length);
  let ratio = 0.7;
  this.imageWH = this.circleInfo.circleDiameter * ratio;
  this.createAnimation()
}

初始化过程说明：

Canvas上下文创建：
- 创建渲染设置对象
- 初始化2D渲染上下文
凹陷圆形初始化：
- 创建ConcaveCircle实例
- 设置图片尺寸（圆直径的70%）
- 启动初始动画

2. Canvas渲染实现

createCanvas() {
  if (this.circleInfo) {
    this.context.reset()
    CanvasCreateRectangle({
      context: this.context,
      tabsBgColor: this.tabsBgColor
    })
    CanvasClipGroove({
      context: this.context,
      menuLength: this.tabsMenu.length,
      center: this.animationPositionX,
    })
  }
}

渲染流程解析：

重置画布：
- 清除之前的绘制内容
- 准备新一帧的绘制
绘制背景：
- 调用CanvasCreateRectangle创建背景
- 使用配置的背景颜色
创建凹槽效果：
- 调用CanvasClipGroove绘制凹槽
- 传入菜单长度和当前位置

3. Canvas组件集成

build() {
  Stack() {
    // 背景和凹槽部分
    Canvas(this.context)
      .width('100%')
      .height('100%')
      .onReady(() => this.initCanvas())
    
    // 凹槽上方球体部分
    if (this.circleInfo) {
      Column()
        .width(this.circleInfo.circleDiameter)
        .height(this.circleInfo.circleDiameter)
        .borderRadius(this.circleInfo.circleRadius)
        .backgroundColor(this.tabsSelectBgColor)
        .position({
          x: this.circleInfo.positionX,
          y: this.circleInfo.positionY
        })
        .id('ball')
    }
    
    // 菜单选项
    Row() {
      ForEach(this.tabsMenu, (item: TabMenusInterfaceIRequired, index: number) => {
        this.TabItem(item, index)
      })
    }
    .width("100%")
    .height("100%")
  }
  .width("100%")
  .height(this.tabHeight)
  .id('concavity_tabBar')
}

组件结构说明：

Stack布局：
- 使用堆叠布局实现层次效果
- 包含三个主要层：Canvas层、球体层、菜单层
Canvas层：
- 占满容器
- 组件就绪时初始化
球体层：
- 根据circleInfo配置尺寸和位置
- 使用圆角实现圆形效果
- 应用选中背景色
菜单层：
- 使用Row布局横向排列选项
- 通过ForEach渲染菜单项

4. 关键工具函数

// 创建矩形背景
CanvasCreateRectangle({
  context: this.context,
  tabsBgColor: this.tabsBgColor
})

// 创建凹槽效果
CanvasClipGroove({
  context: this.context,
  menuLength: this.tabsMenu.length,
  center: this.animationPositionX,
})