写点什么

鸿蒙 OS 创新实践:动态声控话筒开发指南

  • 2024-11-04
    北京
  • 本文字数:2188 字

    阅读完需:约 7 分钟

前言

在鸿蒙 OS 的生态中,开发者们不断探索和创新,以期为用户带来更丰富的交互体验。最近,我萌生了一个想法:制作一个能够随着声音动态变化的话筒组件。尽管网络上缺乏现成的参考案例,但我决定亲自动手,将这一创意变为现实。本文将深入解析这一开发过程,分享我的实战经验和技术细节。

一、前期准备

在开始之前,我们需要准备两张图片,它们将作为话筒动态效果的基础。将这些图片放置在项目的entry/ets目录下,并在代码中进行相应的配置。




最后效果:



代码示例:


private img: ImageBitmap = new ImageBitmap("image/img.png");private img2: ImageBitmap = new ImageBitmap("image/img_1.png");
复制代码

二、理解绘制所需类

为了实现动态效果,我们需要了解并使用一些关键的类和对象。这些类将帮助我们在 Canvas 上进行绘制和效果处理。


RenderingContextSettings:用于配置CanvasRenderingContext2D对象,包括是否开启抗锯齿功能。


private settings: RenderingContextSettings = new RenderingContextSettings(true);
复制代码


CanvasRenderingContext2D:用于创建绘图上下文,通过它我们可以在 Canvas 中绘制图形。


private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
复制代码


OffscreenCanvas:一个离屏画布,允许我们在不影响主线程的情况下进行绘制操作。


private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600);
复制代码

三、制定话筒显示效果规则

话筒的动态效果将根据声音的强度变化。我们定义了五个级别,从 0 到 5,分别代表声音的不同强度。为了模拟这一效果,我们编写了一个函数来随机生成声音等级。


模拟声音等级函数:


generateRandomNumberUpToFive(): number {  const randomInt = Math.floor(Math.random() * 5); // 0, 1, 2, 3, 4  // 有1/5的概率返回5  if (Math.random() < 0.2) {    return 5;  }  return randomInt;}
复制代码


为了实现动态效果,我们使用一个定时器每隔一段时间更新声音等级,并在组件初始化时开始这一过程。


组件初始化:


@State @Watch('draw') level: number = 3;
aboutToAppear(): void { setInterval(() => { this.level = this.generateRandomNumberUpToFive(); }, 300);}
复制代码

四、关键代码

在实现动态效果时,我们需要先清除之前的绘制效果,然后根据声音等级绘制话筒的动态层效果。最终,将这些效果叠加在一起,展示出最终的动态效果。


绘制逻辑:


draw() {  this.context.clearRect(0, 0, 192, 192);  let offContext = this.offCanvas.getContext("2d", this.settings);  offContext.drawImage(this.img2, 0, 0, 192, 192);  let h = this.level * 192 / 5;  let imagedata = offContext.getImageData(0, h, 192, 192);  offContext.drawImage(this.img, 0, 0, 192, 192);  offContext.putImageData(imagedata, 0, h);  let image = this.offCanvas.transferToImageBitmap();  this.context.transferFromImageBitmap(image);}
复制代码

五、整体代码效果

将上述代码整合到一个组件中,确保在组件初始化时绘制背景,并在需要时更新动态效果。


完整组件代码:


@Componentstruct CanvasExample1 {  private settings: RenderingContextSettings = new RenderingContextSettings(true);  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600);  private img: ImageBitmap = new ImageBitmap("image/img.png");  private img2: ImageBitmap = new ImageBitmap("image/img_1.png");
@State @Watch('draw') level: number = 3;
draw() { this.context.clearRect(0, 0, 192, 192); let offContext = this.offCanvas.getContext("2d", this.settings); offContext.drawImage(this.img2, 0, 0, 192, 192); let h = this.level * 192 / 5; let imagedata = offContext.getImageData(0, h, 192, 192); offContext.drawImage(this.img, 0, 0, 192, 192); offContext.putImageData(imagedata, 0, h); let image = this.offCanvas.transferToImageBitmap(); this.context.transferFromImageBitmap(image); }
generateRandomNumberUpToFive(): number { const randomInt = Math.floor(Math.random() * 5); // 0, 1, 2, 3, 4 if (Math.random() < 0.2) { return 5; } return randomInt; }
aboutToAppear(): void { setInterval(() => { this.level = this.generateRandomNumberUpToFive(); }, 300); }
build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') .height('100%') .onReady(() => { let offContext = this.offCanvas.getContext("2d", this.settings); offContext.drawImage(this.img, 0, 0, 192, 192); }); } .width('100%') .height('100%'); }}
复制代码

总结

通过本文的详细解析,我们不仅实现了一个动态声控话筒组件,还深入了解了鸿蒙 OS 中的绘图 API 和动态效果实现方法。希望这篇文章能够为其他开发者提供灵感和指导,共同推动鸿蒙生态的创新与发展。

发布于: 刚刚阅读数: 5
用户头像

还未添加个人签名 2021-11-19 加入

还未添加个人简介

评论

发布
暂无评论
鸿蒙OS创新实践:动态声控话筒开发指南_鸿蒙_王二蛋和他的张大花_InfoQ写作社区