绘制语音消息,仿聊天软件,语音消息的绘制。

仿聊天软件,语音消息的绘制。

HarmonyOS
2024-05-23 23:42:15
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
xbibi

使用的核心API

Canvas

核心代码解释

const CANVAS_POS_X1: number = 0; 
const CANVAS_POS_Y1: number = 0; 
const CANVAS_POS_X2: number = 119; 
const CANVAS_POS_Y2: number = 18; 
const START_POS_X: number = 117; 
const OFFSET_X: number = 4.5; 
const RECT_WIDTH: number = 1.5; 
const TWO: number = 2; 
  
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  @State volumeList: number[] = new Array(27).fill(0); 
  canvasTimer: number = -1; 
  renderingContextSettings: RenderingContextSettings = new RenderingContextSettings(true); 
  canvasRenderingContext2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingContextSettings); 
  
  build() { 
    Row() { 
      Canvas(this.canvasRenderingContext2D) 
        .width(CANVAS_POS_X2) 
        .height(18) 
        .backgroundColor(Color.White) 
        .onReady(() => { 
          this.canvasRenderingContext2D.strokeStyle = 
          getContext().resourceManager.getColorSync($r('sys.color.ohos_id_color_text_primary_contrary')); 
          this.canvasRenderingContext2D.lineWidth = RECT_WIDTH; 
          this.canvasRenderingContext2D.lineCap = 'round'; 
          this.refreshVolumeList(); 
        }) 
  
    } 
    .backgroundColor('#4d5e55') 
    .justifyContent(FlexAlign.Center) 
    .alignItems(VerticalAlign.Center) 
    .width('100%') 
    .height(80) 
  } 
  
  refreshVolumeList() { 
    this.canvasTimer = setInterval(() => { 
      this.volumeList.shift(); 
      this.volumeList.push(8  + 10 * Math.random()); 
      this.draw(); 
    }, 70); 
  } 
  
  draw() { 
    this.canvasRenderingContext2D.clearRect(CANVAS_POS_X1, CANVAS_POS_Y1, CANVAS_POS_X2, CANVAS_POS_Y2); 
    for (let index = 0; index < this.volumeList.length; index++) { 
      const element = this.volumeList[index]; 
      if(element === 0) {      continue;    } 
      const posX = START_POS_X - (OFFSET_X * index); 
      const posY = (18 - element) / TWO; 
      this.canvasRenderingContext2D.beginPath(); 
      this.canvasRenderingContext2D.moveTo(posX, posY); 
      this.canvasRenderingContext2D.lineTo(posX, posY + element); 
      this.canvasRenderingContext2D.stroke(); 
    } 
  } 
  
  aboutToAppear() { 
    clearInterval(this.canvasTimer) 
  } 
}

注明适配的版本信息

IDE版本:4.1.3.500

SDK版本:4.1.5.6

实现效果

分享
微博
QQ
微信
回复
2024-05-24 23:29:36
相关问题
ArkTS语言支持语音识别吗?
561浏览 • 1回复 待解决
SurfaceProvider绘制延迟
6103浏览 • 4回复 已解决
如何操作canvas重新绘制
397浏览 • 1回复 待解决
鸿蒙如何实现位图绘制
8365浏览 • 1回复 待解决
Canvas绘制内容如何动态更新
425浏览 • 1回复 待解决
独立指定帧率来运行UI绘制
379浏览 • 1回复 待解决
bitmap绘制内容需要支持清屏功能
429浏览 • 1回复 待解决
Canvas如何触发刷新重复绘制
375浏览 • 1回复 待解决
使用Drawing实现图形绘制与显示
401浏览 • 1回复 待解决
canvas怎么绘制资源目录下图片
242浏览 • 1回复 待解决
VoIP呼叫消息问题场景
690浏览 • 1回复 待解决
Polyline组件绘制坐标不准确
684浏览 • 1回复 待解决
harmony surfaceProvider绘制不显示问题
8604浏览 • 4回复 待解决
XComponent、NativeDrawing实现2D图形绘制
465浏览 • 1回复 待解决
HarmonyOS是否支持消息推送?
531浏览 • 1回复 待解决
绘制手动生成线条坐标系
368浏览 • 1回复 待解决
消息推送获取token失败
622浏览 • 1回复 待解决
Redis消息队列定义是什么?
2210浏览 • 1回复 待解决
通过Native 调用c++层实现文本绘制
472浏览 • 1回复 待解决