鸿蒙开发-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 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.先单独定义path2d对象构造理想的路径，再通过调用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的stroke接口或者fill接口进行绘制

//用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。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.基础形状绘制

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

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（绘制描边类文本）等接口进行文本绘制

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数据填充新的矩形区域）等接口绘制图片

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

4.其他方法

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

Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#F5DC62')
  .onReady(() =>{
     //创建一个径向渐变色的CanvasGradient对象
     let grad = this.context.createRadialGradient(200,200,50, 200,200,200)
     //为CanvasGradient对象设置渐变断点值，包括偏移和颜色
     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.绘制基础图形

@Entry
@Component
struct ClearRect {
//step1: 定义CanvasRenderingContext2D对象参数并创建一个对象用于绘图，
 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组件初始化后，回调函数中绘制图形，设定填充样式，填充颜色设为蓝色
          this.context.fillStyle = '#0097D4';
//step3：以(50, 50)为左上顶点，画一个宽高200的矩形，该矩形填充颜色为step2设置颜色
          this.context.fillRect(50,50,200,200);
//setp4：以(70, 70)为左上顶点，清除宽150高100的区域
          this.context.clearRect(70,70,150,100);
      })
    }
    .width('100%')
    .height('100%')
  }
}

UI渲染

2.绘制不规则图形

@Entry
@Component
struct Path2d {
//step1：创建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的接口构造一个五边形
            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：设定填充色为蓝色
            this.context.fillStyle = '#0097D4';
//step4：使用step3设置的填充方式，将Path2D描述的五边形绘制在canvas组件内部
            this.context.fill(path);
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

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：调用drawImage接口将图片画在（0，0）为起点，宽高130的区域
          this.offContext.drawImage(this.img,0,0,130,130);
//step4：调用getImageData接口，获得canvas组件区域中，（50，50）为起点，宽高130范围内的绘制内容
          let imagedata = this.offContext.getImageData(50,50,130,130);
//step5：调用putImageData接口将得到的ImageData画在起点为（150， 150）的区域中
          this.offContext.putImageData(imagedata,150,150);
//step6：将离屏绘制的内容画到canvas组件上
          let image = this.offContext.transferToImageBitmap();
          this.context.transferFromImageBitmap(image);
        })
    }
    .width('100%')
    .height('100%')
  }
}

 UI渲染

总结

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/412914.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Linux进程间通信（2）

Linux进程间通信（2）

目录 前言： 正文 1.命名管道 1.1创建及使用 1.2命名管道的工作原理 1.3命名管道与匿名管道的区别 2.命名管道特点及应用场景 2.1特点 2.2场景 3.命名管道实操 3.1实现文件拷贝 3.2实现进程控制 总结： 前言： 管道中除了…
阅读更多...
解锁财务信任，掌握企业业务合作中的倾听艺术

解锁财务信任，掌握企业业务合作中的倾听艺术

企业在经营管理过程中，经常会思考如何才能成为一个完美的财务业务融合体，实现业务合作的最大价值。当我们置身于企业战略规划的构建过程中，就会明显的感觉到，获得财务信任有助于指导团队做出重大决策并推动企业未来的行动。市场和…
阅读更多...
读人工不智能：计算机如何误解世界笔记04_数据新闻学

读人工不智能：计算机如何误解世界笔记04_数据新闻学

1. 计算化和数据化的变革 1.1. 每一个领域都在进行计算化和数据化的变革 1.1.1. 出现了计算社会科学、计算生物学、计算化学或其他数字人文学科 1.1.2. 生活已走向计算化，人们却一点也没有变 1.2. 在如今的计算化和数据化世界中，调查性新闻的实践必须…
阅读更多...
图神经网络的背后：HOW POWERFUL ARE GRAPH NEURAL NETWORKS？

图神经网络的背后：HOW POWERFUL ARE GRAPH NEURAL NETWORKS？

PNACONV - 知乎这是一篇非常接地气的paper，也具有很好的应用价值。 1 aggregators文中提到不同的聚合函数实际上反应的信息是不同的，gin中也有提到类似的内容。 风浪：图神经网络的背后：HOW POWERFUL ARE GRAPH NEURAL NETWORK…ht…
阅读更多...
自学Python第十五天-常用的HTML解析工具：bs4、xpath、re

自学Python第十五天-常用的HTML解析工具：bs4、xpath、re

自学Python第十五天-常用的HTML解析工具：bs4、xpath、re BS4安装和引入开始使用find_all() 方法获取标签find() 方法获取标签select() 方法获取标签，css 选择器从标签中获取数据 XPathxpath 基础xpath 语法规则lxml 模块xpath() 方法 REmatch() 方法sear…
阅读更多...
【黑马程序员】STL之stack与queue常用操作

【黑马程序员】STL之stack与queue常用操作

stack容器 stack基本概念 stack是一种先进后出的数据结构&#xff0c;它只有一个出口 栈中只有顶端元素才可以被外界使用&#xff0c;因此栈不支持遍历操作 stack常用接口 stack代码示例 #include <iostream> #include <stack>using namespace std;void test()…
阅读更多...
AI：138-开发一种能够自动化生成艺术品描述的人工智能系统

AI：138-开发一种能够自动化生成艺术品描述的人工智能系统

🚀点击这里跳转到本专栏，可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航！ 从基础到实践，深入学习。无论你是初学者还是经验丰富的老手，对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带关键代码，详细讲解供大家学习，希望…
阅读更多...
【软件工具】Typora 免费版下载安装Markdown编辑器-Win10快速安装

【软件工具】Typora 免费版下载安装Markdown编辑器-Win10快速安装

目录 下载安装激活配置图片路径管理高亮显示自动保存 使用教程 前言 Typora&#xff0c; 是一款好用的编辑器和阅读器。这里为大家找了一个可使用版本&#xff0c;安装过程十分简单&#xff0c;亲测有效&#xff0c;不浪费大家时间&#xff0c;现在将Typora分享给大家免费使用。…
阅读更多...
C# OpenVino Yolov8 Pose 姿态识别

C# OpenVino Yolov8 Pose 姿态识别

目录 效果 模型信息 项目 代码 下载 效果 模型信息 Model Properties ------------------------- date&#xff1a;2023-09-07T17:11:43.091306 description&#xff1a;Ultralytics YOLOv8n-pose model trained on /usr/src/app/ultralytics/datasets/coco-pose.yaml a…
阅读更多...
visual stdio 使用ATL简单使用COM组件

visual stdio 使用ATL简单使用COM组件

先试用visual stdio创建ATL项目 选择第一个创建ATL简单对象 ProgId也需要添加一下&#xff0c;默认创建完之后添加方法 STDMETHODIMP AddNumber(LONG __num, LONG* result);添加定义 STDMETHODIMP_(HRESULT __stdcall) CATLSimpleObject::AddNumber(LONG __num, LONG* r…
阅读更多...
智能充电桩案例分析——交流充电桩

智能充电桩案例分析——交流充电桩

随着电动汽车的发展&#xff0c;充电桩也成为当下的一个很热门的工业产品。我们初步接触充电桩&#xff0c;有了点滴的感受。 先简单说说容易一点的交流充电桩。就是通过市电&#xff08;220V,50赫兹&#xff09;给电动汽车提供充电的能源来源。很容易理解&#xff0c;交流…
阅读更多...
高数考研 -- 公式总结(更新中)

高数考研 -- 公式总结(更新中)

1. 两个重要极限 (1) lim ⁡ x → 0 sin ⁡ x x 1 \lim _{x \rightarrow 0} \frac{\sin x}{x}1 limx→0​xsinx​1, 推广形式 lim ⁡ f ( x ) → 0 sin ⁡ f ( x ) f ( x ) 1 \lim _{f(x) \rightarrow 0} \frac{\sin f(x)}{f(x)}1 limf(x)→0​f(x)sinf(x)​1. (2) lim ⁡…
阅读更多...
产品经理学习-产品运营《什么是SOP》

产品经理学习-产品运营《什么是SOP》

目录 什么是SOP 如何执行SOP 执行SOP的重点 什么是SOP SOP就是项目流程操作的说明书 日常工作中的例行操作&#xff1a; 例行操作是指&#xff0c;在每一天&#xff0c;针对每一个用户&#xff0c;在每个项目之中&#xff0c;都必须完成的操作&#xff0c;这些必须完成的操…
阅读更多...
CleanMyMac2024永久免费mac电脑版本安装包下载

CleanMyMac2024永久免费mac电脑版本安装包下载

CleanMyMac 4 for Mac&#xff1a;细致入微的功能介绍&#xff0c;CleanMyMac 4 for Mac作为一款系统清理和优化工具&#xff0c;提供了丰富而细致的功能&#xff0c;旨在满足Mac用户在不同场景下的清理和优化需求。以下是对CleanMyMac 4功能的更加细化介绍&#xff1a; CleanM…
阅读更多...
MySQL的SQL语句

MySQL的SQL语句

1.MySQL连接 连接命令一般是这样写的 mysql -h$ip -P$port -u$user -p比如:mysql -h127.0.0.1 -P3306 -uroot -p -h 指定连接的主机地址&#xff1b;-P 指定连接端口号&#xff1b;-u 指定用户名 -p指定用户名密码 2.SQL分类 DDL(Data Definition Language) 数据定义语言&…
阅读更多...
【数据结构】链表面试题

【数据结构】链表面试题

203.移除链表元素 206.反转链表 876.链表的中间结点 牛客.链表中倒数第k个结点 21.合并两个有序链表 牛客.链表分隔 牛客.链表的回文结构 160.相交链表 141.环形链表 142.环形链表2 1. 移除链表元素 题目描述 思路&#xff1a; 定义一个指针cur遍历整个链表&#xff0c;一个ta…
阅读更多...
大开眼界的4款黑科技软件，功能强大，网友：越用越上瘾

大开眼界的4款黑科技软件，功能强大，网友：越用越上瘾

作为一名热衷于探索软件的搞机爱好者&#xff0c;小蛙在各大软件论坛间游走&#xff0c;旨在帮助大家在纷繁复杂的Windows软件世界中&#xff0c;寻找到那些真正值得安装的神器。 在忙碌的现代生活中&#xff0c;我们的磁盘空间和时间都显得尤为宝贵&#xff0c;没必要下一些鸡…
阅读更多...
解决内嵌帆软报表出现重定向问题

解决内嵌帆软报表出现重定向问题

最近收到反馈&#xff0c;某些程序的前端通过iframe标签内嵌finebi帆软报表时&#xff0c;出现一系列问题。 问题1: 如下图所示&#xff0c;单点登录(单点登录地址schema是https)后service地址的schema协议是http, 浏览器内核的安全策略不允许http访问https。 解决方案&#xf…
阅读更多...
java数据结构与算法刷题-----LeetCode530. 二叉搜索树的最小绝对差

java数据结构与算法刷题-----LeetCode530. 二叉搜索树的最小绝对差

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 解题思路&#xff1a;时间复杂度O(n)&#xff0c;空间复杂度O(n) 一个有序…
阅读更多...
阻抗与电气模型（三）

阻抗与电气模型（三）

阻抗的定义为电压与电流的比值&#xff0c;通常用大写字母Z表示。Z V/I&#xff0c;当信号沿互连传播时&#xff0c;将不断的探测互连的阻抗&#xff0c;并做出相应的反应。阻抗又称为交流&#xff08;AC&#xff09;电阻。 如果知道了互连的阻抗和传播时延&#xff0c;也就知…
阅读更多...
最新文章

Copyright @ 2022~2023