鸿蒙--canvas 实现波浪效果

Android-海绵

已于 2024-05-06 17:08:42 修改

阅读量556

点赞数 19

文章标签： harmonyos 华为

于 2024-05-06 15:59:10 首次发布

本文链接：https://blog.csdn.net/m0_64365896/article/details/138496894

版权

本文讲述了如何在Android中使用canvas实现波浪效果，并对比了在鸿蒙操作系统中使用CanvasRenderingContext2DAPI进行类似绘制的差异，以及如何迁移和调整代码以适应鸿蒙环境。

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

前言

Android 中 canvas 能画出来的东西鸿蒙的 canvas 还画不了，不大可能吧？有个朋友问鸿蒙应用中想实现波浪效果，应该咋画？这个问题，你能在 Android 上用 canvas 画出来，在鸿蒙里面用 canvas 画不出来？还是 api 不熟悉吧？

开始

波浪效果嘛，首先想到的是正弦、余弦函数、贝塞尔曲线，还有一个傅里叶变换，不过这个有点搞不定。这里选择使用贝塞尔曲线，因为之前在 Android 中画过，应该可以很丝滑的迁移过来。

确认起始点，确认终点，计算控制点，然后调用 api 划线，最后填充一下就好了。怎么动起来？Android 这边用的动画，其实用 handler 或者其他东西搞个定时更新也行。先看效果图

在这里插入图片描述

看下鸿蒙对应的 api，目前开放的最新的HarmonyOS文档是 3.1/4.0的，对应地址是这个 developer.harmonyos.com/cn/docs/doc…
目前开放的最新的 OpenHarmony 文档是4.0 的，对应地址在这里 docs.openharmony.cn/pages/v4.0/…
步骤都差不多，只不过鸿蒙中没有画笔的概念，需要对CanvasRenderingContext2D对象进行操作设置，包括设置线条颜色、线条宽度、图型填充颜色等。
想要画线、画出各种形状，可以直接操作CanvasRenderingContext2D对象，也可以创建Path2D对象进行操作。其余 api 可以查看对应的文档。

设计

这还有啥好设计的，直接_抄移植 Android 上面的实现就好了
由于需要动起来，为了避免移动后左右有空白，这里需要多画一个波浪

在这里插入图片描述

这里需要注意的是，我们需要上面这条蓝色的线，而不是下面这条绿色的。

在 Android 中画二阶贝塞尔曲线有两个 api,一个是
public void rQuadTo(float dx1, float dy1, float dx2, float dy2)
这个表示的是控制点和终点相对于上一个控制点和终点的偏移量另外一个是
public void quadTo(float x1, float y1, float x2, float y2)
这个表示是控制点和终点的绝对坐标值
但在鸿蒙中没有找到对应的 api，我们可以自己计算一下：这里的控制点的横坐标是起点和终点的中间值，控制点的纵坐标取的是波浪高度
所以上面两条线的画法是这样的

Canvas(this.canvasRendering).width("100%").height("30%")
        .onAreaChange((oldValue,newValue)=>{
          this.canvasRendering.fillStyle = "#39d167"

          this.canvasRendering.strokeStyle = "#39d167"
          this.canvasRendering.lineWidth = 10
          let canvasWidth = parseInt(newValue.width.toString())
          let canvasHeight = parseInt(newValue.height.toString())

          let waveWidth = canvasWidth/2
          let waveHeight = 100
          let baseHeight =canvasHeight

          let path:Path2D = new Path2D()
          
          path.moveTo(0,baseHeight)
          //波浪宽度是画布的一半，这里偷懒直接写了
          path.quadraticCurveTo( waveWidth/2,baseHeight-waveHeight ,waveWidth,baseHeight)
          path.quadraticCurveTo(waveWidth+waveWidth/2,  baseHeight-waveHeight ,canvasWidth,baseHeight)
          this.canvasRendering.stroke(path)


          path = new Path2D()
          baseHeight /=3
          path.moveTo(0,baseHeight)
          //波浪宽度是画布的一半，这里偷懒直接写了
          path.quadraticCurveTo( waveWidth/2,baseHeight-waveHeight ,waveWidth,baseHeight)
          path.quadraticCurveTo(waveWidth+waveWidth/2,  baseHeight+waveHeight ,canvasWidth,baseHeight)
          this.canvasRendering.strokeStyle = "#1b91e0"
          this.canvasRendering.stroke(path)
          
        })

实现

实现也一样，直接_抄移植过来就好了，对应的 api 怎么用也搞定了，代码如下

@Component
export struct WaveView{
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private canvasRendering: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private canvasHeight: number = -1
  private canvasWidth: number = -1
  @State private dx: number = 0 //最大值等于 waveWidth，每次移动的距离
  private waveHeight = 50 //拍脑袋订的数值
  private baseHeight = 300 //拍脑袋订的数值
  private waveWidth = 0;
  private intervalTimer: number = 0
  drawWave() {
    this.dx += 4
    if (this.dx >= this.waveWidth) {
      this.dx = 0
    }
    this.canvasRendering.clearRect(0, 0, this.canvasWidth, this.canvasHeight)

    if (this.waveWidth == 0) {
      this.waveWidth = this.canvasWidth / 2
    }

    let path: Path2D = new Path2D()
    //需要在屏幕外多画一个波浪，这里先将画笔移动到画布|屏幕外，记得加上动画的偏移量 dx
    path.moveTo(-this.waveWidth + this.dx, this.baseHeight)
    let startX = -this.waveWidth + this.dx//记录开始点的横坐标
    //需要多画一个波浪，直接循环开始画就好了
    while (startX < this.canvasWidth + this.dx) {

      let endY = this.baseHeight
      //画向下和向上的波浪，全靠控制点的纵坐标控制波浪的上线
      path.quadraticCurveTo(startX + this.waveWidth / 4, this.baseHeight - this.waveHeight, startX + this.waveWidth/2, endY)
      path.quadraticCurveTo(startX + this.waveWidth / 4*3, this.baseHeight + this.waveHeight, startX + this.waveWidth, endY)
      //画完一上一下这一组波浪后更新起始点坐标
      startX += this.waveWidth
    }
    //需要将波浪线下方的区域填满颜色，这里取巧圈起来一个框，使用 fill 方法填充
    path.lineTo(startX ,this.canvasHeight) //波浪线最右侧画一条到画布底部的垂线
    path.lineTo(0 ,this.canvasHeight)//画布底部的横线
    path.lineTo(0 ,this.baseHeight + this.waveHeight) //波浪线最左侧到画布底部的垂线

    this.canvasRendering.fillStyle = "#39d167"
    this.canvasRendering.strokeStyle = "#39d167"
    this.canvasRendering.lineWidth = 10
    this.canvasRendering.fill(path)

  }

  build() {
    Column() {
      Canvas(this.canvasRendering).layoutWeight(1).width("100%")
        .onAreaChange((oldValue, newValue) => {
          this.canvasWidth = parseInt(newValue.width.toString())
          this.canvasHeight = parseInt(newValue.height.toString())

          this.baseHeight = this.canvasHeight - 300
          this.waveWidth = this.canvasWidth / 2
          this.drawWave()

        })
      Row() {
        Button("开始").onClick(() => {
          if (this.intervalTimer != 0) {
            clearInterval(this.intervalTimer)
          }
          this.intervalTimer = setInterval(function(){
            this.drawWave()
          }.bind(this), 10)
        })
        Blank().width(15)
        Button("停止").onClick(() => {
          if (this.intervalTimer != 0) {
            clearInterval(this.intervalTimer)
          }
        })
      }.margin({ bottom: 10 })

    }
  }

}

进化

稍微修改一下就可以做成其他效果
比如将baseHeight也用@State修饰一下，同时在定时器中更新一下，就可以实现注水效果再将画布裁成圆形，就是一个简单的充电、内存加速球效果。再做点随机的粒子效果或者多画几条浅色的波浪线，效果就更好了

最后

鸿蒙开发正当时，现在入手正是好时机。

还在犹豫不决的朋友们，小编在这里建议大家早点入手！

在这里分享一份鸿蒙学习路线图帮助那些不知道怎么入门的朋友，另外一些鸿蒙开发的资料文档也顺便分享给大家，扫下方二维码就能免费送呢！

鸿蒙学习路线图

路线图适合人群：

IT开发人员：想要拓展职业边界，享受新技术带来的溢价红利
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能

HarmonyOS 4.0 APP Developer

在这里插入图片描述

OpenHarmony 5.0 Next视音频

在这里插入图片描述

OpenHarmony 5.0 Next进阶

在这里插入图片描述

OpenHarmony 5.0 Next分布式

在这里插入图片描述

学习资料

内容概要：《鸿蒙零基础入门学习指南》、《鸿蒙开发学习之UI》、《鸿蒙开发学习之Web》、《鸿蒙开发学习之应用模型》

内容特点：条理清晰，含图像化表示更加易懂。

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙零基础入门学习指南》

一、快速入门

适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用，快速了解工程目录的主要文件，熟悉HarmonyOS应用开发流程。

开发准备
构建第一个ArkTS应用（Stage模型）
构建第一个ArkTS应用（FA模型）
构建第一个JS应用（FA模型）

二、开发基础知识

应用程序包基础知识
应用配置文件（Stage模型）
应用配置文件概述（FA模型）

三、资源分类与访问

应用开发过程中，经常需要用到颜色、字体、间距、图片等资源，在不同的设备或配置中，这些资源的值可能不同。

资源分类与访问
创建资源目录和资源文件
资源访问

四、学习ArkTs语言

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力。

初识ArkTS语言
基本语法
状态管理
其他状态管理
渲染控制

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙开发学习之UI》

一、方舟开发框架（ArkUI）概述

二、基于ArkTS声明式开发范式

1、UI开发（ArkTS声明式开发范式）概述
2、开发布局
3、添加组件
4、显示图片
5、使用动画
6、支持交互事件
7、性能提升的推荐方法

三、兼容JS的类Web开发范式

1、概述
2、框架说明
3、构建用户界面
4、常见组件开发指导
5、动效开发指导
6、自定义组件

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙开发学习之Web》

Web组件概述

使用Web组件加载页面

设置基本属性和事件

设置深色模式
上传文件
在新窗口中打开页面
管理位置权限

在应用中使用前端页面JavaScript

应用侧调用前端页面函数
前端页面调用应用侧函数
建立应用侧与前端页面数据通道
管理页面跳转及浏览记录导航
管理Cookie及数据存储
自定义页面请求响应
使用Devtools工具调试前端页面

ArkTS语言基础类库概述

并发

并发概述
使用异步并发能力进行开发
使用多线程并发能力
容器类库
XML生成、解析、与转换
通知

窗口管理

窗口开发概述
管理应用窗口（Stage模型）
管理应用窗口（FA模型）

WebGL

概述
WebGL开发指导

媒体

媒体应用开发概念
图片

安全

访问控制
ohos.permission.USE_BLUETOOTH
ohos.permission.DISCOVER_BLUETOOTH
ohos.permission.MANAGE_BLUETOOTH
ohos.permission.INTERNET
ohos.permission.INTERNET
…

网络与连接

网络管理
IPC与RPC通信

电话服务

电话服务开发概述
跳转拨号页面
获取当前蜂窝网络信号信息

数据管理

数据管理概述
应用数据持久化
场景介绍
运作机制
约束限制
接口说明
…

文件管理

文件管理概述
应用文件
用户文件
分布式文件系统

后台任务管理

后台任务总体概述
短时任务
长时任务
延时任务
代理提醒

设备管理

USB服务
位置服务
传感器
分布式跟踪开发指导
错误管理
…

在这里插入图片描述

国际化

国际化开发概述
Intl开发指导
I18n开发指导

应用测试

自动化测试框架使用指南

Native API相关指导

Native API在应用工程中的使用指导
Drawing开发指导
Rawfile开发指导
NativeWindow 开发指导
…

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙开发学习之应用模型》

应用模型概述

应用模型的构成要素
应用模型解读

Stage模型开发指导

Stage模型开发概述
Stage模型应用组件

FA模型开发指导

FA模型开发概述
FA模型应用组件配置
进程模型
线程模型

领取方式：扫描下方二维码即可免费领取！！！

Android-海绵

关注

19
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
鸿蒙--canvas 实现波浪效果

鸿蒙开发正当时，现在入手正是好时机。还在犹豫不决的朋友们，小编在这里建议大家早点入手！在这里分享一份鸿蒙学习路线图帮助那些不知道怎么入门的朋友，另外一些鸿蒙开发的资料文档也顺便分享给大家，扫下方二维码就能免费送呢！1、UI开发（ArkTS声明式开发范式）概述2、开发布局3、添加组件4、显示图片5、使用动画6、支持交互事件7、性能提升的推荐方法设置深色模式上传文件在新窗口中打开页面管理位置权限并发概述使用异步并发能力进行开发使用多线程并发能力容器类库。
复制链接

扫一扫