赞赞赞

问题三：如何实现LED效果的弹幕滚动？

如何实现下图中的效果，需要滚动？

解决方案：

通过Marquee实现滚动播放的效果，Canvas组件画出一个LED效果的遮罩，具体步骤如下：

1. 计算文本是否超过Marquee的宽度，如果没有超过，用空格补齐，以保证正常滚动，示例代码如下：

   CompleteTextByTextWidth(src: string, fontSize: number, fontWeight: number) {
     let displayInfo = display.getDefaultDisplaySync()
     let displayWidth = displayInfo.width
     let TextWidth = this.getUIContext()
       .getMeasureUtils()
       .measureText({ textContent: src, fontSize: fontSize, fontWeight: fontWeight })
     while (TextWidth <= displayWidth) {
       src += ' '
       TextWidth = this.getUIContext()
         .getMeasureUtils()
         .measureText({ textContent: src, fontSize: fontSize, fontWeight: fontWeight })
     }
     return src
   }
   

2. 使用Marquee实现滚动显示，代码示例如下：

   Marquee({
     start: this.start,
     step: this.step,
     fromStart: this.fromStart,
     src: this.danMuSrc
   })
     .width(this.danMuScreenWidth)
     .height(this.danMuScreenHeigth)
     .fontColor('#ffc60f0f')
     .fontSize(48)
     .fontWeight(700)
     .backgroundColor('#182431')
   

3. 通过Canvas绘制网格遮罩，实现LED点阵屏的效果，代码示例如下：

   // LED点阵屏模拟遮罩
   Canvas(this.canvasContext)
     .width(this.danMuScreenWidth)
     .height(this.danMuScreenHeigth)
     .onReady(() => {
       this.canvasContext.beginPath();
       this.canvasContext.lineWidth = 0.55;
       let lineCountW = this.danMuScreenWidth / this.spaceWidth
       let lineCountH = this.danMuScreenHeigth / this.spaceWidth
       // 相等间隔画出横线
       for (let index = 0; index <= lineCountH; index++) {
         let y = index === lineCountH ? (this.danMuScreenHeigth) : this.spaceWidth * index;
         this.canvasContext.moveTo(0, y);
         this.canvasContext.lineTo(this.danMuScreenWidth, y);
       }
       // 相等间隔画出竖线
       for (let index = 0; index <= lineCountW; index++) {
         let x = index === lineCountW ? (this.danMuScreenWidth) : this.spaceWidth * index;
         this.canvasContext.moveTo(x, 0);
         this.canvasContext.lineTo(x, this.danMuScreenHeigth);
       }
       this.canvasContext.stroke();
     })
   

完整代码示例如下：

import { display } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State start: boolean = false
  @State danMuSrc: string = ""
  context = this.getUIContext().getHostContext() as Context
  private fromStart: boolean = true
  private step: number = 10
  private danMuScreenWidth: number = this.getUIContext().px2vp(display.getDefaultDisplaySync().width)
  private danMuScreenHeigth: number = 200
  private spaceWidth: number = 3
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  aboutToAppear(): void {
    this.danMuSrc = this.CompleteTextByTextWidth(this.danMuSrc, 48, 700)
  }

  CompleteTextByTextWidth(src: string, fontSize: number, fontWeight: number) {
    let displayInfo = display.getDefaultDisplaySync()
    let displayWidth = displayInfo.width
    let TextWidth = this.getUIContext()
      .getMeasureUtils()
      .measureText({ textContent: src, fontSize: fontSize, fontWeight: fontWeight })
    while (TextWidth <= displayWidth) {
      src += ' '
      TextWidth = this.getUIContext()
        .getMeasureUtils()
        .measureText({ textContent: src, fontSize: fontSize, fontWeight: fontWeight })
    }
    return src
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Stack() {
        Marquee({
          start: this.start,
          step: this.step,
          fromStart: this.fromStart,
          src: this.danMuSrc
        })
          .width(this.danMuScreenWidth)
          .height(this.danMuScreenHeigth)
          .fontColor('#ffc60f0f')
          .fontSize(48)
          .fontWeight(700)
          .backgroundColor('#182431')
        // LED点阵屏模拟遮罩
        Canvas(this.canvasContext)
          .width(this.danMuScreenWidth)
          .height(this.danMuScreenHeigth)
          .onReady(() => {
            this.canvasContext.beginPath();
            this.canvasContext.lineWidth = 0.55;
            let lineCountW = this.danMuScreenWidth / this.spaceWidth
            let lineCountH = this.danMuScreenHeigth / this.spaceWidth
            // 相等间隔画出横线
            for (let index = 0; index <= lineCountH; index++) {
              let y = index === lineCountH ? (this.danMuScreenHeigth) : this.spaceWidth * index;
              this.canvasContext.moveTo(0, y);
              this.canvasContext.lineTo(this.danMuScreenWidth, y);
            }
            // 相等间隔画出竖线
            for (let index = 0; index <= lineCountW; index++) {
              let x = index === lineCountW ? (this.danMuScreenWidth) : this.spaceWidth * index;
              this.canvasContext.moveTo(x, 0);
              this.canvasContext.lineTo(x, this.danMuScreenHeigth);
            }
            this.canvasContext.stroke();
          })
      }

      TextInput({ placeholder: '输入弹幕' })
        .type(InputType.USER_NAME)
        .placeholderColor(0x182431)
        .showPasswordIcon(false)
        .placeholderFont({ size: 16, weight: FontWeight.Regular })
        .opacity(0.6)
        .width('90%')
        .margin({ top: 20 })
        .hitTestBehavior(HitTestMode.Default)
        .onChange((value: string) => {
          this.danMuSrc = this.CompleteTextByTextWidth(value, 48, 700);
        })
      Button('Start')
        .onClick(() => {
          this.start = true
        })
        .width(120)
        .height(40)
        .fontSize(16)
        .margin({ top: 20 })
        .fontWeight(500)
        .backgroundColor('#007DFF')
    }
    .width('100%')
    .height('100%')
  }
}

原链接：

如何实现LED效果的弹幕滚动现实-华为开发者问答 | 华为开发者联盟 (huawei.com)