• 鸿蒙开发-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进行图形绘制

    1. Canvas(this.context)
    2.   .width('100%')
    3.   .height('100%')
    4.   .backgroundColor('#F5DC62')
    5.   .onReady(() => {
    6.     this.context.fillStyle = '#0097D4';
    7.     this.context.fillRect(50, 50, 100, 100);
    8.   })
    9.

    2.画布组件绘制方式

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

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

    1. //用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。true表明开启抗锯齿
    2.   private settings: RenderingContextSettings = new RenderingContextSettings(true)
    3.   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    4.  
    5. Canvas(this.context)
    6.   .width('100%')
    7.   .height('100%')
    8.   .backgroundColor('#F5DC62')
    9.   .onReady(() =>{
    10.     this.context.beginPath();
    11.     this.context.moveTo(50, 50);
    12.     this.context.lineTo(280, 160);
    13.     this.context.stroke();
    14.    })

    2.先单独定义path2d对象构造理想的路径，再通过调用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的stroke接口或者fill接口进行绘制

    1. //用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。true表明开启抗锯齿
    2.   private settings: RenderingContextSettings = new RenderingContextSettings(true)
    3.   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    4.  
    5. Canvas(this.context)
    6.   .width('100%')
    7.   .height('100%')
    8.   .backgroundColor('#F5DC62')
    9.   .onReady(() =>{
    10.      let region = new Path2D();
    11.      region.arc(100, 75, 50, 0, 6.28);
    12.      this.context.stroke(region);
    13.   })

    3.画布组件常用方法

    1.基础形状绘制

    可以通过arc（绘制弧线路径）、 ellipse（绘制一个椭圆）、rect（创建矩形路径）等接口绘制基础形状

    1. Canvas(this.context)
    2.   .width('100%')
    3.   .height('100%')
    4.   .backgroundColor('#F5DC62')
    5.   .onReady(() =>{
    6.      //绘制矩形
    7.      this.context.beginPath();
    8.      this.context.rect(100, 50, 100, 100);
    9.      this.context.stroke();
    10.      //绘制圆形
    11.      this.context.beginPath();
    12.      this.context.arc(150, 250, 50, 0, 6.28);
    13.      this.context.stroke();
    14.      //绘制椭圆
    15.      this.context.beginPath();
    16.      this.context.ellipse(150, 450, 50, 100, Math.PI * 0.25, Math.PI * 0, Math.PI * 2);
    17.      this.context.stroke();
    18.   })
    19.

    2.文本绘制

    可以通过fillText（绘制填充类文本）、strokeText（绘制描边类文本）等接口进行文本绘制

    1. Canvas(this.context)
    2.   .width('100%')
    3.   .height('100%')
    4.   .backgroundColor('#F5DC62')
    5.   .onReady(() =>{
    6.      //绘制填充类文本
    7.      this.context.font = '50px sans-serif';
    8.      this.context.fillText("Hello World!", 50, 100);
    9.      //绘制描边类文本
    10.      this.context.font = '55px sans-serif';
    11.      this.context.strokeText("Hello World!", 50, 150);
    12.   })
    13.

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

    通过drawImage（图像绘制）、putImageData（使用ImageData数据填充新的矩形区域）等接口绘制图片

    通过createImageData（创建新的ImageData 对象）、getPixelMap（以当前canvas指定区域内的像素创建PixelMap对象）、getImageData（以当前canvas指定区域内的像素创建ImageData对象）等接口进行图像像素信息处理

    4.其他方法

    渐变（CanvasGradient对象）相关的方法：createLinearGradient（创建一个线性渐变色）、createRadialGradient（创建一个径向渐变色）等

    1. Canvas(this.context)
    2.   .width('100%')
    3.   .height('100%')
    4.   .backgroundColor('#F5DC62')
    5.   .onReady(() =>{
    6.      //创建一个径向渐变色的CanvasGradient对象
    7.      let grad = this.context.createRadialGradient(200,200,50, 200,200,200)
    8.      //为CanvasGradient对象设置渐变断点值，包括偏移和颜色
    9.      grad.addColorStop(0.0, '#E87361');
    10.      grad.addColorStop(0.5, '#FFFFF0');
    11.      grad.addColorStop(1.0, '#BDDB69');
    12.      //用CanvasGradient对象填充矩形
    13.      this.context.fillStyle = grad;
    14.      this.context.fillRect(0, 0, 400, 400);
    15.   })

    二、场景示例

    1.绘制基础图形

    1. @Entry
    2. @Component
    3. struct ClearRect {
    4. //step1: 定义CanvasRenderingContext2D对象参数并创建一个对象用于绘图，
    5.  private settings: RenderingContextSettings = new RenderingContextSettings(true);
    6.  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
    7.  
    8.  
    9.   build() {
    10.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
    11.       Canvas(this.context)
    12.         .width('100%')
    13.         .height('100%')
    14.         .backgroundColor('#F5DC62')
    15.         .onReady(() =>{
    16. //step2：Canvas组件初始化后，回调函数中绘制图形，设定填充样式，填充颜色设为蓝色
    17.           this.context.fillStyle = '#0097D4';
    18. //step3：以(50, 50)为左上顶点，画一个宽高200的矩形，该矩形填充颜色为step2设置颜色
    19.           this.context.fillRect(50,50,200,200);
    20. //setp4：以(70, 70)为左上顶点，清除宽150高100的区域
    21.           this.context.clearRect(70,70,150,100);
    22.       })
    23.     }
    24.     .width('100%')
    25.     .height('100%')
    26.   }
    27. }
    28.

    UI渲染

    2.绘制不规则图形

    1. @Entry
    2. @Component
    3. struct Path2d {
    4. //step1：创建CanvasRenderingContext2D对象用户绘制图形
    5.   private settings: RenderingContextSettings = new RenderingContextSettings(true);
    6.   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
    7.  
    8.   build() {
    9.     Row() {
    10.       Column() {
    11.         Canvas(this.context)
    12.           .width('100%')
    13.           .height('100%')
    14.           .backgroundColor('#F5DC62')
    15.           .onReady(() =>{
    16. //step2：使用Path2D的接口构造一个五边形
    17.             let path = new Path2D();
    18.             path.moveTo(150, 50);
    19.             path.lineTo(50, 150);
    20.             path.lineTo(100, 250);
    21.             path.lineTo(200, 250);
    22.             path.lineTo(250, 150);
    23.             path.closePath();
    24. //step3：设定填充色为蓝色
    25.             this.context.fillStyle = '#0097D4';
    26. //step4：使用step3设置的填充方式，将Path2D描述的五边形绘制在canvas组件内部
    27.             this.context.fill(path);
    28.           })
    29.       }
    30.       .width('100%')
    31.     }
    32.     .height('100%')
    33.   }
    34. }

    UI渲染

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

    1. @Entry
    2. @Component
    3. struct GetImageData {
    4. //step1：定义CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象
    5.  private settings: RenderingContextSettings = new RenderingContextSettings(true)
    6.  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
    7.  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
    8. //step2：定义接收离屏绘制的图像对象，用于绘制到canvas组件上
    9.  private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
    10.  
    11.   build() {
    12.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
    13.       Canvas(this.context)
    14.         .width('100%')
    15.         .height('100%')
    16.         .backgroundColor('#F5DC62')
    17.         .onReady(() =>{
    18. //step3：调用drawImage接口将图片画在（0，0）为起点，宽高130的区域
    19.           this.offContext.drawImage(this.img,0,0,130,130);
    20. //step4：调用getImageData接口，获得canvas组件区域中，（50，50）为起点，宽高130范围内的绘制内容
    21.           let imagedata = this.offContext.getImageData(50,50,130,130);
    22. //step5：调用putImageData接口将得到的ImageData画在起点为（150， 150）的区域中
    23.           this.offContext.putImageData(imagedata,150,150);
    24. //step6：将离屏绘制的内容画到canvas组件上
    25.           let image = this.offContext.transferToImageBitmap();
    26.           this.context.transferFromImageBitmap(image);
    27.         })
    28.     }
    29.     .width('100%')
    30.     .height('100%')
    31.   }
    32. }

     UI渲染

    总结

    本文详细学习了鸿蒙开发UI使用画布绘制自定义图形的相关知识，了解画布绘制的三种方式，同时学习了画布组件的常用用法，以及如何绘制规则、不规则图形、图片图像等，下文将学习鸿蒙开发UI动画

  • 相关阅读:
    电池使用时间报告
    AD四层板总结
    微信小程序 input 不能输入特殊字符的方法
    使用JAXB将xml转成Java对象
    基于html5的网上书店系统
    信息化与信息系统2
    【Express】中间件
    使用nodejs-koa2-mysql-sequelize-jwt 实现项目api接口
    欧奈尔RPS曲线的编制方法及常见问题解答
    Shiro的实现机制（源码解析）
  • 原文地址：https://blog.csdn.net/u013488266/article/details/136315982