鸿蒙开发-UI-图形-绘制自定义图形

鸿蒙开发-UI-组件

鸿蒙开发-UI-组件2

鸿蒙开发-UI-组件3

鸿蒙开发-UI-气泡/菜单

鸿蒙开发-UI-页面路由

鸿蒙开发-UI-组件导航-Navigation

鸿蒙开发-UI-组件导航-Tabs

鸿蒙开发-UI-图形-图片

鸿蒙开发-UI-图形-绘制几何图形

文章目录

前言

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

1.初始化画布组件

3.画布组件常用方法

1.基础形状绘制

2.文本绘制

3.绘制图片和图像像素信息处理

4.其他方法

二、场景示例

1.绘制基础图形

2.绘制不规则图形

3.绘制图片和图像像素信息处理

总结

---

前言

上文学习了鸿蒙开发UI显示图形关于几何图形绘制的相关知识，了解了相关图形绘制组件以及两种绘制方式，同时学习了形状视口来做图形的缩放效果，本文将学习使用画布绘制自定义图形

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

Canvas提供画布组件，用于自定义绘制图形

CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制，绘制对象可以是基础形状、文本、图片等，有三种形式在画布绘制自定义图形

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

2. 离屏绘制，将需要绘制的内容先绘制在缓存区，再将其转换成图片绘制到Canvas上，首先通过transferToImageBitmap方法将离屏画布最近渲染的图像创建为一个ImageBitmap对象，然后通过CanvasRenderingContext2D对象的transferFromImageBitmap方法显示给定的ImageBitmap对象，使用案例参考场景示例中第三个绘制图片和图像像素信息处理

3.在Canvas上加载Lottie动画时，需要先下载Lottie

1.初始化画布组件

onReady(event: () => void)是Canvas组件初始化完成时的事件回调

调用该事件后，可获取Canvas组件的确定宽高，进一步使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象调用相关API进行图形绘制

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

2.画布组件绘制方式

Canvas组件生命周期接口onReady()调用之后，开发者绘制有两种方式

1.通过CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象直接调用相关API进行绘制

//用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。true表明开启抗锯齿
  private settings: RenderingContextSettings = new