在 ArkTS 中，Canvas 组件是一个功能强大的用于绘制图形、图像以及实现自定义绘制效果的组件，以下是关于它的详细介绍及使用方法：

基本概念

Canvas 组件提供了一个二维的绘图平面，开发者可以在这个平面上运用各种绘图方法和指令来绘制直线、矩形、圆形、文本等多种元素，还能对绘制的内容进行变换、组合等操作，从而创建出丰富多样的可视化效果。

创建 Canvas 组件

  • 在组件构建方法中添加：在 ArkTS 的组件构建函数（ build ）里引入并使用 Canvas 组件。例如：
import { Canvas } from '@ohos.multimedia.canvas';
@Entry
@Component
struct CanvasExample {
build() {
Canvas({
width: '100%',
height: '100%',
onDraw: (dc: DrawingContext) => {
// 在这里进行绘图操作
}
})
}
}
上述代码创建了一个占据整个父容器宽度和高度的 Canvas 组件，并通过 onDraw 回调函数来定义具体的绘图操作，其中 dc 是绘图上下文（DrawingContext），用于实际执行绘图指令。

绘图上下文（DrawingContext）及常用绘图方法

  1. 获取绘图上下文：如上述示例，在 Canvas 组件的 onDraw 事件回调中会传入绘图上下文对象，通过它来调用各种绘图方法。
  2. 绘制基本图形：
  • 绘制直线：使用 dc.drawLine 方法，需要指定起点和终点的坐标（ x1 ， y1 ）和（ x2 ，y2 ）以及线条的属性（如颜色、宽度等）。例如：
dc.drawLine({
x1: 50,
y1: 50,
x2: 150,
y2: 150,
color: Color.Black,
width: 2
});
  • 绘制矩形：有多种绘制矩形的方式，比如 dc.strokeRect 用于绘制空心矩形边框， dc.fillRect用于绘制填充矩形。示例如下：
// 绘制空心矩形边框
dc.strokeRect({
x: 20,
y: 20,
width: 100,
height: 80,
color: Color.Red,
width: 3
});
// 绘制填充矩形
dc.fillRect({
x: 150,
y: 20,
width: 100,
height: 80,
color: Color.Blue
});
  • 绘制圆形：通过 dc.drawCircle 方法，指定圆心坐标（ x ， y ）以及半径 r 和相关属性来绘制圆形。例如：
dc.drawCircle({
x: 100,
y: 150,
r: 40,
color: Color.Green,
width: 2
});
  • 绘制文本：利用 dc.drawText 方法来在 Canvas 上绘制文字内容，需要指定文本内容、绘制位置坐标以及文本的字体、字号、颜色等属性。例如：
dc.drawText({
text: "Hello, Canvas!",
x: 80,
y: 200,
fontSize: 16,
color: Color.Black
});

图形样式设置

  • 颜色设置：除了在各个绘图方法中单独指定颜色外，还可以通过 dc.setStrokeStyle （用于设置线条颜色，如矩形边框、直线等的颜色）和 dc.setFillStyle （用于设置填充颜色，像填充矩 形、圆形内部等的填充色）来统一设置颜色样式。例如：
dc.setStrokeStyle(Color.Purple);
dc.setFillStyle(Color.Yellow);
  • 线条宽度及其他属性：使用 dc.setLineWidth 方法可以设置线条的宽度，另外还可以设置线条的端点样式（如圆形端点、方形端点等）、连接样式（如斜角连接、圆角连接等）等属性来精细调整图形外观。示例：
dc.setLineWidth(4);
dc.setLineCap('round');
dc.setLineJoin('bevel');

图形变换操作

  • 平移变换：通过 dc.translate 方法可以将整个绘图坐标系进行平移，改变后续绘图的起始位置。例如，将坐标系原点平移到（ 50 ， 50 ）位置：
dc.translate(50, 50);
  • 旋转变换：使用 dc.rotate 方法实现图形的旋转，需要传入旋转的角度（以弧度制表示，可通过Math.PI / 180 * angle 将角度值转换为弧度值， angle 是角度）。例如，将绘图平面逆时针旋转 30 度：
let angleInRadians = Math.PI / 180 * 30;
dc.rotate(angleInRadians);
  • 缩放变换： dc.scale 方法用于对绘图进行缩放操作，传入水平和垂直方向的缩放比例值。例如，将图形在水平方向放大 2 倍，垂直方向放大 1.5 倍：
dc.scale(2, 1.5);

图像绘制及处理

  • 绘制图像（以 PixelMap 为例）：如果有已经获取到的 PixelMap 类型的图像数据，可以使用dc.drawPixelMap 方法将图像绘制到 Canvas 上，指定图像的绘制位置坐标等信息。例如：
import image from '@ohos.multimedia.image';
image.createPixelMapFromFile('resources/base/media/test.jpg').then((pixelMap) =>
{
dc.drawPixelMap(pixelMap, 0, 0);
});
  • 图像裁剪及其他处理：结合绘图方法和变换操作，可以对绘制在 Canvas 上的图像进行裁剪、变形等处理，比如先绘制图像，再通过设置裁剪区域，只显示裁剪后的部分图像等。

应用场景

  • 数据可视化：将数据以图表（如柱状图、折线图、饼图等）的形式绘制在 Canvas 上，直观展示数据的分布和趋势，便于用户分析和理解。
  • 游戏开发：绘制游戏中的各种元素，如角色、道具、场景背景等，通过不断更新 Canvas 上的图形和变换来实现游戏的动画效果和交互逻辑。
  • 自定义 UI 组件：创建具有独特外观的自定义按钮、进度条、装饰性元素等 UI 组件，使应用界面更具个性化和独特性。
# 前端 # javascript # 开发语言 # 鸿蒙 # 鸿蒙系统
Logo
HarmonyOS开发者社区

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

更多推荐

鸿蒙智能待办：钉钉学而思待办自动同步日历

点外卖后不用反复打开App看取餐号，智能待办会自动归集瑞幸、KFC、麦当劳等餐饮取餐号，在取餐时间到时主动提醒。出行方面，同程旅行、携程旅行平台的票务出行、酒店订单信息也能统一归集，时序化整理后自动提醒出发时间和登机信息。升级鸿蒙6.1，让AI帮你记住每一件重要的事。还可统一归集瑞幸、KFC、麦当劳等餐饮取餐号及各类同程旅行、携程旅行平台的票务出行、酒店订单信息，并进行时序化整理和智能提醒。Har

avatar HarmonyOS开发者社区

鸿蒙AI防诈能力：场景化防诈+换脸检测+亲情防诈

用AI对抗AI，用智能对抗狡猾，这正是鸿蒙安全"更智能"的体现。在AI换脸诈骗层出不穷的今天，鸿蒙用场景化防诈、换脸检测、亲情防诈三重AI防护对抗新型威胁——安全好用才是真好用。现在，AI技术飞速发展，电信诈骗手段层出不穷，从"冒充公检法"到"AI换脸视频通话"，用户防不胜防。HarmonyOS 6的AI防护能力已扩展至AI场景化防诈、AI换脸检测、亲情防诈三大方向，用AI对抗AI，为你筑起智能化

avatar HarmonyOS开发者社区

鸿蒙开发--IAPKit-ArkTS

HarmonyOS IAP Kit 应用内购买功能摘要 HarmonyOS IAP Kit 是华为提供的应用内支付解决方案，支持三种商品类型：消耗型（如游戏钻石）、非消耗型（如永久会员）和订阅型（如月度会员）。开发者需要先在AppGallery Connect后台开通商户服务并配置商品信息（包括商品ID、名称、价格等）。在代码实现上，主要流程包括：检查支付环境、查询商品信息、发起购买请求并处理支付

avatar HarmonyOS开发者社区