OpenHarmony 3.1 Beta 版本關鍵特性解析——ArkUI canvas組件
- 2022 年 4 月 12 日
- 筆記
- ArkUI, OpenHarmony, 關鍵技術解讀, 應用開發
（以下內容來自開發者分享，不代表 OpenHarmony 項目群工作委員會觀點）
江英傑
華為技術有限公司
canvas 是 ArkUI 開發框架里的畫布組件，常用於自定義繪製圖形。因為其輕量、靈活、高效等優點，被廣泛應用於 UI 介面開發中。本期，我們將為大家介紹 ArkUI 開發框架中 canvas 組件的使用。
一、canvas 介紹
1.1 什麼是 canvas？
在 Web 瀏覽器中，canvas 是一個可自定義 width、height 的矩形畫布，畫布左上角為坐標原點，以像素為單位，水平向右為 x 軸，垂直向下為 y 軸，畫布內所有元素都基於原點進行定位。如圖 1 所示，我們通過 <canvas> 標籤，創建了一個 width= 1500px，height=900px 的空白畫布，我們還需要「畫筆」才能繪製圖形。canvas 採用輕量的逐像素渲染機制，以 JS 為「畫筆」直接控制畫布像素，從而實現圖形繪製。
圖 1 canvas 畫布
1.2Canvas 的「畫筆」
canvas 本身雖不具備繪製能力，但是提供了獲取「畫筆」的方法。開發者可通過 getContext(‘2d’) 方法獲取 CanvasRenderingContext2D 對象完成 2D 影像繪製，或通過 getContext(‘webgl’) 方法獲取 WebGLRenderingContext 對象完成 3D 影像繪製。
目前，ArkUI 開發框架中的 WebGL1.0 及 WebGL2.0 標準 3D 圖形繪製能力正在完善中，所以本文將著重介紹 2D 影像的繪製。如圖 2 所示，是 CanvasRenderingContext2D 對象提供的部分 2D 影像繪製方法，豐富的繪製方法讓開發者能高效地繪製出矩形、文本、圖片等。
圖 2 影像繪製方法
除此之外，開發者還可以通過獲取 OffscreenCanvasRenderingContext2D 對象進行離屏繪製，繪製方法同上。當繪製的圖形比較複雜時，頻繁地刪除與重繪會消耗很多性能。這時，開發者可以根據自身的需求靈活選取離屏渲染的方式，首先通過創建 OffscreenCanvas 對象作為一個緩衝區，然後將內容繪製在 OffscreenCanvas 上，最後再將 OffscreenCanvas 繪製到主畫布上，以提高畫布性能，確保繪圖的品質。
二、canvas 基礎繪製方法
通過上節對 canvas 組件的基本介紹，相信大家對 canvas 組件已經有了一定的認識，下面我們將為大家實際演示 canvas 組件在 ArkUI 開發框架中的使用方法。ArkUI 開發框架參考了 Web 瀏覽器中 canvas 的設計，並在「類 Web 開發範式」及「聲明式開發範式」兩種開發範式中進行提供，接下來我們將分別介紹這兩種開發範式中 canvas 的繪製方法。
2.1 類 Web 開發範式中 canvas 的繪製方法
類 Web 開發範式，使用 HML 標籤文件進行布局搭建、CSS 文件進行樣式描述，並通過 JS 語言進行邏輯處理。目前，JS 語言的 canvas 繪圖功能已經基本上完善，下面我們將通過兩個示例，展示基於 JS 語言的 canvas 組件基礎使用方法。
2.1.1 矩形填充
CanvasRenderingContext2D 對象提供了 fillRect(x, y, width, height)方法，用於繪製一個填充的矩形。如圖 3 所示，在畫布內繪製了一個黑色的填充矩形，x 與 y 指定了在 canvas 畫布上所繪製的矩形的左上角（相對於原點）的坐標，width 和 height 則設置了矩形的尺寸。
圖 3 填充的矩形
示例程式碼如下：
//創建一個width=1500px，height=900px的畫布 <!-- xxx.hml --> <div> <canvas ref="canvas" style="width: 1500px; height: 900px; "></canvas> </div>
//xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
//獲取2D繪製對象
const ctx = el.getContext('2d');
//設置填充為黑色
ctx.fillStyle = '#000000';
//設置填充矩形的坐標及尺寸
ctx.fillRect(200, 200, 300, 300);
}
}
2.1.2 縮放與陰影
CanvasRenderingContext2D 對象提供了 scale(x,y) 方法，參數 x 表示橫軸方向上縮放倍數，y 表示縱軸方向上縮放的倍數，值得注意的是縮放過程中定位也會被縮放。如圖 4 所示，是將上個示例中的填充矩形通過 scale(2,1.5) 縮放，並通過 shadowBlur 方法加上陰影后的效果。
圖 4 縮放與添加陰影后的效果
示例程式碼如下：
//xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
//設置繪製陰影的模糊級別
ctx.shadowBlur = 80;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(0,0,0)';
// x Scale to 200%,y Scale to 150%
ctx.scale(2, 1.5);
ctx.fillRect(200, 200, 300, 300);
}
}
2.2 聲明式開發範式中 canvas 的繪製方法
聲明式開發範式，採用 TS 語言並進行聲明式 UI 語法擴展，從組件、動效和狀態管理三個維度提供了 UI 繪製能力，目前已經提供了 canvas 組件繪製能力，但功能仍在完善中。下面我們將通過兩個示例展示聲明式開發範式中 canvas 組件的基礎使用方法。
2.2.1 圖片疊加
如圖 5 所示，是三張圖片疊加的效果，頂層的圖片覆蓋了底層的圖片。通過依次使用 drawImage(x,y, width, height) 方法設置圖片坐標及尺寸，後面繪製的圖片自動覆蓋原來的影像，從而達到預期效果。
圖 5 圖片疊加
擴展的 TS 語言採用更接近自然語義的編程方式，讓開發者可以直觀地描述 UI 介面，示例程式碼如下：
@Entry
@Component
struct IndexCanvas1 {
private settings:RenderingContextSettings = new RenderingContextSettings(true);
//獲取繪圖對象
private ctx: RenderingContext = new RenderingContext(this.settings);
//列出所要用到的圖片
private img:ImageBitmap = new ImageBitmap("common/bg.jpg");
build() {
Column() {
//創建canvas
Canvas(this.ctx)
.width(1500)
.height(900)
.border({color:"blue",width:1,})
.backgroundColor('#ffff00')
//開始繪製
.onReady(() => {
this.ctx.drawImage( this.img,400,200,540,300);
this.ctx.drawImage( this.img,500,300,540,300);
this.ctx.drawImage( this.img,600,400,540,300);
})
}
.width('100%')
.height('100%')
}
}
2.2.2 點擊創建線性漸變
如圖 6 所示，是一個線性漸變效果。基於 canvas 擴展了一個 Button 組件，通過點擊 「Click」 按鈕，觸發 onClick() 方法，並通過調用 createLinearGradient() 方法，繪製出了一個線性漸變色。
圖 6 圖片上添加文字
示例程式碼如下：
@Entry
@Component
struct GradientExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: RenderingContext = new RenderingContext(this.settings);
private gra: CanvasGradient = new CanvasGradient();
build() {
Column({ space: 5 }) {
//創建一個畫布
Canvas(this.context)
.width(1500)
.height(900)
.backgroundColor('#ffff00 ')
Column() {
//設置按鈕的樣式
Button('Click').width(250).height(100).backgroundColor('#000000')
.onClick(() => {
//創建一個線性漸變色
var grad = this.context.createLinearGradient(600, 200, 400, 750)
grad.addColorStop(0.0, 'red');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1.0, 'green');
this.context.fillStyle = grad;
this.context.fillRect(400, 200, 550, 550);
})
}.alignItems(HorizontalAlign.center)
}
}
}
三、飛機大戰小遊戲繪製實踐
如圖 7 所示，是一款」飛機大戰」小遊戲，通過控制戰機的移動摧毀敵機。如何使用 ArkUI 開發框架提供的 canvas 組件輕鬆實現這個經典懷舊的小遊戲？實現思路及關鍵程式碼如下：
圖 7 飛機大戰小遊戲
1. 首先列出遊戲所用到的圖片
private imgList:Array<string> = ["xx.png","xx.png"…];
2. 將圖片渲染到 canvas 畫布上
let img:ImageBitmap = new ImageBitmap("圖片路徑（如common/images）/"+this.imgList[數組下標]);
this.ctx.drawImage( img,150/* x坐標*/, 150/* y坐標*/, 600/*寬*/, 600/*高*/)
3. 繪製背景圖片和戰機向下移動的效果
this.ctx.drawImage(this.bg, 0, this.bgY);
this.ctx.drawImage(this.bg, 0, this.bgY - 480);
this.bgY++ == 480 && (this.bgY = 0);
4. 使用 Math.round 函數隨機獲取敵機圖片並渲染到畫布上，並且改變敵機 y 軸坐標，使它向下運動。
Efight = Math.round(Math.random()*7);
//前七張為敵機圖片。
let img:ImageBitmap = new ImageBitmap("common/img"+this.imgList[Efight]);
this.ctx.drawImage(img, 0, this.Eheight + 50);//渲染敵機
5. 在頁面每隔 120s 出現一排子彈，之後減小或增大（x,y）軸的坐標達到子彈射出效果。
let i= 0;
setInterval(()=>{
this.ctx.drawImage(this.bulImg1,image.x – 10 – (i *10) , image.x + (i *10))
this.ctx.drawImage(this.bulimg2, this. bulImg1,image.x – (i *10) , i image.x + (i *10))
this.ctx.drawImage(this.bulimg3, image.x + 10 + (i *10), image.x + (i *10))
i ++;
},120)
6. 使用 onTouch 方法獲取戰機移動位置，獲取拖動的坐標後重新設置戰機的圖片坐標，使戰機實現拖動效果。
.onTouch((event)=>{ var offsetX = event.localX ||event.touches[0].localX; var offsetY = event.localY ||event.touches[0].localY; var w = this.heroImg[0].width, h = this.heroImg[0].height; var nx = offsetX - w / 2, ny = offsetY - h / 2; nx < 20 - w / 2 ? nx = 20 - w / 2 : nx > (this.windowWidth - w / 2 - 20) ? nx = (this.windowWidth - w / 2 - 20) : 0; ny < 0 ? ny = 0 : ny > (this.windowHeight - h / 2) ? ny = (this.windowHeight – h/2) : 0; this.hero.x = nx; this.hero.y = ny; this.hero.count = 2;
註：本示例引用了部分開源資源，感興趣的開發者可參考此開源資源，結合文中的實現思路補全程式碼。（//github.com/xs528/game）
以上就是本期全部內容，期待廣大開發者能通過 canvas 組件繪製出精美的圖形，更多 canvas 組件的詳細使用方法，請參考文檔進行學習：
