admin管理员组文章数量:1037775
鸿蒙原生绘图 API：从基础到高阶的绘制之旅（基础版）
大家好，欢迎来到莓创 IT 技术分享频道，我是陈杨。由于经常有小伙伴一直给我反馈说莓创图表（mccharts）数据多的时候经常卡顿，很无奈之前做动画的时候没考虑 ArkTs 的性能瓶颈，导致现在又要重构开发。于是我重新翻阅文档，看看有没有新的方式来解决。在翻阅官网文档的时候，无意间看到这句话。
发现了@ohos.graphics.drawing模块性能竟然比 canvas 好，所以最近我有时间都在学习这个 API 的功能，准备将莓创图表（mccharts）进行性能升级，打造更加完美的图表组件库。这次我也给大家好好分享一下这个 API，给大家准备了三篇，写的不好请见谅。
一、导入模块（@ohos.graphics.drawing）
要使用这个绘图模块，第一步得把它导入到咱们的代码里。在代码里加上这行：
代码语言：javascript代码运行次数：0运行复制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模式，是在目标像素的上面绘制源像素，而且还会考虑源像素的透明度，这样颜色叠加起来就会有不一样的效果，让图形看起来更有层次感。
四、案例：绘制一个多彩的界面
咱们来综合运用这些知识，画一个简单的多彩界面，不过显示比较麻烦。假设要画一个蓝色的矩形，再在上面画一个红色的圆形，代码可以这么写：
代码语言：javascript代码运行次数：0运行复制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/
鸿蒙原生绘图 API：从基础到高阶的绘制之旅（基础版）
大家好，欢迎来到莓创 IT 技术分享频道，我是陈杨。由于经常有小伙伴一直给我反馈说莓创图表（mccharts）数据多的时候经常卡顿，很无奈之前做动画的时候没考虑 ArkTs 的性能瓶颈，导致现在又要重构开发。于是我重新翻阅文档，看看有没有新的方式来解决。在翻阅官网文档的时候，无意间看到这句话。
发现了@ohos.graphics.drawing模块性能竟然比 canvas 好，所以最近我有时间都在学习这个 API 的功能，准备将莓创图表（mccharts）进行性能升级，打造更加完美的图表组件库。这次我也给大家好好分享一下这个 API，给大家准备了三篇，写的不好请见谅。
一、导入模块（@ohos.graphics.drawing）
要使用这个绘图模块，第一步得把它导入到咱们的代码里。在代码里加上这行：
代码语言：javascript代码运行次数：0运行复制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模式，是在目标像素的上面绘制源像素，而且还会考虑源像素的透明度，这样颜色叠加起来就会有不一样的效果，让图形看起来更有层次感。
四、案例：绘制一个多彩的界面
咱们来综合运用这些知识，画一个简单的多彩界面，不过显示比较麻烦。假设要画一个蓝色的矩形，再在上面画一个红色的圆形，代码可以这么写：
代码语言：javascript代码运行次数：0运行复制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/
本文标签： 鸿蒙原生绘图 API从基础到高阶的绘制之旅（基础版）
版权声明：本文标题：鸿蒙原生绘图 API：从基础到高阶的绘制之旅（基础版） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1748281769a2279449.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论