鸿蒙原生绘图 API：从基础到高阶的绘制之旅（基础版）

2025-03-13
广东
本文字数：2852 字
阅读完需：约 9 分钟

大家好，欢迎来到莓创 IT 技术分享频道，我是陈杨。由于经常有小伙伴一直给我反馈说莓创图表（mccharts）数据多的时候经常卡顿，很无奈之前做动画的时候没考虑 ArkTs 的性能瓶颈，导致现在又要重构开发。于是我重新翻阅文档，看看有没有新的方式来解决。在翻阅官网文档的时候，无意间看到这句话。

发现了@ohos.graphics.drawing模块性能竟然比 canvas 好，所以最近我有时间都在学习这个 API 的功能，准备将莓创图表（mccharts）进行性能升级，打造更加完美的图表组件库。这次我也给大家好好分享一下这个 API，给大家准备了三篇，写的不好请见谅。

一、导入模块（@ohos.graphics.drawing）

要使用这个绘图模块，第一步得把它导入到咱们的代码里。在代码里加上这行：

import { drawing } from '@kit.ArkGraphics2D';

复制代码

这样，咱们就可以使用模块里的各种功能啦。

二、绘制基本图形

（一）绘制矩形

在鸿蒙绘图里，绘制矩形有两种常用方法，都在Canvas类里。第一种方法是drawRect(rect: common2D.Rect): void。这里的rect参数是一个common2D.Rect类型的对象，它就像是矩形的“定位器”和“尺码表”，通过设置left（左边的位置）、right（右边的位置）、top（上边的位置）和bottom（下边的位置），能精确确定矩形在画布上的位置和大小。来看个例子：

import { common2D, drawing } from '@kit.ArkGraphics2D';class DrawingRenderNode {    draw(context) {        const canvas = context.canvas;        const rect = { left: 50, right: 150, top: 50, bottom: 150 };        canvas.drawRect(rect);    }}

复制代码

从 API version 12 开始，又多了一个更方便的方法drawRect(left: number, top: number, right: number, bottom: number): void。这个方法直接传入矩形四个角的坐标就行，代码写起来更简洁，而且性能还更好呢！比如：

canvas.drawRect(50, 50, 150, 150);

复制代码

（二）绘制圆形

绘制圆形就用drawCircle(x: number, y: number, radius: number): void这个方法。x和y代表圆心在画布上的坐标，就像给圆心定个“家”，radius就是圆的半径啦，而且半径得是大于 0 的正数，不然就画不出圆咯。举个例子：

canvas.drawCircle(100, 100, 30);

复制代码

这行代码就是在坐标(100, 100)的地方画一个半径为30的圆。想象一下，就像在画布上找到了一个中心点，然后以这个点为中心，用半径为30的“画笔”转一圈，一个圆就画好啦。

三、设置颜色和混合模式

（一）绘制颜色

给图形上色可以用drawColor方法，它有两种形式。第一种drawColor(color: common2D.Color, blendMode?: BlendMode): void，这里的color是ARGB格式的颜色，ARGB分别代表透明度（Alpha）、红色（Red）、绿色（Green）、蓝色（Blue）。blendMode是颜色混合模式，默认是SRC_OVER。比如咱们想画个红色的图形，代码可以这样写：

import { common2D, drawing } from '@kit.ArkGraphics2D';canvas.drawColor({ alpha: 255, red: 255, green: 0, blue: 0 }, drawing.BlendMode.SRC_OVER);

复制代码

从 API version 12 开始，又有了一个更简单直接的方法drawColor(alpha: number, red: number, green: number, blue: number, blendMode?: BlendMode): void。直接把颜色通道的值传进去就行，用起来更方便，性能也更好。像这样：

canvas.drawColor(255, 255, 0, 0, drawing.BlendMode.SRC_OVER);

复制代码

（二）颜色混合模式

颜色混合模式就像是给图形颜色玩“魔法组合”，BlendMode枚举里有好多有趣的模式可以选择。比如说CLEAR模式，用了它，绘制区域就会变得全透明，就好像图形隐身了一样。看代码：

canvas.drawColor({ alpha: 255, red: 255, green: 0, blue: 0 }, drawing.BlendMode.CLEAR);

复制代码

而默认的SRC_OVER模式，是在目标像素的上面绘制源像素，而且还会考虑源像素的透明度，这样颜色叠加起来就会有不一样的效果，让图形看起来更有层次感。

四、案例：绘制一个多彩的界面

咱们来综合运用这些知识，画一个简单的多彩界面，不过显示比较麻烦。假设要画一个蓝色的矩形，再在上面画一个红色的圆形，代码可以这么写：

import { UIContext, NodeController, FrameNode, RenderNode, DrawContext } from '@kit.ArkUI';import { common2D, drawing } from '@kit.ArkGraphics2D';
// 1. 自定义RenderNodeexport class MyRenderNode extends RenderNode {  async draw(context: DrawContext) {    const canvas = context.canvas;        // 绘制蓝色矩形        const blueRect = { left: 30, right: 130, top: 30, bottom: 130 };        canvas.drawColor({ alpha: 255, red: 0, green: 0, blue: 255 }, drawing.BlendMode.SRC);        canvas.drawRect(blueRect);        // 绘制红色圆形        canvas.drawColor({ alpha: 255, red: 255, green: 0, blue: 0 }, drawing.BlendMode.SRC);        canvas.drawCircle(80, 80, 30);  }}
// 2. 自定义NodeControllerexport class MyNodeController extends NodeController {  private rootNode: FrameNode | null = null;  myRenderNode = new MyRenderNode();
  makeNode(uiContext: UIContext): FrameNode {    this.rootNode = new FrameNode(uiContext);    if (this.rootNode === null) {      return this.rootNode    }
    const renderNode = this.rootNode.getRenderNode();    if (renderNode !== null) {      this.myRenderNode.backgroundColor = 0xffffffff;      this.myRenderNode.frame = { x: 0, y: 0, width: 4800, height: 4800 };      this.myRenderNode.pivot = { x: 0.2, y: 0.8 }      this.myRenderNode.scale = { x: 1, y: 1 }      renderNode.appendChild(this.myRenderNode);      renderNode.clipToFrame = true    }    return this.rootNode;  }}
@Entry@Componentstruct RenderTest {  @State message: string = 'hello'  build() {    Row() {      Column() {        // 4. 将自定义NodeController进行显示        NodeContainer(new MyNodeController())          .width('100%')      }      .width('100%')      .height('80%')    }    .height('100%')  }}

复制代码

在这段代码里，先设置颜色为蓝色，用SRC混合模式填充矩形区域，再绘制蓝色矩形。接着设置颜色为红色，同样用SRC混合模式，然后绘制红色圆形。运行这段代码，就能看到一个蓝色矩形上面有个红色圆形的界面啦。

今天咱们学习了鸿蒙绘图@ohos.graphics.drawing模块的基础用法，包括导入模块、绘制基本图形、设置颜色和混合模式，还做了一个小案例。掌握了这些基础，后面咱们就能继续探索进阶和高阶的绘图技巧，画出更厉害的图形啦！赶紧动手试试吧，要是遇到问题，多调试调试代码，或者去官方文档里找找答案。加油，期待大家画出超酷的图形！

也可以加入我们鸿蒙技术交流群，开发鸿蒙原生应用过程有啥问题都可以在群沟通，互相帮助，一起进步。

在开发鸿蒙原生应用的时候，需要用到图表组件的也可以尝试使用我们封装的。图表的官网地址：meichuangit.net.cn/

发布于: 刚刚阅读数: 4

莓创技术

关注

一只会打代码的羊 2020-03-20 加入

还未添加个人简介

发布

暂无评论

创作场景

鸿蒙原生绘图 API：从基础到高阶的绘制之旅（基础版）

一、导入模块（@ohos.graphics.drawing）

二、绘制基本图形

（一）绘制矩形

（二）绘制圆形

三、设置颜色和混合模式

（一）绘制颜色

（二）颜色混合模式

四、案例：绘制一个多彩的界面

莓创技术

评论