鴻蒙元服務實戰-笑笑五子棋（2）

章節導讀

本章節主要講解如何創建元服務和使用 canvas 描繪圖形

目標

上一章最后講到了 笑笑五子棋 主要的技術棧如下：

1. ArkTS API 12
2. Canvas
3. 元服務獨有的 AtomicServiceTabs
4. 卡片開發
5. 元服務的創建
6. 元服務的上架

那么本章節就開始實現這個案例。

AGC 平臺上創建元服務

需要先在AGC平臺上項目，然后再新建元服務。一個項目可以對應多個元服務。

DevEco Studio 創建元服務工程

AGC 平臺上創建好了項目，我們可以在本地創建元服務。

1. 新建元服務

2. 選擇 笑笑五子棋

3. 選擇工程位置

4. 元服務創建成功
   

Canvas 入門

Canvas提供畫布組件，用于自定義繪制圖形，開發者使用 CanvasRenderingContext2D 對象和 OffscreenCanvasRenderingContext2D

對象在 Canvas 組件上進行繪制，繪制對象可以是基礎形狀、文本、圖片等。

基本使用

canvas 的基本使用分為 4 步：

1. 設置是否抗鋸齒抗鋸齒（Anti - aliasing）是一種在數字圖形處理中使用的技術，主要用于減少圖像中因為像素有限而產生的鋸齒狀邊緣的現象
2. 創建畫布上下文
3. 渲染畫布組件
4. 在畫布上描繪圖案

@Entry
@Component
struct Index {
  // 1 用來配置CanvasRenderingContext2D對象的參數，包括是否開啟抗鋸齒，true表明開啟抗鋸齒。
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  // 2 用來創建CanvasRenderingContext2D對象，通過在canvas中調用CanvasRenderingContext2D對象來繪制。
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
      // 3 在canvas中調用CanvasRenderingContext2D對象。
    Column(){
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() = > {
          // 4 可以在這里繪制內容。
          this.context.strokeRect(50, 50, 200, 150);
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

5. 效果

canvas 常見用法

canvas 的核心思想是將想要的圖形如，直線、圓圈、矩形等圖形描繪到畫布上。如果想要呈現出比較酷炫的效果，做法是：

1. 描繪圖形
2. 擦除畫布
3. 計算數值-重新描繪圖形
4. 擦除畫布
5. 。。。

通過以上過程實現動畫效果

canvas 的坐標系

在 canvas 中畫圖形都是基于坐標系來進行的。 左上角為起點。

描繪圖形

canvas 中內置的常見的描繪圖形的方法有以下：

1. 直線
2. 矩形
3. 弧形
4. 文本
5. 圖像
6. ...

直線

描繪直線可以使用：

1. 定起點 moveTo
2. 定終點 lineTo
3. 開始描繪 stroke

this.context.moveTo(10, 10);
this.context.lineTo(100, 100);
this.context.stroke();

矩形

可以使用直線lineTo自己畫成一個矩形。也可以直接使用 strokeRect直接生成矩形

lineTo 畫矩形

this.context.moveTo(10, 10);
this.context.lineTo(300, 10);
this.context.lineTo(300, 300);
this.context.lineTo(10, 300);
//   自動閉環
this.context.closePath();
//   開始描述 將路徑的當前點移回到路徑的起點，當前點到起點間畫一條直線
this.context.stroke();

strokeRect 畫矩形

// this.context.strokeRect(x, y, 寬度, 高度);
this.context.strokeRect(50, 50, 200, 150);

弧形

弧形可以使用 arc 和 arcTo 來描繪

arc

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean)

這里需要注意的是 arc 使用的單位是弧度不是角度

一圈 = 360角度 =  2 * Math.PI
半圈 = 180角度 =  Math.PI ≈ 3.14

觀察以下效果

100,75 是圓心坐標

50 是半徑

0 是開始的弧度

6.28 ≈ 2 * Math.PI = 一圈

arc 是從正右方向開始旋轉的。

this.context.beginPath();
this.context.arc(100, 75, 50, 0, 3.14 / 2);
this.context.stroke();

arcTo

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number)

this.context.beginPath();
this.context.strokeStyle = "#000000";
this.context.lineWidth = 3;
this.context.moveTo(360, 20);
this.context.arcTo(360, 170, 110, 170, 150);
this.context.stroke();

輔助理解

想象一下，我們有一個起點（即當前路徑的最后一個點），然后有三個更多的點：兩個控制點 (x1, y1) 和 (x2, y2)，以及由 radius

定義的一個圓心。arcTo 會創建一條從起點到第二個控制點 (x2, y2) 的圓弧，這條圓弧是位于以 radius 為半徑的圓周上的一部

分。該圓弧會在起點和第一個控制點 (x1, y1) 之間形成一個切線，并且也會在第二個控制點 (x2, y2) 和圓弧的終點之間形成一個切線。

文本

1. strokeText表示描邊的圖形
2. fillText 表示填充的圖形，還有其他 fill ，fillRect等也表示填充。

strokeText

this.context.font = '55px sans-serif'
  this.context.strokeText("Hello World!", 20, 60)

fillText

this.context.font = '55px sans-serif'
this.context.fillText("Hello World!", 20, 60)

圖像

drawImage可以把圖像描繪到畫布上，很多的在線圖形合成效果都可以利用該功能實現

drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void

drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void

drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void

@Entry
@Component
struct Index {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private img: ImageBitmap = new ImageBitmap("/images/example.jpg")

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() = > {
          this.context.drawImage(this.img, 0, 0)
          this.context.drawImage(this.img, 0, 150, 300, 100)
          this.context.drawImage(this.img, 0, 0, 500, 500, 0, 300, 400, 200)
        })
    }
    .width('100%')
    .height('100%')
  }
}

canvas 淺嘗動態效果 1

const width = px2vp(display.getDefaultDisplaySync().availableWidth) * 0.9;
const height = width;
let x = 0;
let y = 0;
setInterval(() = > {
  this.context.strokeRect(x, y, 100, 100);
  x++;
  y++;
}, 20);

canvas 淺嘗動態效果 2

const width = px2vp(display.getDefaultDisplaySync().availableWidth) * 0.9;
const height = width;
let x = 0;
let y = 0;
setInterval(() = > {
  // 清理畫布
  this.context.strokeRect(x, y, 100, 100);
  x++;
  y++;
}, 20);

canvas 屬性 一覽

canvas 方法 一覽

總結

這篇文章主要是介紹了元服務的創建和基本 canvas 的使用

如果你興趣想要了解更多的鴻蒙應用開發細節和最新資訊，歡迎在評論區留言或者私信或者看我個人信息，可以加入技術交流群。

審核編輯 黃宇