Как найти координаты элемента HTML в Angular - PullRequest
0 голосов
/ 01 августа 2020

Я новичок в Angular, поэтому подробное объяснение было бы полезно.

Я рисую несколько кругов, используя шаблон ниже:

<div (window:resize)="onEatableResized($event)">
  <svg id="eater" (click)="onEaterClicked()"
      [@eater_circle_trigger]="eater_clicked ? 'eater_clicked' : 'none'"
      (@eater_circle_trigger.done)="onEaterDone($event)"
      [attr.width]=eater_data.box_size
      [attr.height]=eater_data.box_size>
        <circle cx="20" cy="20" stroke-width="1"
          [attr.r]=eater_data.radius
          [attr.stroke]=eater_data.stroke_color
          [attr.fill]=eater_data.fill_color>
        </circle>
  </svg>

  <svg *ngFor="let ncircles of total_circles|times; index as id"
    id="{{ 'eatable_' + id }}"
    [attr.width]=eatable_data.box_size
    [attr.height]=eatable_data.box_size>
      <circle cx="20" cy="20" stroke-width="1"
        [@eater_trigger]="id < current_eatable ? 'dead' : 'alive'"
              [attr.r]=eatable_data.radius
        [attr.stroke]=eatable_data.stroke_color
        [attr.fill]=eatable_data.fill_color
      />
    </svg>
</div>

Это выглядит так:

введите описание изображения здесь

При щелчке по красному кругу он перемещается к следующему кругу справа с помощью триггера eater_circle_trigger:

animations: [
    trigger('eater_circle_trigger', [
      state('eater_clicked', style({
        transform: 'translate(35px, 0px)'
      })),
      transition('* => eater_clicked', [
        animate('1s ease-in-out')
      ])
    ]),
    trigger('eater_trigger', [
      state('dead', style({
        fill: 'white'
      })),
    ])
  ]

Я использую transform: 'translate(35px, 0px)' и это работает, потому что я знаю его позицию. Я не хочу, чтобы так работало. Я хочу найти положение следующего круга и переместить туда красный круг без использования константы translate(35px, 0px). Это должно быть 'translate(' + xt + ', ' + ' yt ')', где xt и yt - координаты следующего круга.

Как это сделать в Angular? Если есть лучшее решение, вы тоже можете его предложить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...