鸿蒙–canvas 实现波浪效果

前言

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

开始

波浪效果嘛，首先想到的是正弦、余弦函数、贝塞尔曲线，还有一个傅里叶变换，不过这个有点搞不定。这里选择使用贝塞尔曲线，因为之前在 Android 中画过，应该可以很丝滑的迁移过来
先复习一下在 Android 中怎么实现：blog.huangyuanlove.com/2019/01/20/…

确认起始点，确认终点，计算控制点，然后调用 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修饰一下，同时在定时器中更新一下，就可以实现注水效果
再将画布裁成圆形，就是一个简单的充电、内存加速球效果。再做点随机的粒子效果或者多画几条浅色的波浪线，效果就更好了

以上

原文链接：https://juejin.cn/post/7321587195328692250 作者：Huang兄