「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas组件自定义绘图

简介: Canvas 组件在鸿蒙应用中用于绘制自定义图形,提供丰富的绘制功能和灵活的定制能力。通过 Canvas,可以创建矩形、圆形、路径、文本等基础图形,为鸿蒙应用增添个性化的视觉效果。本篇将介绍 Canvas 组件的基础操作,涵盖绘制矩形、圆形、路径和文本的实例。

Canvas 组件在鸿蒙应用中用于绘制自定义图形,提供丰富的绘制功能和灵活的定制能力。通过 Canvas,可以创建矩形、圆形、路径、文本等基础图形,为鸿蒙应用增添个性化的视觉效果。本篇将介绍 Canvas 组件的基础操作,涵盖绘制矩形、圆形、路径和文本的实例。


关键词
  • Canvas 组件
  • 绘图
  • 矩形绘制
  • 圆形绘制
  • 路径与文本

一、Canvas 组件概述

Canvas 组件是鸿蒙中用于自定义图形绘制的关键组件。通过 Canvas,开发者可以绘制多种图形元素,包括矩形、圆形、路径和文本,满足应用中各种个性化的设计需求。


二、基础图形绘制

2.1 绘制矩形

Canvas 提供了 fillRectstrokeRect 方法,可以绘制填充矩形和描边矩形。

@Entry
@Component
struct RectangleCanvasExample {
   
  build() {
   
    Column() {
   
      Canvas(this.context)
        .width('100%')
        .height(500)
        .onReady(() => {
   
          // 设置填充颜色为蓝色
          this.context.fillStyle = '#0000FF';
          // 绘制填充矩形
          this.context.fillRect(150, 150, 300, 200);

          // 设置描边颜色为黑色
          this.context.strokeStyle = '#000000';
          // 设置描边宽度为 5
          this.context.lineWidth = 5;
          // 绘制描边矩形
          this.context.strokeRect(150, 150, 300, 200);
        });
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();
}

效果示例:在画布上绘制一个蓝色填充、黑色边框的矩形。

Screenshot_2024-11-01T225918.png


2.2 绘制圆形

使用 arc 方法可以绘制圆形或圆弧,通过设置圆心坐标、半径等参数,可以实现完整圆形和部分圆弧的绘制。

@Entry
@Component
struct CircleCanvasExample {
   
  build() {
   
    Column() {
   
      Canvas(this.context)
        .width('100%')
        .height(600)
        .onReady(() => {
   
          // 设置填充颜色为绿色
          this.context.fillStyle = '#00FF00';
          // 开始绘制路径
          this.context.beginPath();
          // 绘制圆形,指定圆心坐标、半径、起始角度和结束角度
          this.context.arc(300, 300, 100, 0, 2 * Math.PI);
          // 填充圆形
          this.context.fill();
        });
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();
}

效果示例:在画布上绘制一个绿色填充的圆形。

Screenshot_2024-11-01T225947.png


三、路径绘制

通过 Canvas 中的路径绘制方法可以创建更复杂的自定义图形。可以使用 beginPathmoveTolineTo 等方法绘制路径,并使用 fillstroke 设置填充或边框样式。

3.1 绘制多边形

以下代码展示了如何在 Canvas 上绘制一个简单的三角形路径。

@Entry
@Component
struct PathCanvasExample {
   
  build() {
   
    Column() {
   
      Canvas(this.context)
        .width('100%')
        .height(600)
        .onReady(() => {
   
          // 设置路径边框颜色为红色
          this.context.strokeStyle = '#FF0000';
          // 设置路径边框宽度为 3
          this.context.lineWidth = 5;
          // 开始绘制路径
          this.context.beginPath();
          this.context.moveTo(200, 100); // 顶点 1
          this.context.lineTo(300, 500); // 顶点 2
          this.context.lineTo(100, 500); // 顶点 3
          this.context.closePath(); // 闭合路径
          // 绘制路径边框
          this.context.stroke();
        });
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();
}

效果示例:在画布上绘制一个红色边框的三角形路径。

Screenshot_2024-11-01T230020.png


四、文本绘制

Canvas 组件中,可以通过 fillText 绘制文本,适用于显示标题、标注等文字信息。可以设置字体大小、颜色等属性。

4.1 绘制文本

使用 fillText 方法在 Canvas 中绘制文本,并设置字体、颜色等样式。

@Entry
@Component
struct TextCanvasExample {
   
  build() {
   
    Column() {
   
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .onReady(() => {
   
          // 设置字体样式和大小
          this.context.font = '72px sans-serif';
          // 设置文本颜色为紫色
          this.context.fillStyle = '#800080';
          // 绘制文本
          this.context.fillText('Hello HarmonyOS!', 150, 350);
        });
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();
}

效果示例:在画布上绘制一个紫色的文本“Hello HarmonyOS!”。

Screenshot_2024-11-01T230049.png


五、综合绘图实例:多图层绘制

以下示例展示了如何在 Canvas 组件中通过组合多个图形来创建更丰富的视觉效果,包括矩形、圆形、路径和文本的综合绘制。

@Entry
@Component
struct ComplexCanvasExample {
   
  build() {
   
    Column() {
   
      Canvas(this.context)
        .width('100%')
        .height(700)
        .onReady(() => {
   
          // 绘制背景矩形
          this.context.fillStyle = '#D3D3D3';
          this.context.fillRect(0, 0, 300, 400);

          // 绘制蓝色圆形
          this.context.fillStyle = '#0000FF';
          this.context.beginPath();
          this.context.arc(150, 100, 70, 0, 2 * Math.PI);
          this.context.fill();

          // 绘制黑色文本
          this.context.font = '24px sans-serif';
          this.context.fillStyle = '#000000';
          this.context.fillText('Canvas Demo', 85, 300);

          // 绘制红色三角形路径
          this.context.strokeStyle = '#FF0000';
          this.context.lineWidth = 3;
          this.context.beginPath();
          this.context.moveTo(75, 350);
          this.context.lineTo(225, 350);
          this.context.lineTo(150, 250);
          this.context.closePath();
          this.context.stroke();
        });
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();
}

效果示例:在画布上绘制多层图形效果,包括背景矩形、蓝色圆形、黑色文本和红色三角形路径。

Screenshot_2024-11-01T230127.png


小结

本篇详细介绍了鸿蒙 Canvas 组件的基本用法,涵盖了矩形、圆形、路径和文本的绘制。通过合理运用这些基础绘图方法,开发者可以自由绘制丰富多样的图形效果,满足个性化的应用需求。


下一篇预告

在下一篇中,将进一步介绍 Canvas 组件的静态进阶应用,让 Canvas 绘制更加有趣。


上一篇: 「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现

下一篇: 「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas组件的静态进阶应用


作者:SoraLuna
链接:https://www.nutpi.net/thread?topicId=238
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


目录
相关文章
|
10天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
137 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
1月前
「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用
本篇教程将介绍如何创建一个模拟记账应用,通过账单输入、动态列表展示和实时统计功能,学习接口定义和组件间的数据交互。
168 68
|
1月前
|
UED
「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统
本篇教程将实现一个模拟火车票查询系统,通过输入条件筛选车次信息,并展示动态筛选结果,学习事件处理、状态管理和界面展示的综合开发技巧。
70 13
|
1月前
「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提醒小应用
本篇教程将实现一个打卡提醒小应用,通过用户输入时间进行提醒设置,并展示实时提醒状态,实现提醒设置和取消等功能。
68 10
|
6月前
|
NoSQL 数据可视化 Redis
Mac安装Redis
Mac安装Redis
116 3
|
5月前
|
iOS开发 MacOS Windows
Mac air使用Boot Camp安装win10 ,拷贝 Windows 文件时出错
Mac air使用Boot Camp安装win10 ,拷贝 Windows 文件时出错
|
3月前
|
开发工具 git 开发者
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
本篇将专注于如何在 DevEco Studio 中安装和配置必要的插件,以增强开发功能和提升效率。通过正确配置插件,开发流程能够得到简化,开发体验也会更加顺畅。
178 1
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
|
5月前
|
Oracle Java 关系型数据库
Mac电脑上安装和配置Flutter开发环境
Mac电脑上安装和配置Flutter开发环境
163 59
|
4月前
|
机器学习/深度学习 Python
【10月更文挑战第5天】「Mac上学Python 6」入门篇6 - 安装与使用Anaconda
本篇将详细介绍如何在Mac系统上安装和配置Anaconda,如何创建虚拟环境,并学习如何使用 `pip` 和 `conda` 管理Python包,直到成功运行第一个Python程序。通过本篇,您将学会如何高效地使用Anaconda创建和管理虚拟环境,并使用Python开发。
155 4
【10月更文挑战第5天】「Mac上学Python 6」入门篇6 - 安装与使用Anaconda
|
4月前
|
IDE 开发工具 iOS开发
【10月更文挑战第3天】「Mac上学Python 3」入门篇3 - 安装Python与开发环境配置
本篇将详细介绍如何在Mac系统上安装Python,并配置Python开发环境。内容涵盖Python的安装、pip包管理工具的配置与国内镜像源替换、安装与配置PyCharm开发工具,以及通过PyCharm编写并运行第一个Python程序。通过本篇的学习,用户将完成Python开发环境的搭建,为后续的Python编程工作打下基础。
414 2
【10月更文挑战第3天】「Mac上学Python 3」入门篇3 - 安装Python与开发环境配置