OpenHarmony实战开发-如何使用画布绘制实现自定义图形 (Canvas)

最新推荐文章于 2024-07-02 23:22:08 发布

码牛程序猿

最新推荐文章于 2024-07-02 23:22:08 发布

阅读量749

点赞数 15

分类专栏：鸿蒙工程师鸿蒙 HarmonyOS 文章标签： harmonyos 鸿蒙应用开发 OpenHarmony 华为鸿蒙鸿蒙开发 HarmonyOS

本文链接：https://blog.csdn.net/2401_82546228/article/details/138257358

版权

本文介绍了在鸿蒙系统中使用Canvas组件及其相关对象（如CanvasRenderingContext2D和OffscreenCanvasRenderingContext2D）进行自定义图形绘制的方法，包括基础形状、文本、图片和离屏绘制技术。此外，还提及了如何结合Lottie动画和Path2D对象实现复杂绘制。

摘要由CSDN通过智能技术生成

Canvas提供画布组件，用于自定义绘制图形，开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制，绘制对象可以是基础形状、文本、图片等。

使用画布组件绘制自定义图形

可以由以下三种形式在画布绘制自定义图形：

使用CanvasRenderingContext2D对象在Canvas画布上绘制。

@Entry
@Component
struct CanvasExample1 {
   
  //用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  //用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
   
    Flex({
    direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
   
      //在canvas中调用CanvasRenderingContext2D对象。
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() => {
   
          //可以在这里绘制内容。
          this.context.strokeRect(50, 50, 200, 150);
        })
    }
    .width('100%')
    .height('100%')
  }
}

在这里插入图片描述

离屏绘制是指将需要绘制的内容先绘制在缓存区，再将其转换成图片，一次性绘制到Canvas上，加快了绘制速度。过程为：

1.通过transferToImageBitmap方法将离屏画布最近渲染的图像创建为一个ImageBitmap对象。
2.通过CanvasRenderingContext2D对象的transferFromImageBitmap方法显示给定的ImageBitmap对象。

@Entry
@Component
struct CanvasExample2 {
   
//用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。true表明开启抗锯齿
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
//用来创建OffscreenCanvas对象，width为离屏画布的宽度，height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
  build() {
   
    Flex({
    direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
   
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() =>{
   
          let offContext = this.offCanvas.getContext("2d", this.settings)
          //可以在这里绘制内容
          offContext.strokeRect(50, 50, 200, 150);
          //将离屏绘值渲染的图像在普通画布上显示
          let image = this.offCanvas.transferToImageBitmap();
          this.context.transferFromImageBitmap(image);
        })
    }
    .width('100%')
    .height('100%')
  }
}