页面预览

前言

自定义形状绘制是 Canvas 绘图的高级能力，通过 Path 路径、Brush 填充和 Pen 描边可以实现复杂的图形效果。HarmonyOS 的 @ohos.graphics.drawing 提供了这些高级绘图 API。本文以小事记（xiaoshiji_ohos_app） 的心情分布环形图场景为背景，深入解析自定义形状绘制。

本文参考 HarmonyOS 官方文档：drawing-effect.md 和 drawing 参考。

一、Path 路径绘制

1.1 基本用法

// Path 路径绘制
import { drawing } from '@kit.ArkGraphics2D';

function drawPath(context: CanvasRenderingContext2D): void {
  const path = new drawing.Path();
  
  // 移动到起点
  path.moveTo(100, 100);
  
  // 绘制贝塞尔曲线
  path.cubicTo(150, 50, 200, 150, 250, 100);
  
  // 绘制直线
  path.lineTo(300, 200);
  
  // 绘制到路径
  context.beginPath();
  // 使用 Path 对象
  context.stroke();
}
方案 适用场景 注意事项
方案一 简单场景 实现简单，易于维护
方案二 复杂场景 灵活性高，需注意性能
方案三 特殊场景 针对特定需求优化

二、Brush 填充

2.1 基本用法

// Brush 填充
function drawWithBrush(context: CanvasRenderingContext2D): void {
  // 设置填充样式
  context.fillStyle = '#7B68EE';
  context.fillRect(50, 50, 200, 150);
  
  // 渐变填充
  const gradient = context.createLinearGradient(50, 50, 250, 200);
  gradient.addColorStop(0, '#7B68EE');
  gradient.addColorStop(1, '#DDA0DD');
  context.fillStyle = gradient;
  context.fillRect(50, 50, 200, 150);
}

三、Pen 描边

3.1 基本用法

// Pen 描边
function drawWithPen(context: CanvasRenderingContext2D): void {
  context.strokeStyle = '#7B68EE';
  context.lineWidth = 3;
  context.lineCap = 'round';    // 圆角端点
  context.lineJoin = 'round';   // 圆角连接
  
  context.beginPath();
  context.moveTo(50, 100);
  context.lineTo(150, 50);
  context.lineTo(250, 100);
  context.stroke();
}

四、心情分布环形图

4.1 环形图实现

// 环形图绘制
function drawDonutChart(context: CanvasRenderingContext2D): void {
  const data = [
    { label: '开心', percentage: 45, color: '#54A0FF' },
    { label: '温暖', percentage: 30, color: '#FF9F43' },
    { label: '感动', percentage: 15, color: '#FF6B9D' },
    { label: '其他', percentage: 10, color: '#A29BFE' }
  ];
  
  const centerX = 150;
  const centerY = 150;
  const radius = 80;
  const innerRadius = 40;
  let startAngle = -Math.PI / 2;
  
  for (const item of data) {
    const angle = (item.percentage / 100) * Math.PI * 2;
    const endAngle = startAngle + angle;
    
    // 绘制扇形
    context.beginPath();
    context.arc(centerX, centerY, radius, startAngle, endAngle);
    context.arc(centerX, centerY, innerRadius, endAngle, startAngle, true);
    context.closePath();
    
    context.fillStyle = item.color;
    context.fill();
    
    startAngle = endAngle;
  }
}

五、

// Canvas 动画循环
function animate(): void {
  this.context.clearRect(0, 0, 300, 300);
  this.draw();
  requestAnimationFrame(() => { this.animate(); });
}

常见问题

5.1 路径不闭合

问题：绘制的路径没有形成封闭图形。

解决方案：使用 closePath() 闭合路径，或使用 fill() 自动闭合。

六、最佳实践

策略 说明 效果
路径闭合 使用 closePath() 完整图形
渐变填充 使用 createLinearGradient 丰富效果
描边配置 设置 lineWidth、lineCap 美观

十、最佳实践与优化建议

在实际开发中，合理运用上述技术可以显著提升应用的性能和用户体验。以下是几个关键的最佳实践建议：

10.1 性能优化要点

优化方向 具体措施 预期效果
渲染性能 减少不必要的组件重建 提升帧率
内存管理 及时释放不再使用的资源 降低内存占用
响应速度 避免在主线程执行耗时操作 提升交互流畅度

10.2 推荐实践步骤

按照以下步骤进行优化：

  1. 使用 DevEco Studio 的 Profiler 工具分析当前性能瓶颈
  2. 针对识别出的热点进行针对性优化
  3. 通过单元测试和集成测试验证优化效果
  4. 在真机环境下进行回归测试

10.3 代码示例

// 推荐的最佳实践示例
@Component
export struct OptimizedComponent {
  // 使用 @State 管理最小粒度的状态
  @State private isActive: boolean = false;

  build() {
    Column() {
      Text(this.isActive ? '激活' : '未激活')
        .fontSize(16)
    }
    .onClick(() => {
      // 使用 animateTo 实现平滑过渡
      animateTo({ duration: 300 }, () => {
        this.isActive = !this.isActive;
      });
    });
  }
}

最佳实践提示：在编写代码时，始终遵循 ArkUI 的性能优化原则，避免在 build() 方法中执行复杂计算或频繁的状态更新。

十、进一步学习与拓展

掌握以上内容后，可以进一步探索以下相关主题，深化对 HarmonyOS 开发的理解：

10.1 推荐学习路径

学习阶段 主题 预期目标
基础阶段 掌握核心概念和 API 用法 能够独立完成基本功能开发
进阶阶段 理解底层原理和最佳实践 能够优化应用性能和用户体验
高级阶段 掌握架构设计和性能调优 能够主导复杂项目的技术方案

10.2 实践项目建议

建议通过以下实践项目巩固所学知识：

  1. 基于小事记项目，尝试独立实现一个类似的功能模块
  2. 阅读 HarmonyOS 官方 Sample 代码，学习最佳实践
  3. 参与开源社区，贡献代码或文档

10.3 相关资源

  • HarmonyOS 官方文档：提供完整的 API 参考和开发指南
  • DevEco Studio 文档：包含 IDE 使用技巧和调试方法
  • 开源社区：获取项目源码和开发经验

学习建议：理论与实践相结合，在阅读文档的同时动手编写代码，才能更好地掌握 HarmonyOS 应用开发技能。

10.4 拓展阅读

以下资源可以加深对本文内容的理解：

  1. HarmonyOS 官方开发者文档提供了最权威的 API 参考和最佳实践指南
  2. 开源社区的项目源码是学习实际应用开发的宝贵资源
  3. DevEco Studio 的代码示例模板可以帮助快速上手
资源类型 推荐指数 适用人群
官方文档 ⭐⭐⭐⭐⭐ 所有开发者
开源项目 ⭐⭐⭐⭐ 中级开发者
技术博客 ⭐⭐⭐ 入门开发者

学习路径：建议按照“官方文档 → 开源项目 → 实践项目“的路径循序渐进地学习。

十、完整示例：Canvas 绘图封装

将 Canvas 绘图操作封装为可复用的绘制工具，可以简化图形绘制逻辑。

10.1 绘图工具封装

// CanvasUtil.ets — Canvas 绘图工具
import { CanvasRenderingContext2D } from '@kit.ArkUI';

export class CanvasUtil {
  static drawRoundRect(
    ctx: CanvasRenderingContext2D,
    x: number, y: number, w: number, h: number, r: number
  ): void {
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + w - r, y);
    ctx.arcTo(x + w, y, x + w, y + r, r);
    ctx.lineTo(x + w, y + h - r);
    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
    ctx.lineTo(x + r, y + h);
    ctx.arcTo(x, y + h, x, y + h - r, r);
    ctx.lineTo(x, y + r);
    ctx.arcTo(x, y, x + r, y, r);
    ctx.closePath();
  }

  static drawPieChart(
    ctx: CanvasRenderingContext2D,
    cx: number, cy: number, radius: number,
    data: { label: string; value: number; color: string }[]
  ): void {
    const total = data.reduce((s, d) => s + d.value, 0);
    let startAngle = -Math.PI / 2;

    for (const item of data) {
      const angle = (item.value / total) * Math.PI * 2;
      ctx.beginPath();
      ctx.moveTo(cx, cy);
      ctx.arc(cx, cy, radius, startAngle, startAngle + angle);
      ctx.closePath();
      ctx.fillStyle = item.color;
      ctx.fill();
      startAngle += angle;
    }
  }
}

10.2 使用示例

// 初始化 Canvas 上下文
const ctx = new CanvasRenderingContext2D();

// 绘制圆角矩形
CanvasUtil.drawRoundRect(ctx, 20, 20, 200, 100, 16);
ctx.fillStyle = '#7B68EE';
ctx.fill();

// 绘制饼图
CanvasUtil.drawPieChart(ctx, 200, 300, 80, [
  { label: '开心', value: 45, color: '#54A0FF' },
  { label: '温暖', value: 30, color: '#FF9F43' },
  { label: '感动', value: 25, color: '#FF6B9D' }
]);

10.3 Canvas API 参考

API 功能 性能影响
beginPath 开始新路径 低
arc 绘制圆弧 中
fill 填充路径 中
drawImage 绘制图像 高
clip 裁剪区域 中

Canvas 优化：避免在每一帧都重新绘制静态内容，使用离屏 Canvas 缓存可以提高绘制性能。

总结

// Canvas 绘制示例
private context: CanvasRenderingContext2D;

function draw(): void {
  this.context.beginPath();
  this.context.moveTo(50, 50);
  this.context.lineTo(200, 150);
  this.context.stroke();
}

本文深入解析了自定义形状绘制的高级 API。核心要点如下：

  1. Path 路径：支持贝塞尔曲线、直线、弧线
  2. Brush 填充：支持纯色和渐变填充
  3. Pen 描边：支持线宽、端点样式、连接样式
  4. 环形图：使用 arc 绘制扇形，实现环形图

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

九、完整示例代码

9.1 完整组件实现

以下是一个完整的组件实现示例，展示了本文介绍的各个技术点的综合运用：

import { Component, State, Prop } from '@kit.ArkUI';

@Component
export struct DemoComponent {
  @Prop title: string = '';
  @State count: number = 0;

  build() {
    Column({ space: 12 }) {
      // 标题区域
      Text(this.title)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor('#1A1A2E')
        .width('100%')

      // 内容区域
      Text(`当前计数: ${this.count}`)
        .fontSize(14)
        .fontColor('#6B7280')

      // 交互按钮
      Button('点击增加')
        .width(120)
        .height(40)
        .backgroundColor('#7B68EE')
        .borderRadius(20)
        .fontColor(Color.White)
        .onClick(() => {
          this.count++;
        })
    }
    .width('100%')
    .padding(16)
    .backgroundColor(Color.White)
    .borderRadius(12)
    .shadow({ radius: 4, color: '#00000008', offsetX: 0, offsetY: 2 })
  }
}

9.2 使用方式

在页面中引入并使用该组件：

@Entry
@Component
struct Index {
  build() {
    Column() {
      DemoComponent({ title: '示例组件' })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F8F9FA')
  }
}

9.3 代码说明

  • 组件封装：使用 @Component 装饰器定义可复用的组件
  • 状态管理：使用 @State 管理组件内部状态
  • 参数传递：使用 @Prop 接收外部传入的参数
  • 事件处理：使用 onClick 处理用户交互
  • 样式优化：使用 borderRadius、shadow 等属性美化 UI

相关资源：

# 后端
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

鸿蒙 ArkTS 实战：Grocery Unit Price Compare 从买菜单价比较到购物比价应用完整解析

avatar HarmonyOS开发者社区
cover

鸿蒙 ArkTS 实战：Split Bill Calculator 从AA账单到账单分摊应用完整解析

avatar HarmonyOS开发者社区
cover

鸿蒙 ArkTS 实战：Secondhand Book Exchange 从二手书交换站到社区换书应用完整解析

avatar HarmonyOS开发者社区