鴻蒙元服務(wù)實(shí)戰(zhàn)-笑笑五子棋（2）

章節(jié)導(dǎo)讀

本章節(jié)主要講解如何創(chuàng)建元服務(wù)和使用 canvas 描繪圖形

目標(biāo)

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

1. ArkTS API 12
2. Canvas
3. 元服務(wù)獨(dú)有的 AtomicServiceTabs
4. 卡片開(kāi)發(fā)
5. 元服務(wù)的創(chuàng)建
6. 元服務(wù)的上架

那么本章節(jié)就開(kāi)始實(shí)現(xiàn)這個(gè)案例。

AGC 平臺(tái)上創(chuàng)建元服務(wù)

需要先在AGC平臺(tái)上項(xiàng)目，然后再新建元服務(wù)。一個(gè)項(xiàng)目可以對(duì)應(yīng)多個(gè)元服務(wù)。

DevEco Studio 創(chuàng)建元服務(wù)工程

AGC 平臺(tái)上創(chuàng)建好了項(xiàng)目，我們可以在本地創(chuàng)建元服務(wù)。

1. 新建元服務(wù)

2. 選擇 笑笑五子棋

3. 選擇工程位置

4. 元服務(wù)創(chuàng)建成功
   

Canvas 入門

Canvas提供畫布組件，用于自定義繪制圖形，開(kāi)發(fā)者使用 CanvasRenderingContext2D 對(duì)象和 OffscreenCanvasRenderingContext2D

對(duì)象在 Canvas 組件上進(jìn)行繪制，繪制對(duì)象可以是基礎(chǔ)形狀、文本、圖片等。

基本使用

canvas 的基本使用分為 4 步：

1. 設(shè)置是否抗鋸齒抗鋸齒（Anti - aliasing）是一種在數(shù)字圖形處理中使用的技術(shù)，主要用于減少圖像中因?yàn)橄袼赜邢薅a(chǎn)生的鋸齒狀邊緣的現(xiàn)象
2. 創(chuàng)建畫布上下文
3. 渲染畫布組件
4. 在畫布上描繪圖案

@Entry
@Component
struct Index {
  // 1 用來(lái)配置CanvasRenderingContext2D對(duì)象的參數(shù)，包括是否開(kāi)啟抗鋸齒，true表明開(kāi)啟抗鋸齒。
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  // 2 用來(lái)創(chuàng)建CanvasRenderingContext2D對(duì)象，通過(guò)在canvas中調(diào)用CanvasRenderingContext2D對(duì)象來(lái)繪制。
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

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

5. 效果

canvas 常見(jiàn)用法

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

1. 描繪圖形
2. 擦除畫布
3. 計(jì)算數(shù)值-重新描繪圖形
4. 擦除畫布
5. 。。。

通過(guò)以上過(guò)程實(shí)現(xiàn)動(dòng)畫效果

canvas 的坐標(biāo)系

在 canvas 中畫圖形都是基于坐標(biāo)系來(lái)進(jìn)行的。 左上角為起點(diǎn)。

描繪圖形

canvas 中內(nèi)置的常見(jiàn)的描繪圖形的方法有以下：

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

直線

描繪直線可以使用：

1. 定起點(diǎn) moveTo
2. 定終點(diǎn) lineTo
3. 開(kāi)始描繪 stroke

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

矩形

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

lineTo 畫矩形

this.context.moveTo(10, 10);
this.context.lineTo(300, 10);
this.context.lineTo(300, 300);
this.context.lineTo(10, 300);
//   自動(dòng)閉環(huán)
this.context.closePath();
//   開(kāi)始描述 將路徑的當(dāng)前點(diǎn)移回到路徑的起點(diǎn)，當(dāng)前點(diǎn)到起點(diǎn)間畫一條直線
this.context.stroke();

strokeRect 畫矩形

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

弧形

弧形可以使用 arc 和 arcTo 來(lái)描繪

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 是圓心坐標(biāo)

50 是半徑

0 是開(kāi)始的弧度

6.28 ≈ 2 * Math.PI = 一圈

arc 是從正右方向開(kāi)始旋轉(zhuǎn)的。

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();

輔助理解

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

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

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

文本

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可以把圖像描繪到畫布上，很多的在線圖形合成效果都可以利用該功能實(shí)現(xiàn)

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 淺嘗動(dòng)態(tài)效果 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 淺嘗動(dòng)態(tài)效果 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 方法 一覽

總結(jié)

這篇文章主要是介紹了元服務(wù)的創(chuàng)建和基本 canvas 的使用

如果你興趣想要了解更多的鴻蒙應(yīng)用開(kāi)發(fā)細(xì)節(jié)和最新資訊，歡迎在評(píng)論區(qū)留言或者私信或者看我個(gè)人信息，可以加入技術(shù)交流群。

審核編輯 黃宇