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

温馨提示：本篇博客的详细代码已发布到 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()
}

初始化过程说明：

1. Canvas上下文创建：

   • 创建渲染设置对象
   • 初始化2D渲染上下文

2. 凹陷圆形初始化：

   • 创建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,
    })
  }
}

渲染流程解析：

1. 重置画布：

   • 清除之前的绘制内容
   • 准备新一帧的绘制

2. 绘制背景：

   • 调用CanvasCreateRectangle创建背景
   • 使用配置的背景颜色

3. 创建凹槽效果：

   • 调用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')
}

组件结构说明：

1. Stack布局：

   • 使用堆叠布局实现层次效果
   • 包含三个主要层：Canvas层、球体层、菜单层

2. Canvas层：

   • 占满容器
   • 组件就绪时初始化

3. 球体层：

   • 根据circleInfo配置尺寸和位置
   • 使用圆角实现圆形效果
   • 应用选中背景色

4. 菜单层：

   • 使用Row布局横向排列选项
   • 通过ForEach渲染菜单项

4. 关键工具函数

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

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

工具函数说明：

1. CanvasCreateRectangle:

   • 创建组件的基础背景
   • 应用配置的背景颜色

2. CanvasClipGroove:

   • 创建凹陷效果
   • 根据菜单长度计算位置
   • 使用当前动画位置确定凹槽中心

总结

TabsConcaveCircle组件的Canvas渲染实现主要包含：

1. Canvas的初始化和配置
2. 背景和凹槽的绘制过程
3. 组件的层次结构设计
4. 工具函数的协同工作

通过这些实现，创造出了具有独特视觉效果的底部导航栏组件。Canvas的使用让组件具有了更灵活的绘制能力，能够实现传统组件难以达到的视觉效果。