Блог

Я немного боролся с интерфейсным кодом, так как это первый раз, когда я взаимодействую с Angular и Phaser.

Моей целью было создать какую-то функцию «подсветки», и мне это удалось. Вот как это выглядит:

Однако я также хочу сделать его «изменяемым» с левой и правой сторон (с помощью стрелок). Но я искал какое-то свойство, которое могло бы включить эту функциональность в Phaser, но я ничего не смог найти.

Это код, который у меня есть для создания этого компонента «подсветка» :

 addHighlight(startX, selectionWidth, highlightId, bpm?, beatstime?, label: string = '') {
   let rect: Phaser.GameObjects.Rectangle;
   let rectContainer: Phaser.GameObjects.Container;
   let highlightSeparator : Phaser.GameObjects.Rectangle;
   let beatsTimeText: Phaser.GameObjects.Text;
   let bpmText: Phaser.GameObjects.Text;
   rect = this.add
     .rectangle(
       0,
       0,
       selectionWidth,
       this.camConfig.height,
       this.isSubmitted === true ? this.ecgTheme.highlightSubmitedColor : this.ecgTheme.highlightColor,
       this.ecgTheme.highlightOpacity,
     )
     .setOrigin(0, 0)
     .setInteractive();
     highlightSeparator = this.add
     .rectangle(
       0,
       this.camConfig.height/2,
       selectionWidth,
       2,
       this.ecgTheme.highlightSeparatorColor,
       1,
     ).setOrigin(0, 0);
     rect.setName(HIGHLIGHT);
   rectContainer = this.add.container(startX, 0, [rect, highlightSeparator]);

   if(beatstime !== undefined){

    beatsTimeText = this.add.text(
      0,
      (this.camConfig.height/2)   5,
     beatstime,
      { fontFamily: this.ecgTheme.font , color: this.ecgTheme.highlightBeatsTextColor, fontSize: '12px', backgroundColor: this.ecgTheme.highlightBeatsBackgroundColor },
    );
    beatsTimeText.setX((selectionWidth / 2) - (beatsTimeText.width / 2));
    beatsTimeText.setName(BEATSTIME);
    rectContainer.add(beatsTimeText);
   }

   if(bpm !== undefined){
    bpmText = this.add.text(
      0,
      (this.camConfig.height / 2) - 15,
      bpm   ' bpm',
      { fontFamily: this.ecgTheme.font , color: this.ecgTheme.highlightBeatsTextColor, fontSize: '12px', backgroundColor: this.ecgTheme.highlightBeatsBackgroundColor },
    );
    bpmText.setX((selectionWidth / 2) - (bpmText.width / 2));
    bpmText.setName(BEAT);
    rectContainer.add(bpmText);
   }

   this.addCloseToContainer(rectContainer, rect.width - 22, 5, 'close', this.closeClicked)
   rectContainer.depth = 100;

   const rectBounds = rectContainer.getBounds();

   this.addLabelToContainer(0, rectBounds.height, '#ffffff', rectContainer, FINDINGSLABEL, label);

   rectContainer.setSize(rectBounds.width, rectBounds.height);
   if (this.highlightRects === null) {
     this.highlightRects = [];
   }

   rectContainer.setData(ContainerDataKey, highlightId);
   rectContainer.setData(ContainerBpmKey, bpm);
   rectContainer.setData(ContainerBeatsTimeKey, beatstime);
   this.highlightRects.push(rectContainer);
   rect.on("clicked",this.highlightSelected, this);
   this.highlightSelected(rect, true);
 }
 

Любая помощь будет высоко оценена