场景介绍

@ohos.graphics.drawing模块提供了基本的绘制能力，如绘制矩形、圆形、点、直线、自定义Path、字体等等。

接口说明

@ohos.graphics.drawing常用接口如下表所示
在这里插入图片描述

开发步骤

使用Drawing进行图形绘制与显示时，需要使用@ohos.graphics.drawing模块的画布画笔绘制基本的2D图形和文字，调用绘制和显示的逻辑，最终在应用上显示图形和文字。

本文以实现2D图形和文字的绘制与显示为例，给出具体的开发指导。

添加开发依赖

添加动态链接库

CMakeLists.txt中添加以下lib。

libace_ndk.z.so
libnative_window.so
libnative_drawing.so

依赖文件

i

mport { NodeController, FrameNode, RenderNode, DrawContext } from "@ohos.arkui.node"
import { UIContext } from '@ohos.arkui.UIContext'
import drawing from "@ohos.graphics.drawing"
import image from '@ohos.multimedia.image'
import common2D from '@ohos.graphics.common2D'

接下来介绍如何使用Drawing接口进行内容绘制。

绘制2D图形

以下步骤描述了如何使用@ohos.graphics.drawing模块的画布画笔绘制基本的2D图形和文字：

1.创建RenderNode子类。创建RenderNode子类MyRenderNode，并在其中定义绘图函数。RenderNode中包含树结构的操作，以及对绘制属性的操作。

// 创建一个MyRenderNode类，并构建Path形状。
class MyRenderNode extends RenderNode {

    async draw(context: DrawContext) {
        // ...
    }
}

2.构建Path形状。使用path的moveTo，lineTo和close接口构建五角星形状的Path。

const canvas = context.canvas
let height_ = 1200
let width_ = 600
let len = height_ / 4
let aX = width_ / 2
let aY = height_ / 4
let dX = aX - len * Math.sin(18.0)
let dY = aY + len * Math.cos(18.0)
let cX = aX + len * Math.sin(18.0)
let cY = dY
let bX = aX + (len / 2.0)
let bY = aY + Math.sqrt((cX - dX) * (cX - dX) + (len / 2.0) * (len / 2.0))
let eX = aX - (len / 2.0)
let eY = bY;

// 创建一个path对象，然后使用接口连接成一个五角星形状
let path = new drawing.Path()

// 指定path的起始位置
path.moveTo(aX, aY)

// 用直线连接到目标点
path.lineTo(bX, bY)
path.lineTo(cX, cY)
path.lineTo(dX, dY)
path.lineTo(eX, eY)

// 闭合形状，path绘制完毕
path.close()

3.设置画笔和画刷样式。使用Pen接口创建一个画笔实例pen，并设置抗锯齿、颜色、线宽等属性，画笔用于形状边框线的绘制。使用Brush接口创建一个画刷实例brush，并设置填充颜色，画刷用于形状内部的填充。使用canvas中的attachPen和attachBrush接口将画笔画刷的实例设置到画布实例中。

// 创建一个画笔Pen对象，Pen对象用于形状的边框线绘制
let pen = new drawing.Pen()
pen.setAntiAlias(true)
let pen_color : common2D.Color = { alpha: 0xFF, red: 0xFF, green: 0x00, blue: 0x00 }
pen.setColor(pen_color)
pen.setStrokeWidth(10.0)

// 将Pen画笔设置到canvas中
canvas.attachPen(pen)

// 创建一个画刷Brush对象，Brush对象用于形状的填充
let brush = new drawing.Brush()
let brush_color : common2D.Color = { alpha: 0xFF, red: 0x00, green: 0xFF, blue: 0x00 }
brush.setColor(brush_color)

// 将Brush画刷设置到canvas中
canvas.attachBrush(brush)

4.绘制Path形状。使用canvas中的drawPath接口将五角星绘制到画布上。

// 绘制path
canvas.drawPath(path)

5.创建MyRenderNode对象。以上1到4步构建出了MyRenderNode类并在其中定义了绘图的主要函数，接下来创建一个MyRenderNode对象，并设置它的像素格式。

// 创建一个MyRenderNode对象
const newNode = new MyRenderNode()
// 定义newNode的像素格式
newNode.frame = { x: 100, y: 100, width: 200, height: 800 }
newNode.pivot = { x: 0.2, y: 0.8 }
newNode.scale = { x: 1, y: 1 }

6.绘制矩形。使用canvas中的drawRect接口绘制矩形。

class RectRenderNode extends RenderNode {
    async draw(context: DrawContext) {
        const canvas = context.canvas
        const pen = new drawing.Pen()
        pen.setStrokeWidth(5)
        pen.setColor({alpha: 255, red: 255, green: 0, blue: 0})
        canvas.attachPen(pen)
        canvas.drawRect({ left : 200, right : 500, top : 300, bottom : 900})
    }
}
// 创建一个RectRenderNode对象
const rectNode = new RectRenderNode()
// 定义rectNode的像素格式
rectNode.frame = { x: 90, y: 100, width: 200, height: 800 }
rectNode.pivot = { x: 0.2, y: 0.8 }
rectNode.scale = { x: 1, y: 1 }

7.绘制文字。使用canvas中的drawTextBlob接口绘制文字。

class TextRenderNode extends RenderNode {
    async draw(context: DrawContext) {
        const canvas = context.canvas
        const brush = new drawing.Brush()
        brush.setColor({alpha: 255, red: 255, green: 0, blue: 0})
        const font = new drawing.Font()
        font.setSize(100)
        const textBlob = drawing.TextBlob.makeFromString("Hello World", font, drawing.TextEncoding.TEXT_ENCODING_UTF8)
        canvas.attachBrush(brush)
        canvas.drawTextBlob(textBlob, 90, 500)
    }
}
// 创建一个TextRenderNode对象
const textNode = new TextRenderNode()
// 定义textNode的像素格式
textNode.frame = { x: 90, y: 100, width: 200, height: 800 }
textNode.pivot = { x: 0.2, y: 0.8 }
textNode.scale = { x: 1, y: 1 }

8.创建NodeController子类。创建NodeController的子类MyNodeController，并在其中定义创建FrameNode的函数。NodeController定义了节点容器的控制器，控制着容器里在生命周期中的节点。FrameNode定义了节点的基本类型，并包含一个RenderNode。

class MyNodeController extends NodeController {
    private rootNode: FrameNode | null = null;

    makeNode(uiContext: UIContext): FrameNode {
        this.rootNode = new FrameNode(uiContext)
        if (this.rootNode == null) {
            return this.rootNode
        }
        const renderNode = this.rootNode.getRenderNode()
        if (renderNode != null) {
            renderNode.frame = { x: 0, y: 0, width: 10, height: 500 }
            renderNode.pivot = { x: 50, y: 50 }
        }
        return this.rootNode
    }
}

9.创建添加节点的接口。在第8步中创建的MyNodeController类中创建添加RenderNode的接口。

addNode(node: RenderNode): void {
    if (this.rootNode == null) {
        return
    }
    const renderNode = this.rootNode.getRenderNode()
    if (renderNode != null) {
        renderNode.appendChild(node)
    }
}

10.创建删除节点的接口。在第8步中创建的MyNodeController类中创建删除RenderNode的接口。

clearNodes(): void {
    if (this.rootNode == null) {
        return
    }
    const renderNode = this.rootNode.getRenderNode()
    if (renderNode != null) {
        renderNode.clearChildren()
    }
}

11.绘制图形和文字。创建MyNodeController实例并将其存入NodeContainer，添加button控件供用户点击，并调用已定义的接口。

@Entry
@Component
struct RenderTest {
    private myNodeController: MyNodeController = new MyNodeController()
    build() {
        Column() {
            Row() {
                NodeContainer(this.myNodeController)
                    .height('100%')
                Button("Draw Path")
                    .margin({ bottom: 200, right: 12 })
                    .onClick(() => {
                        this.myNodeController.clearNodes()
                        this.myNodeController.addNode(newNode)
                    })
                Button("Draw Rect")
                    .margin({ bottom: 200, right: 12 })
                    .onClick(() => {
                        this.myNodeController.clearNodes()
                        this.myNodeController.addNode(rectNode)
                    })
                Button("Draw Text")
                    .margin({ bottom: 200, right: 12 })
                    .onClick(() => {
                        this.myNodeController.clearNodes()
                        this.myNodeController.addNode(textNode)
                    })
            }
            .width('100%')
            .justifyContent(FlexAlign.Center)
            .shadow(ShadowStyle.OUTER_DEFAULT_SM)
            .alignItems(VerticalAlign.Bottom)
            .layoutWeight(1)
        }
    }
}

12.绘制与显示的效果图如下：
在这里插入图片描述

如果大家还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP应用开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

在这里插入图片描述

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

在这里插入图片描述

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

在这里插入图片描述

# harmonyos # 鸿蒙应用开发 # 华为 # 鸿蒙系统
Logo
HarmonyOS开发者社区

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

更多推荐

cover

鸿蒙UI系统组件06——进度条(Progress)

avatar HarmonyOS开发者社区
cover

鸿蒙（API 12 Beta3版）【自定义界面扫码】

avatar HarmonyOS开发者社区
cover

鸿蒙Native项目生产动态库(.so) 和静态库(.a)

avatar HarmonyOS开发者社区