十三、【鸿蒙 NEXT】使用canvas实现微信头像

前言：

之前在第7章中介绍了两种群头像合成的方法，合成的头像是圆形的。本节介绍下如何通过canvas来实现类似微信的群头像功能

一、实现效果如下

 

二、代码实现如下：

@Entry
@Component
struct GroupImgPage {
  private  settings:RenderingContextSettings = new RenderingContextSettings(true)
  private canvasContext:CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private img:ImageBitmap = new ImageBitmap("img/startIcon.png")
  // 群成员数
  private imgCount:number = 5
  // 画布宽度/长度
  private canvasW:number = 40
  // 头像间距
  private gap:number = 1

  build() {
    Column() {
      Canvas(this.canvasContext)
        .width(40)
        .height(40)
        .margin({left:100,top:100})
        .backgroundColor(Color.Orange)
        .onReady(() => {
          if (this.imgCount == 3) {
            let imgW = (this.canvasW - this.gap) / 2
            this.canvasContext.drawImage(this.img, (this.canvasW - imgW) / 2, 0, imgW, imgW)
            this.canvasContext.drawImage(this.img, 0, imgW + this.gap, imgW, imgW)
            this.canvasContext.drawImage(this.img, imgW + this.gap, imgW + this.gap, imgW, imgW)
          } else if (this.imgCount == 4) {
            let imgW = (this.canvasW - this.gap) / 2
            this.canvasContext.drawImage(this.img, 0, 0, imgW, imgW)
            this.canvasContext.drawImage(this.img, imgW + this.gap, 0, imgW, imgW)
            this.canvasContext.drawImage(this.img, 0, imgW + this.gap, imgW, imgW)
            this.canvasContext.drawImage(this.img, imgW + this.gap, imgW + this.gap, imgW, imgW)
          } else if (this.imgCount == 5) {
            let imgW = (this.canvasW - this.gap * 2) / 3
            let startX = (this.canvasW - imgW * 2 - this.gap)/2
            this.canvasContext.drawImage(this.img, startX, startX, imgW, imgW)
            this.canvasContext.drawImage(this.img, startX + imgW + this.gap, startX, imgW, imgW)
            this.canvasContext.drawImage(this.img, 0, startX + imgW + this.gap, imgW, imgW)
            this.canvasContext.drawImage(this.img, imgW + this.gap, startX + imgW + this.gap, imgW, imgW)
            this.canvasContext.drawImage(this.img, (imgW + this.gap) * 2, startX + imgW + this.gap, imgW, imgW)
          } else if (this.imgCount == 6) {
            let imgW = (this.canvasW - this.gap * 2) / 3
            let startX = (this.canvasW - imgW * 2 - this.gap)/2
            this.canvasContext.drawImage(this.img, 0, startX, imgW, imgW)
            this.canvasContext.drawImage(this.img, imgW + this.gap, startX, imgW, imgW)
            this.canvasContext.drawImage(this.img, (imgW + this.gap) * 2, startX, imgW, imgW)
            this.canvasContext.drawImage(this.img, 0, startX + imgW + this.gap, imgW, imgW)
            this.canvasContext.drawImage(this.img, imgW + this.gap, startX + imgW + this.gap, imgW, imgW)
            this.canvasContext.drawImage(this.img, (imgW + this.gap) * 2, startX + imgW + this.gap, imgW, imgW)
          } else if (this.imgCount == 9) {
            let imgW = (this.canvasW - this.gap * 2) / 3
            this.canvasContext.drawImage(this.img, 0, 0, imgW, imgW)
            this.canvasContext.drawImage(this.img, imgW + this.gap, 0, imgW, imgW)
            this.canvasContext.drawImage(this.img, 2 * (imgW + this.gap), 0, imgW, imgW)
            this.canvasContext.drawImage(this.img, 0, imgW + this.gap, imgW, imgW)
            this.canvasContext.drawImage(this.img, imgW + this.gap, imgW + this.gap, imgW, imgW)
            this.canvasContext.drawImage(this.img, 2 * (imgW + this.gap), imgW + this.gap, imgW, imgW)
            this.canvasContext.drawImage(this.img, 0, 2 * (imgW + this.gap), imgW, imgW)
            this.canvasContext.drawImage(this.img, imgW + this.gap, 2 * (imgW + this.gap), imgW, imgW)
            this.canvasContext.drawImage(this.img, 2 * (imgW + this.gap), 2 * (imgW + this.gap), imgW, imgW)
          }
          let pixelmap = this.canvasContext.getPixelMap(0,0,40,40)
          this.canvasContext.setPixelMap(pixelmap)
        })
    }
  }
}