theme: hydrogen

家人們，還記得上次一起探索的鴻蒙繪圖API基礎(chǔ)用法嗎？上手是不是特別容易！今天，咱們就接著深入，開(kāi)啟進(jìn)階版的學(xué)習(xí)，解鎖更多復(fù)雜又炫酷的繪圖技能，讓你的鴻蒙應(yīng)用界面直接“出圈”！

我將結(jié)合實(shí)際開(kāi)發(fā)場(chǎng)景，豐富繪制路徑、圓角矩形、繪制圖片、畫(huà)筆與畫(huà)刷、裁剪區(qū)域設(shè)置這幾個(gè)方面的案例，讓示例更具實(shí)操性和參考價(jià)值。

一、復(fù)雜圖形繪制

（一）路徑繪制

當(dāng)繪制不規(guī)則圖形，比如獨(dú)特的圖標(biāo)、創(chuàng)意的裝飾元素時(shí)，Path類(lèi)就成了得力助手，它能幫我們創(chuàng)建并操控各種復(fù)雜路徑。這些路徑可以由直線、弧線、貝塞爾曲線等組合而成。

創(chuàng)建路徑對(duì)象很簡(jiǎn)單：

let path = new drawing.Path();

接著設(shè)置路徑起始點(diǎn)：

path.moveTo(10, 10);

然后添加線段：

path.lineTo(100, 100);

繪制弧線也不難：

path.arcTo(100, 100, 200, 200, 0, 90);

除了弧線，還能使用二階貝塞爾曲線（quadTo）和三階貝塞爾曲線（cubicTo） 。

案例：繪制一個(gè)五角星
五角星的繪制需要結(jié)合直線和貝塞爾曲線，利用Path類(lèi)的相關(guān)方法，通過(guò)精確計(jì)算每個(gè)頂點(diǎn)的坐標(biāo)來(lái)實(shí)現(xiàn)。

let path = new drawing.Path();
// 五角星的半徑
const radius = 100;
// 計(jì)算五角星頂點(diǎn)坐標(biāo)的輔助函數(shù)
function calculateVertex(angle) {
    return {
        x: Math.sin(angle) * radius + 200,
        y: -Math.cos(angle) * radius + 200
    };
}
// 五角星的內(nèi)角角度
const angles = [
    0,
    Math.PI * 2 / 5,
    Math.PI * 4 / 5,
    Math.PI * 6 / 5,
    Math.PI * 8 / 5
];
// 移動(dòng)到第一個(gè)頂點(diǎn)
path.moveTo(calculateVertex(angles[0]).x, calculateVertex(angles[0]).y);
for (let i = 1; i < 5; i++) {
    const vertex = calculateVertex(angles[i]);
    path.lineTo(vertex.x, vertex.y);
}
// 閉合路徑
path.close();
// 附加畫(huà)筆并繪制路徑
let pen = new drawing.Pen();
pen.setStrokeWidth(4);
pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 });
canvas.attachPen(pen);
canvas.drawPath(path);
canvas.detachPen();

在這個(gè)案例中，通過(guò)數(shù)學(xué)計(jì)算得到五角星每個(gè)頂點(diǎn)的坐標(biāo)，利用moveTo和lineTo方法依次連接各個(gè)頂點(diǎn)，最后使用close方法閉合路徑，實(shí)現(xiàn)五角星的繪制。

（二）圓角矩形繪制

在追求界面美觀與柔和的設(shè)計(jì)中，圓角矩形很常用。使用drawRoundRect方法可以實(shí)現(xiàn)：

drawRoundRect(roundRect: RoundRect): void

其中，RoundRect對(duì)象包含了矩形的位置、大小以及圓角半徑信息。

案例：繪制一個(gè)卡片式布局
在很多應(yīng)用中，卡片式布局很常見(jiàn)，使用圓角矩形可以輕松實(shí)現(xiàn)。

import { common2D, drawing } from '@kit.ArkGraphics2D';
// 卡片的位置和大小
let rect = { left: 50, top: 50, right: 250, bottom: 150 };
// 圓角半徑
let roundRect = new drawing.RoundRect(rect, 15, 15);
// 附加畫(huà)刷設(shè)置背景顏色
let brush = new drawing.Brush();
brush.setColor({ alpha: 255, red: 240, green: 240, blue: 240 });
canvas.attachBrush(brush);
canvas.drawRoundRect(roundRect);
canvas.detachBrush();
// 附加畫(huà)筆繪制邊框
let pen = new drawing.Pen();
pen.setStrokeWidth(2);
pen.setColor({ alpha: 255, red: 128, green: 128, blue: 128 });
canvas.attachPen(pen);
canvas.drawRoundRect(roundRect);
canvas.detachPen();

在這個(gè)案例中，先定義了卡片的位置、大小和圓角半徑，創(chuàng)建RoundRect對(duì)象。然后分別使用畫(huà)刷設(shè)置背景顏色，使用畫(huà)筆繪制邊框，實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的卡片式布局。

二、圖像繪制

（一）繪制圖片

在應(yīng)用開(kāi)發(fā)中，在畫(huà)布上繪制圖片很常見(jiàn)。drawImage系列方法可以滿(mǎn)足需求：

drawImage(pixelmap: image.PixelMap, left: number, top: number, samplingOptions?: SamplingOptions): void

pixelmap是要繪制的圖片對(duì)象，left和top指定圖片在畫(huà)布上的位置，samplingOptions用于設(shè)置采樣選項(xiàng)（API version 12+支持）。

從API version 12開(kāi)始，新增了更靈活的方法。drawImageRect可以將圖片繪制到指定區(qū)域：

drawImageRect(pixelmap: image.PixelMap, dstRect: common2D.Rect, samplingOptions?: SamplingOptions): void

drawImageRectWithSrc則能將圖片的指定區(qū)域繪制到畫(huà)布的指定區(qū)域：

drawImageRectWithSrc(pixelmap: image.PixelMap, srcRect: common2D.Rect, dstRect: common2D.Rect, samplingOptions?: SamplingOptions, constraint?: SrcRectConstraint): void

案例：制作一個(gè)圖片畫(huà)廊
假設(shè)我們要制作一個(gè)簡(jiǎn)單的圖片畫(huà)廊，展示三張圖片，并且對(duì)其中一張圖片進(jìn)行局部放大展示。

import { image, drawing, common2D } from '@kit.ArkUI';
// 加載三張圖片
Promise.all([
    image.createPixelMap(/* 圖片1數(shù)據(jù) */),
    image.createPixelMap(/* 圖片2數(shù)據(jù) */),
    image.createPixelMap(/* 圖片3數(shù)據(jù) */)
]).then(([pixelMap1, pixelMap2, pixelMap3]) = > {
    // 繪制第一張圖片
    canvas.drawImage(pixelMap1, 20, 20);
    // 繪制第二張圖片
    canvas.drawImage(pixelMap2, 150, 20);
    // 繪制第三張圖片，并對(duì)其局部放大展示
    const srcRect = { left: 50, top: 50, right: 150, bottom: 150 };
    const dstRect = { left: 280, top: 20, right: 400, bottom: 140 };
    canvas.drawImageRectWithSrc(pixelMap3, srcRect, dstRect);
});

在這個(gè)案例中，使用Promise.all同時(shí)加載三張圖片，然后分別使用drawImage和drawImageRectWithSrc方法將圖片繪制到畫(huà)布上，實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的圖片畫(huà)廊效果，并且對(duì)第三張圖片進(jìn)行了局部放大展示。

三、繪制狀態(tài)與屬性設(shè)置

（一）畫(huà)筆與畫(huà)刷

在繪制圖形時(shí)，Pen類(lèi)和Brush類(lèi)能幫我們?cè)O(shè)置線條和填充屬性，讓圖形更具個(gè)性。

Pen類(lèi)可以設(shè)置線條顏色、寬度、是否抗鋸齒等。

let pen = new drawing.Pen();
pen.setStrokeWidth(5);
pen.setColor({ alpha: 255, red: 255, green: 0, blue: 0 });
pen.setAntiAlias(true);
canvas.attachPen(pen);
// 繪制圖形
canvas.drawRect(10, 10, 110, 110);
canvas.detachPen();

Brush類(lèi)用于設(shè)置填充屬性，比如填充顏色。

let brush = new drawing.Brush();
brush.setColor({ alpha: 255, red: 0, green: 255, blue: 0 });
canvas.attachBrush(brush);
// 繪制圖形
canvas.drawCircle(100, 100, 50);
canvas.detachBrush();

案例：繪制一個(gè)立體按鈕
通過(guò)畫(huà)筆和畫(huà)刷的配合，可以繪制出具有立體感的按鈕。

// 繪制按鈕背景
let brush = new drawing.Brush();
brush.setColor({ alpha: 255, red: 100, green: 100, blue: 255 });
canvas.attachBrush(brush);
let rect = { left: 100, top: 100, right: 200, bottom: 150 };
canvas.drawRoundRect(new drawing.RoundRect(rect, 10, 10));
canvas.detachBrush();
// 繪制按鈕邊框，模擬立體效果
let pen = new drawing.Pen();
pen.setStrokeWidth(2);
// 上邊框和左邊框顏色較淺
pen.setColor({ alpha: 255, red: 200, green: 200, blue: 255 });
canvas.attachPen(pen);
canvas.drawLine(100, 100, 200, 100);
canvas.drawLine(100, 100, 100, 150);
canvas.detachPen();
// 下邊框和右邊框顏色較深
pen.setColor({ alpha: 255, red: 50, green: 50, blue: 150 });
canvas.attachPen(pen);
canvas.drawLine(100, 150, 200, 150);
canvas.drawLine(200, 100, 200, 150);
canvas.detachPen();

在這個(gè)案例中，先使用畫(huà)刷繪制按鈕的背景，然后通過(guò)畫(huà)筆分別設(shè)置不同顏色繪制邊框，模擬出立體效果。

（二）裁剪區(qū)域設(shè)置

有時(shí)候，我們只想在畫(huà)布的特定區(qū)域進(jìn)行繪制，clipRect方法可以實(shí)現(xiàn)：

canvas.clipRect({ left: 50, top: 50, right: 150, bottom: 150 }, drawing.ClipOp.DIFFERENCE, true);

第一個(gè)參數(shù)指定裁剪區(qū)域的矩形，第二個(gè)參數(shù)是裁剪操作類(lèi)型，ClipOp.DIFFERENCE表示取差集，即只保留畫(huà)布上不在裁剪區(qū)域內(nèi)的部分；第三個(gè)參數(shù)表示是否反轉(zhuǎn)裁剪區(qū)域。

案例：制作一個(gè)圖片蒙版效果
通過(guò)設(shè)置裁剪區(qū)域，可以制作圖片蒙版效果。

import { image, drawing, common2D } from '@kit.ArkUI';
image.createPixelMap(/* 圖片數(shù)據(jù) */).then((pixelMap) = > {
    // 設(shè)置裁剪區(qū)域?yàn)閳A形
    const circleRect = { left: 100, top: 100, right: 200, bottom: 200 };
    const circlePath = new drawing.Path();
    circlePath.addCircle(150, 150, 50);
    canvas.clipPath(circlePath, drawing.ClipOp.INTERSECT);
    // 繪制圖片
    canvas.drawImage(pixelMap, 0, 0);
    // 清除裁剪區(qū)域
    canvas.restore();
});

在這個(gè)案例中，先創(chuàng)建一個(gè)圓形路徑，使用clipPath方法設(shè)置裁剪區(qū)域?yàn)閳A形，然后繪制圖片，這樣圖片就只會(huì)顯示在圓形區(qū)域內(nèi)，實(shí)現(xiàn)了圖片蒙版效果。最后使用restore方法清除裁剪區(qū)域，以便后續(xù)正常繪制。

家人們，到這里，鴻蒙繪圖API的進(jìn)階內(nèi)容就學(xué)完啦！是不是感覺(jué)自己離大神又近了一步？趕緊動(dòng)手實(shí)踐，把這些知識(shí)運(yùn)用到實(shí)際開(kāi)發(fā)中。要是遇到問(wèn)題，別擔(dān)心，去官方文檔里找找答案，或者和技術(shù)交流群里的小伙伴們一起討論。下一次，咱們將挑戰(zhàn)高階版，一起探索更高級(jí)的繪圖技巧，期待與大家共同進(jìn)步！

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

如果你對(duì)案例還有其他修改意見(jiàn)，比如增減特定場(chǎng)景案例、調(diào)整代碼注釋等，歡迎隨時(shí)提出。

審核編輯 黃宇