theme: hydrogen

大家好，歡迎來(lái)到莓創(chuàng)IT技術(shù)分享頻道，我是陳楊。由于經(jīng)常有小伙伴一直給我反饋說(shuō)莓創(chuàng)圖表（mccharts）數(shù)據(jù)多的時(shí)候經(jīng)?？D，很無(wú)奈之前做動(dòng)畫的時(shí)候沒(méi)考慮ArkTs的性能瓶頸，導(dǎo)致現(xiàn)在又要重構(gòu)開發(fā)。于是我重新翻閱文檔，看看有沒(méi)有新的方式來(lái)解決。在翻閱官網(wǎng)文檔的時(shí)候，無(wú)意間看到這句話。

發(fā)現(xiàn)了@ohos.graphics.drawing模塊性能竟然比canvas好，所以最近我有時(shí)間都在學(xué)習(xí)這個(gè)API的功能，準(zhǔn)備將莓創(chuàng)圖表（mccharts）進(jìn)行性能升級(jí)，打造更加完美的圖表組件庫(kù)。這次我也給大家好好分享一下這個(gè)API，給大家準(zhǔn)備了三篇，寫的不好請(qǐng)見(jiàn)諒。

一、導(dǎo)入模塊（@ohos.graphics.drawing）

要使用這個(gè)繪圖模塊，第一步得把它導(dǎo)入到咱們的代碼里。在代碼里加上這行：

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

這樣，咱們就可以使用模塊里的各種功能啦。

二、繪制基本圖形

（一）繪制矩形

在鴻蒙繪圖里，繪制矩形有兩種常用方法，都在Canvas類里。
第一種方法是drawRect(rect: common2D.Rect): void。這里的rect參數(shù)是一個(gè)common2D.Rect類型的對(duì)象，它就像是矩形的“定位器”和“尺碼表”，通過(guò)設(shè)置left（左邊的位置）、right（右邊的位置）、top（上邊的位置）和bottom（下邊的位置），能精確確定矩形在畫布上的位置和大小。來(lái)看個(gè)例子：

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開始，又多了一個(gè)更方便的方法drawRect(left: number, top: number, right: number, bottom: number): void。這個(gè)方法直接傳入矩形四個(gè)角的坐標(biāo)就行，代碼寫起來(lái)更簡(jiǎn)潔，而且性能還更好呢！比如：

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

（二）繪制圓形

繪制圓形就用drawCircle(x: number, y: number, radius: number): void這個(gè)方法。x和y代表圓心在畫布上的坐標(biāo)，就像給圓心定個(gè)“家”，radius就是圓的半徑啦，而且半徑得是大于0的正數(shù)，不然就畫不出圓咯。舉個(gè)例子：

canvas.drawCircle(100, 100, 30);

這行代碼就是在坐標(biāo)(100, 100)的地方畫一個(gè)半徑為30的圓。想象一下，就像在畫布上找到了一個(gè)中心點(diǎn)，然后以這個(gè)點(diǎn)為中心，用半徑為30的“畫筆”轉(zhuǎn)一圈，一個(gè)圓就畫好啦。

三、設(shè)置顏色和混合模式

（一）繪制顏色

給圖形上色可以用drawColor方法，它有兩種形式。
第一種drawColor(color: common2D.Color, blendMode?: BlendMode): void，這里的color是ARGB格式的顏色，ARGB分別代表透明度（Alpha）、紅色（Red）、綠色（Green）、藍(lán)色（Blue）。blendMode是顏色混合模式，默認(rèn)是SRC_OVER。比如咱們想畫個(gè)紅色的圖形，代碼可以這樣寫：

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

從API version 12開始，又有了一個(gè)更簡(jiǎn)單直接的方法drawColor(alpha: number, red: number, green: number, blue: number, blendMode?: BlendMode): void。直接把顏色通道的值傳進(jìn)去就行，用起來(lái)更方便，性能也更好。像這樣：

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

（二）顏色混合模式

顏色混合模式就像是給圖形顏色玩“魔法組合”，BlendMode枚舉里有好多有趣的模式可以選擇。比如說(shuō)CLEAR模式，用了它，繪制區(qū)域就會(huì)變得全透明，就好像圖形隱身了一樣?？创a：

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

而默認(rèn)的SRC_OVER模式，是在目標(biāo)像素的上面繪制源像素，而且還會(huì)考慮源像素的透明度，這樣顏色疊加起來(lái)就會(huì)有不一樣的效果，讓圖形看起來(lái)更有層次感。

四、案例：繪制一個(gè)多彩的界面

咱們來(lái)綜合運(yùn)用這些知識(shí)，畫一個(gè)簡(jiǎn)單的多彩界面，不過(guò)顯示比較麻煩。假設(shè)要畫一個(gè)藍(lán)色的矩形，再在上面畫一個(gè)紅色的圓形，代碼可以這么寫：

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;
        // 繪制藍(lán)色矩形
        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進(jìn)行顯示
        NodeContainer(new MyNodeController())
          .width('100%')
      }
      .width('100%')
      .height('80%')
    }
    .height('100%')
  }
}

在這段代碼里，先設(shè)置顏色為藍(lán)色，用SRC混合模式填充矩形區(qū)域，再繪制藍(lán)色矩形。接著設(shè)置顏色為紅色，同樣用SRC混合模式，然后繪制紅色圓形。運(yùn)行這段代碼，就能看到一個(gè)藍(lán)色矩形上面有個(gè)紅色圓形的界面啦。

今天咱們學(xué)習(xí)了鴻蒙繪圖@ohos.graphics.drawing模塊的基礎(chǔ)用法，包括導(dǎo)入模塊、繪制基本圖形、設(shè)置顏色和混合模式，還做了一個(gè)小案例。掌握了這些基礎(chǔ)，后面咱們就能繼續(xù)探索進(jìn)階和高階的繪圖技巧，畫出更厲害的圖形啦！趕緊動(dòng)手試試吧，要是遇到問(wèn)題，多調(diào)試調(diào)試代碼，或者去官方文檔里找找答案。加油，期待大家畫出超酷的圖形！

也可以加入我們鴻蒙技術(shù)交流群，開發(fā)鴻蒙原生應(yīng)用過(guò)程有啥問(wèn)題都可以在群溝通，互相幫助，一起進(jìn)步。

在開發(fā)鴻蒙原生應(yīng)用的時(shí)候，需要用到圖表組件的也可以嘗試使用我們封裝的。圖表的官網(wǎng)地址：[meichuangit.net.cn/]

審核編輯 黃宇