鴻蒙開發(fā)-UI-圖形-繪制自定義圖形

這篇具有很好參考價(jià)值的文章主要介紹了鴻蒙開發(fā)-UI-圖形-繪制自定義圖形。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

鴻蒙開發(fā)-UI-組件

鴻蒙開發(fā)-UI-組件2

鴻蒙開發(fā)-UI-組件3

鴻蒙開發(fā)-UI-氣泡/菜單

鴻蒙開發(fā)-UI-頁面路由

鴻蒙開發(fā)-UI-組件導(dǎo)航-Navigation

鴻蒙開發(fā)-UI-組件導(dǎo)航-Tabs

鴻蒙開發(fā)-UI-圖形-圖片

鴻蒙開發(fā)-UI-圖形-繪制幾何圖形

文章目錄

前言

一、使用畫布組件繪制自定義圖形

1.初始化畫布組件

3.畫布組件常用方法

1.基礎(chǔ)形狀繪制

2.文本繪制

3.繪制圖片和圖像像素信息處理

4.其他方法

二、場景示例

1.繪制基礎(chǔ)圖形

2.繪制不規(guī)則圖形

3.繪制圖片和圖像像素信息處理

總結(jié)

前言

上文學(xué)習(xí)了鴻蒙開發(fā)UI顯示圖形關(guān)于幾何圖形繪制的相關(guān)知識，了解了相關(guān)圖形繪制組件以及兩種繪制方式，同時(shí)學(xué)習(xí)了形狀視口來做圖形的縮放效果，本文將學(xué)習(xí)使用畫布繪制自定義圖形

一、使用畫布組件繪制自定義圖形

Canvas提供畫布組件，用于自定義繪制圖形

CanvasRenderingContext2D對象和OffscreenCanvasRenderingContext2D對象在Canvas組件上進(jìn)行繪制，繪制對象可以是基礎(chǔ)形狀、文本、圖片等，有三種形式在畫布繪制自定義圖形

1. 使用CanvasRenderingContext2D對象在Canvas畫布上繪制

2. 離屏繪制，將需要繪制的內(nèi)容先繪制在緩存區(qū)，再將其轉(zhuǎn)換成圖片繪制到Canvas上，首先通過transferToImageBitmap方法將離屏畫布最近渲染的圖像創(chuàng)建為一個(gè)ImageBitmap對象，然后通過CanvasRenderingContext2D對象的transferFromImageBitmap方法顯示給定的ImageBitmap對象，使用案例參考場景示例中第三個(gè)繪制圖片和圖像像素信息處理

3.在Canvas上加載Lottie動(dòng)畫時(shí)，需要先下載Lottie

1.初始化畫布組件

onReady(event: () =>?void)是Canvas組件初始化完成時(shí)的事件回調(diào)

調(diào)用該事件后，可獲取Canvas組件的確定寬高，進(jìn)一步使用CanvasRenderingContext2D對象和OffscreenCanvasRenderingContext2D對象調(diào)用相關(guān)API進(jìn)行圖形繪制

Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#F5DC62')
  .onReady(() => {
    this.context.fillStyle = '#0097D4';
    this.context.fillRect(50, 50, 100, 100);
  })

2.畫布組件繪制方式

Canvas組件生命周期接口onReady()調(diào)用之后，開發(fā)者繪制有兩種方式

1.通過CanvasRenderingContext2D對象和OffscreenCanvasRenderingContext2D對象直接調(diào)用相關(guān)API進(jìn)行繪制

//用來配置CanvasRenderingContext2D對象和OffscreenCanvasRenderingContext2D對象的參數(shù)，包括是否開啟抗鋸齒。true表明開啟抗鋸齒
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#F5DC62')
  .onReady(() =>{
    this.context.beginPath();
    this.context.moveTo(50, 50);
    this.context.lineTo(280, 160);
    this.context.stroke();
   })

2.先單獨(dú)定義path2d對象構(gòu)造理想的路徑，再通過調(diào)用CanvasRenderingContext2D對象和OffscreenCanvasRenderingContext2D對象的stroke接口或者fill接口進(jìn)行繪制

//用來配置CanvasRenderingContext2D對象和OffscreenCanvasRenderingContext2D對象的參數(shù)，包括是否開啟抗鋸齒。true表明開啟抗鋸齒
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#F5DC62')
  .onReady(() =>{
     let region = new Path2D();
     region.arc(100, 75, 50, 0, 6.28);
     this.context.stroke(region);
  })

3.畫布組件常用方法

1.基礎(chǔ)形狀繪制

可以通過arc（繪制弧線路徑）、?ellipse（繪制一個(gè)橢圓）、rect（創(chuàng)建矩形路徑）等接口繪制基礎(chǔ)形狀

Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#F5DC62')
  .onReady(() =>{
     //繪制矩形
     this.context.beginPath();
     this.context.rect(100, 50, 100, 100);
     this.context.stroke();
     //繪制圓形
     this.context.beginPath();
     this.context.arc(150, 250, 50, 0, 6.28);
     this.context.stroke();
     //繪制橢圓
     this.context.beginPath();
     this.context.ellipse(150, 450, 50, 100, Math.PI * 0.25, Math.PI * 0, Math.PI * 2);
     this.context.stroke();
  })

2.文本繪制

可以通過fillText（繪制填充類文本）、strokeText（繪制描邊類文本）等接口進(jìn)行文本繪制

Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#F5DC62')
  .onReady(() =>{
     //繪制填充類文本
     this.context.font = '50px sans-serif';
     this.context.fillText("Hello World!", 50, 100);
     //繪制描邊類文本
     this.context.font = '55px sans-serif';
     this.context.strokeText("Hello World!", 50, 150);
  })

3.繪制圖片和圖像像素信息處理

通過drawImage（圖像繪制）、putImageData（使用ImageData數(shù)據(jù)填充新的矩形區(qū)域）等接口繪制圖片

通過createImageData（創(chuàng)建新的ImageData 對象）、getPixelMap（以當(dāng)前canvas指定區(qū)域內(nèi)的像素創(chuàng)建PixelMap對象）、getImageData（以當(dāng)前canvas指定區(qū)域內(nèi)的像素創(chuàng)建ImageData對象）等接口進(jìn)行圖像像素信息處理

4.其他方法

漸變（CanvasGradient對象）相關(guān)的方法：createLinearGradient（創(chuàng)建一個(gè)線性漸變色）、createRadialGradient（創(chuàng)建一個(gè)徑向漸變色）等

Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#F5DC62')
  .onReady(() =>{
     //創(chuàng)建一個(gè)徑向漸變色的CanvasGradient對象
     let grad = this.context.createRadialGradient(200,200,50, 200,200,200)
     //為CanvasGradient對象設(shè)置漸變斷點(diǎn)值，包括偏移和顏色
     grad.addColorStop(0.0, '#E87361');
     grad.addColorStop(0.5, '#FFFFF0');
     grad.addColorStop(1.0, '#BDDB69');
     //用CanvasGradient對象填充矩形
     this.context.fillStyle = grad;
     this.context.fillRect(0, 0, 400, 400);
  })

二、場景示例

1.繪制基礎(chǔ)圖形

@Entry
@Component
struct ClearRect {
//step1: 定義CanvasRenderingContext2D對象參數(shù)并創(chuàng)建一個(gè)對象用于繪圖，
 private settings: RenderingContextSettings = new RenderingContextSettings(true);
 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

 
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() =>{
//step2：Canvas組件初始化后，回調(diào)函數(shù)中繪制圖形，設(shè)定填充樣式，填充顏色設(shè)為藍(lán)色
          this.context.fillStyle = '#0097D4';
//step3：以(50, 50)為左上頂點(diǎn)，畫一個(gè)寬高200的矩形，該矩形填充顏色為step2設(shè)置顏色
          this.context.fillRect(50,50,200,200);
//setp4：以(70, 70)為左上頂點(diǎn)，清除寬150高100的區(qū)域
          this.context.clearRect(70,70,150,100);
      })
    }
    .width('100%')
    .height('100%')
  }
}

UI渲染

鴻蒙系統(tǒng)怎么寫出橢圓外框和內(nèi)框,鴻蒙開發(fā),harmonyos,ui,華為

2.繪制不規(guī)則圖形

@Entry
@Component
struct Path2d {
//step1：創(chuàng)建CanvasRenderingContext2D對象用戶繪制圖形
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  build() {
    Row() {
      Column() {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#F5DC62')
          .onReady(() =>{
//step2：使用Path2D的接口構(gòu)造一個(gè)五邊形
            let path = new Path2D();
            path.moveTo(150, 50);
            path.lineTo(50, 150);
            path.lineTo(100, 250);
            path.lineTo(200, 250);
            path.lineTo(250, 150);
            path.closePath();
//step3：設(shè)定填充色為藍(lán)色
            this.context.fillStyle = '#0097D4';
//step4：使用step3設(shè)置的填充方式，將Path2D描述的五邊形繪制在canvas組件內(nèi)部
            this.context.fill(path);
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

UI渲染

鴻蒙系統(tǒng)怎么寫出橢圓外框和內(nèi)框,鴻蒙開發(fā),harmonyos,ui,華為

3.繪制圖片和圖像像素信息處理

@Entry
@Component
struct GetImageData {
//step1：定義CanvasRenderingContext2D對象和OffscreenCanvasRenderingContext2D對象
 private settings: RenderingContextSettings = new RenderingContextSettings(true)
 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
//step2：定義接收離屏繪制的圖像對象，用于繪制到canvas組件上
 private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
 
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() =>{
//step3：調(diào)用drawImage接口將圖片畫在（0，0）為起點(diǎn)，寬高130的區(qū)域
          this.offContext.drawImage(this.img,0,0,130,130);
//step4：調(diào)用getImageData接口，獲得canvas組件區(qū)域中，（50，50）為起點(diǎn)，寬高130范圍內(nèi)的繪制內(nèi)容
          let imagedata = this.offContext.getImageData(50,50,130,130);
//step5：調(diào)用putImageData接口將得到的ImageData畫在起點(diǎn)為（150， 150）的區(qū)域中
          this.offContext.putImageData(imagedata,150,150);
//step6：將離屏繪制的內(nèi)容畫到canvas組件上
          let image = this.offContext.transferToImageBitmap();
          this.context.transferFromImageBitmap(image);
        })
    }
    .width('100%')
    .height('100%')
  }
}

?UI渲染

總結(jié)

本文詳細(xì)學(xué)習(xí)了鴻蒙開發(fā)UI使用畫布繪制自定義圖形的相關(guān)知識，了解畫布繪制的三種方式，同時(shí)學(xué)習(xí)了畫布組件的常用用法，以及如何繪制規(guī)則、不規(guī)則圖形、圖片圖像等，下文將學(xué)習(xí)鴻蒙開發(fā)UI動(dòng)畫文章來源地址http://www.zghlxwxcb.cn/news/detail-852613.html

到了這里，關(guān)于鴻蒙開發(fā)-UI-圖形-繪制自定義圖形的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！