theme: hydrogen

大家好，歡迎來到莓創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. 自定義RenderNode
export 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. 自定義NodeController
export 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
@Component
struct 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/]

審核編輯 黃宇